Netlify Docs
Ask Netlify

Contact

Visual editing /Visual Editor /Get started /

Visual Editor Quickstart

Try out visual editing more quickly by starting from one of our pre-configured visual editor template sites from your Netlify dashboard and deploying your site first.

By starting with a pre-configured template site, you have less configuration to customize before trying out the visual editor.

Different setup path?

There are many ways to set up the visual editor. To find another setup path, check out our docs on choosing the best setup path for you.

  1. As a Developer or Owner, go to the Sites list page for your team, open the Add new site menu in the upper right, and select Start from a template.

    The "Sites page" with a list of sites in your team and the "Add site" menu with the "Start from a template" option

  2. Choose a template site pre-configured for visual editing. You can choose a template that is set up to work with a headless CMS, such as Contentful or Sanity. Or you can choose a template that is set up to work without a headless CMS and that relies on Git to manage content versions for you (also called Git CMS).

    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

    What is Git CMS?

    For the visual editor, Git CMS refers to storing content in files and managing them directly in those files with Git version control.

  3. Clone the template to your Git provider, such as GitHub.

  4. Choose a site and repository name and whether you want the cloned repository to be private or public.

  5. If you chose a headless CMS template, you must sign in to your headless CMS and follow the setup prompts.

  6. Deploy your template site. Netlify applies some default settings but you can update them as needed later.

  7. After your first site deploy is successful, go to

    Site configuration Visual Editor
    and select Set up preview environment.

  8. Next, follow the prompts to finish setting up the visual editor for your site and confirm with Save.

If you need additional help you can check out the Visual editor walkthrough help.

  1. To try out the visual editor after completing the configuration, open the Visual editor under your site overview details.

Checkpoint

You should now be able to open the visual editor and use the page editor to make changes to your site.

If this is not true for you, let us know in the docs feedback form at the bottom of this page.