Visual EditingDiscover how Vercel's Visual Editing enhances content management for headless CMSs, enabling real-time editing, and seamless collaboration.
Visual Editing is available in Private Beta to Enterprise plans
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 on preview deployments without requiring a developer's intervention.
Visual Editing, currently in a limited private beta, is accessible for Enterprise Teams using the following content editing workflows:
To participate in this or future private betas, choose an option below:
I'm an Enterprise TeamPrivate Beta
Contact us to participate in the Visual Editing private beta.
I'm a CMS ProviderPrivate Beta
Email our partner team to integrate your CMS with Visual Editing.
Once setup, Visual Editing can be enabled on a preview deployment through the 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.