Previewing

See and share changes in a cloud project before they go to production.

With Netlify Create, you're always in a preview state. There are ways to further customize that state and invite others to view.

Preview Server

In the Netlify Create visual editor, the preview is an iframe that points to your site running in development mode. Learn more about this based on your working mode — local development or cloud project.

Adjusting Preview Viewport

Adjust the preview mode using the desktop and eye icons in the top toolbar.

Preview Modes
Preview Modes
  1. The desktop icon adjusts the size of the viewport within the preview frame.
  2. The eye icon enables preview mode, which hides Netlify Create editing controls. Click the edit icon (top left) to return to edit mode.

Custom Viewport Sizes

Viewport sizes can be customized by providing the viewports configuration property.

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
export default defineStackbitConfig({
  viewports: [
    {
      label: 'iPhone 14',
      size: { width: 390, height: 844 },
    },
    {
      label: 'iPhone 14 Plus',
      size: { width: 428, height: 926 },
    },
  ],
})
Custom Viewport Sizes
Custom Viewport Sizes
The actual size will be shown whether or not viewports is defined.

Sharing Preview

All users on the project can copy a link to the preview by opening the Share menu. This URL contains a key that enables anyone with it to view a preview of your site.

Collaboration Menu
Collaboration Menu

Note that previewers are not collaborators and will not be able to make content changes on the site unless they are also invited as collaborators.