Netlify Docs
Ask Netlify

Contact

Visual Editor framework support

Visual Editor is not framework-specific in any way and does not require using framework-specific libraries. Rather, it has certain requirements that websites built with virtually all modern frameworks can satisfy.

It's highly recommend to read How the visual editor works before diving further. In this article we assume that you're up to speed on content-driven development and working modes (local development vs. a hosted Visual Editor project).

# Requirements

To use Visual Editor with your framework, follow the below instructions to make your site editable and to configure how Visual Editor should run and deploy your website.

# Make your site editable

To run in any environment, including local development, you need the following:

  1. A valid configuration file (reference). Make sure to specify which content models represent pages, and what is their URL path.
  2. Support for Content Reload (guide). This typically requires adding code to your site. See specific framework guides for
  3. [Optional] Annotations: HTML data attributes marking where in the page content objects and their fields are found. Annotations enable visual highlighting in the editor.

When content changes are made by anyone, Visual Editor detects the change automatically. Then, gracefully reloading on-page content without a full-page reload is essential for the user experience.

Reloading can be handled by Visual Editor in "fully-automatic" mode for certain frameworks (currently Next.js, Angular and Gatsby). For other frameworks, your website's code should implement a listener on content change events and efficiently refresh the page contents. These events are only fired when working with Visual Editor - your production site is never affected.

In each of the framework guides below we link to a concrete code example and explain how content reload was implemented in it.

# Configure how to run your website

When you create a hosted Visual Editor Project (either by choosing a starter or importing an existing repository), Visual Editor runs your website in a cloud-based container. Inside that container, we run your site's server.

Your website server should be run in your web framework's development mode, in which any code changes trigger a refresh and any statically-generated pages can be re-created on content changes.

For a few frameworks (currently Next.js, Angular and Gatsby) the needed configuration is all set by default. For others, see the guide to bringing your own framework.

# Configure how to deploy your live website

To deploy your site on Netlify, you also need to include a Netlify configuration file netlify.toml in your repository. All starters & examples include this file.

# Framework-specific notes

  • Angular: how to use Visual Editor with an Angular-based website
  • Bring your own: how to use Visual Editor with any framework
  • Hydrogen: how to use Visual Editor with a website that uses Shopify’s Hydrogen
  • Next.js: how to use Visual Editor with a Next.js-based website
  • Nuxt 3: how to use Visual Editor with a Nuxt 3-based website
  • SvelteKit: how to use Visual Editor with a SvelteKit-based website