Visual Editor /

Get started with Netlify Visual Editor

Learn how to enable visual editing for your Netlify site.

Netlify Visual Editor is an environment for content editors to work with structured content in a visual way. It is designed for composable architectures, and is compatible with any site framework and API-enabled content source.

If you want to learn more about how Visual Editor works, visit the overview page. Otherwise, let’s enable visual editing for your site.

# Requirements

For the most success getting visual editing working for your site, you should have the following:

  • Site framework that runs a development server on a local port using Node.js v16 or later.
  • Content stored in a supported headless CMS or in individual content files separated from code.

If your site doesn't meet these requirements, you can likely still get visual editing working with additional code and configuration. Contact us for help.

# Content source requirements

If using an API-based CMS, you must also have a user account with read and write access to that content source.

If using file-based content, the content must be defined by a schema that the visual editor can understand. This requires adding content modeling properties to your visual editor configuration file. We'll cover a bit on configuration later in this guide.

Learn more about how Visual Editor works with structure content.

# Enable visual editing

Visual editing can be enabled under the proper conditions when creating a new Netlify site. Otherwise, it can be enabled for an existing sites.

# Create new site with visual editing

When creating a site by importing a Git repository, if the repository has a stackbit.config.ts file, visual editor options will appear in the guided setup for your site.

Visual editing options for creating a new site

With these options, you can choose your working branch or disable visual editing for the site.

# Add content source environment variables

If your site uses an API-based content source, you'll need to add the appropriate environment variables used in the visual editing configuration file.

Here's an example of adding environment variables for a Contentful content source:

Example environment variables for a site using Contentful

# Add visual editing to an existing site

You can add visual editing to an existing site through the site settings. Choose the Visual editor tab and follow the prompts to enable visual editing.

Enable visual editor from site settings

This will lead to a configuration screen where you can choose your working branch and primary content source. This list includes all non-default branches, along with a preview option. If preview is chosen, a new preview branch will be added to the repository.

Configuration when enabling visual editing for an existing site

As you select a content source, you'll be prompted to configure the appropriate environment variables for that source.

Example adding Contentful environment variables when enabling visual editing on an existing site

The visual editor configuration file will be pre-populated with the selected content source and environment variables.

# Visual Editor access and status

When visual editing is enabled for a site, you can access the visual editor through the following:

  1. The side navigation within a site in the Netlify UI
  2. In the site details card

Points of access to a site's visual editor UI

The status of the visual editor UI is displayed in the site details card found in site settings.

Visual editor application status in site settings

# Customize the editing experience

After enabling visual editing, these are the next steps developers typically take to customize the editing experience:

# Unlocking advanced features

And as you progress, there are more advanced features to consider:

# Working locally

It is typically easiest to customize the visual editing experience by running the site locally. This allows you to see changes in real-time and test the editing experience. Learn more about local development for visual editing.

# Disable visual editing

To disable visual editing for a site with visual editing enabled, visit the site settings and choose the Visual editor tab. Select the Disable the visual editor button and confirm you want to stop visual editing for the site.

Disable visual editing for a site button