Netlify Docs
Ask Netlify

Contact

Visual editing /Visual Editor /Cloud setup /

Previewing with Visual Editor

See and share changes in the visual editor before publishing to production.

With the visual editor, you’re always in a preview state. There are ways to further customize that state and invite others to view.

Deploy Previews in Netlify’s Visual Editor

Deploy Previews are accessible through Visual Editor dashboard. Reviewers, Content Editors, and Publishers now have simplified access to preview, review, and collaborate on site changes.

To preview, go to your project in Netlify’s Visual Editor and select “More options” (represented by three vertical dots). Select the preview to review your site.

Any branch with a corresponding Deploy Preview will be included in the list, including Visual Editor working branch.

This feature is currently in private beta. If you would like to enable this feature, please contact us for more information.

# Preview server

In the visual editor, the preview is an iframe that points to your site running in development mode.

Learn more about this based on whether you are working in local development mode or not.

# 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 Visual Editor 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.