Netlify Visual Editor overview
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.
Learn more about how Visual Editor works and what it can do for your team below. Or move on to enable visual editing for your site.
# Key visual editing features
- Content Source Interface: an engine that makes content from any source editable with Visual Editor.
- No production dependencies: all required packages can be installed as development dependencies. You do not need to use Visual Editor in production.
- Visual editing: your site runs in a preview window inside Visual Editor. Content changes are reflected immediately in the preview.
- Two-way content sync: Visual Editor also listens for changes from content sources and updates the preview immediately.
- Inline editing: in addition to traditional form fields, Visual Editor makes it possible for editors to change content by clicking directly on elements in the preview window.
# Learn how Visual Editor works
If you want a deeper understanding of how Visual Editor works, dig into our concept guides:
- Visual Editor concepts overview: a deeper dive into how Visual Editor fits into your modern web stack and how its major elements work.
- How the visual editor works: walk through the core concepts of how Visual Editor works by following a developer’s typical journey.
- Content-driven development: empowering non-technical editors to make structural changes to a website without the help of a developer.
- Reusable content: help content editors work faster by providing a starting point for content.
- Structured content: how Visual Editor works with structured content, along with content modeling basics.
- Two-way content sync: Visual Editor stores content back to the appropriate source, while also listening for changes from each source.
# Supported tools, services, and frameworks
As part of the Netlify platform, Visual Editor supports most tools, services, and frameworks supported by Netlify. Find more information below on details specific to Visual Editor.
# Supported frameworks
The visual editor is run in a Node-based environment by default, but can be customized to run any framework. Local development supports any framework that runs on a local port.
Enabling automatic content reloading (showing content updates in real-time in the visual editor UI) may require additional code and configuration in some frameworks. See framework integration guides for specific cases.
# Supported content sources
Content Source Interface (CSI) supports any structured content source with read and write abilities via an API.
There are several content sources supported by default, though you can always build your own CSI module or contact us for additional support.
# Unsupported tools
Visual Editor is designed to be composable and flexible, and we’re always working to expand our integrations. If your tool isn’t supported, get in touch to discuss your needs.
It is likely that if we aren’t already working on support for your desired integration, you can create the necessary support through code and configuration.
Did you find this doc useful?
Your feedback helps us improve our docs.