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.

# 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 project's ellipsis menu in the Visual Editor dashboard. Deploy Preview URLs and branch preview URLs are open to anyone with the link, unless password protection or team login are set up.

Previews menu

Note that people without access to the Netlify web app will not be able to make content changes on the site through the Visual Editor unless they are also part of the team account. To add people to your Netlify account, go to

Members
and select Add members.