Get started with Netlify Visual Editor
Get started with the Netlify Visual Editor by choosing your setup path and checking that your site meets the requirements to use the visual editor.
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.
The visual editor is optimized for giving Developers the most flexibility in setting up a visual editing environment and custom workflow for a Content team.
This allows Content editors and other custom roles to build new pages with ease and publish content in a streamlined workflow.
Learn more about how the visual editor works or learn as you go by getting started.
# Setup pathways
There are several ways to start setting up the visual editor. We recommend you set up in different ways based on what you are optimizing for.
| Optimizing for | Site Type | Setup guide |
|---|---|---|
| Fastest way to try out visual editor experience on Netlify with new site | New site using a pre-configured template | Visual Editor Quickstart |
| Configuring more than one content source & advanced customization | An existing site or new template site | Set up visual editor locally |
| Existing sites deployed on Netlify with simpler customization | Existing sites | Visual editor walkthrough setup guide |
After your initial setup of the visual editor, we recommend you customize the visual editor for your site and workflow needs. Learn more in the customize editing experience docs.
# Visual Editor Support 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.
# Site repository requirements
When you set up the visual editor for your site you need to have access to the site repository, including the remote site repository once your site is deployed to Netlify.
The visual editor only supports site repository syncing from these Git providers at this time:
- GitHub
- BitBucket
Your site repository also needs a unique working branch for visual editor changes. The default working branch is preview.
# 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 structured content.
# Example template sites
Explore a template site pre-configured for visual editing. Consider starting with the quickstart or local setup guide for a template site that is closer to your site’s needs.
| Site repository | Content source | Optimized for |
|---|---|---|
| TypeScript + MUI Starter | Git CMS | - a tutorial-like experience - learning about visual editor capabilities |
| ContentOps Starter | Git CMS | - learning about content types with over 35 content types - try more complex content type scenarios |
| Auto-annotated portfolio | Git CMS | - learning about auto annotating your site - lots of auto annotated components |
| Next.js & Contentful Starter | Headless CMS: Contentful | getting started with Contentful |
| Astro & Sanity Starter | Headless CMS: Sanity | getting started with Sanity |
# Troubleshooting help
For help getting the visual editor setup, check out troubleshoot visual editor setup.
Did you find this doc useful?
Your feedback helps us improve our docs.