Netlify Docs
Ask Netlify

Contact

Netlify Create /Cloud project /

Previewing with Netlify Create

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.

# Adjust preview viewport

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

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.

export default defineStackbitConfig({
  viewports: [
    {
      label: "iPhone 14",
      size: { width: 390, height: 844 }
    },
    {
      label: "iPhone 14 Plus",
      size: { width: 428, height: 926 }
    }
  ]
});

Tip

The actual size will be shown whether or not viewports is defined.

Custom viewport sizes.

# Share 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.

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