Visual Editing
Discover how Vercel's Visual Editing enhances content management for headless CMSs, enabling real-time editing, and seamless collaboration.Visual Editing allows you to edit content in real-time on websites using headless Content Management Systems (CMSs). By offering real-time content visualization, it enables collaborators to make changes without requiring a developer's intervention.
Visual Editing is accessible for Pro and Enterprise Teams using the following third-party content editing workflows:
These Visual Editing implementations are created and maintained by the companies listed above. For more information on support and getting started, you should refer to their docs.
If you'd like your CMS to support Visual Editing, follow our getting started docs:
Once setup, Visual Editing can be enabled on a preview deployment through the Vercel Toolbar's edit mode button. Using this feature doesn't require any additional configuration or code changes to the page you want to edit.
When editable information is detected on a page, the toolbar shows an edit button to interact with the editable fields.
Selecting the button activates edit mode, which highlights editable fields in blue as you hover near them. An editable field is determined by it having a corresponding model in the CMS. Hover over an element to display a link in the top-right corner, click to open the related CMS field for editing.
Headless CMSs can face challenges in content editing and management, especially in real-time visualization and collaboration. Visual Editing overcomes these challenges by integrating directly into your site and offering the following enhancements:
Most CMSs, even with built-in visual editing, don't integrate seamlessly into your site. This lack of integration forces authors to save and refresh the site to see updates, slowing down the editing process. Visual Editing lets authors select a content area on the page and edit it in the CMS. Combined with Incremental Static Regeneration (ISR), authors get near-instant feedback.
Content changes and feedback typically involve back-and-forth communication, causing inefficiencies and potential miscommunication. Visual Editing improves collaboration by allowing team members to make changes and provide feedback on preview deployments, reducing communication overhead.
Content editing in CMSs usually occurs separately from the website's layout and design. This separation makes it hard for authors to visualize their changes. Visual Editing allows authors to edit content within the website's context, offering a clearer understanding of the impact on design and user experience. The ability to jump from content to the editing interface further enhances this experience.
Was this helpful?