Disclaimer: The feature is currently in beta and not officially supported by Strapi.

What is Visual Editing by Vercel

Visual Editing by Vercel was released on May 3rd 2023, and it enables editors to seamlessly transition from the displayed content on your frontend to the corresponding fields in the CMS that govern it. This tool now allows for real-time editing of content on websites powered by Strapi. It's a bridge between content visualization and seamless collaboration.

Real-time visualization, seamless collaboration, and direct editing without needing to dive into the backend - this is the future of content management. The process becomes more efficient, reducing back-and-forth communication, which means faster, more effective changes.

Ease of Use: For non-technical users, such as content creators, marketers, and editors, a visual interface is much more intuitive than entering raw data or markdown. You can easily see how the content will appear once published.

WYSIWYG (What You See Is What You Get): With visual editing, you can get a live preview of how your content will look, allowing you to make real-time adjustments and refinements. This eliminates the guesswork of how the content might render on the frontend.

Faster Content Creation: Visual tools can often speed up your content creation process. Editing functionality, for instance, makes it much quicker to change copy or other elements on a page.

Strapi Now Supports Vercel’s Visual Editing

Exciting news! Strapi now supports Vercel Visual Editing, currently in Beta. We've taken steps to fully integrate Strapi with Vercel's Visual Editing feature. Here’s a snapshot:

Strapi Plugin - Content Source Map We've created the source map plugin for Vercel, allowing editors to navigate directly from rendered content on the front-end to the Strapi fields that control it. The Content Source Map Plugin is available to our Enterprise customers and Pro, Team and Custom Cloud customers.

Imagine hovering over a piece of content on your website and, with a single click, jumping directly to the related CMS field in Strapi for editing. It's that simple, fast, and intuitive! Gone are the days of switching between tabs to see how your content looks. With Strapi's support for Vercel’s Visual Editing, what you see is what you edit; everything is streamlined for efficiency!

By leveraging the @strapi/plugin-content-source-map, we've bridged Strapi with this fantastic real-time visual editing tool. We've seamlessly incorporated the source map plugin to ensure that you get the best visual editing experience.

Get Started with the Click-to-Edit Frontend

Getting started is a breeze:

1. Installation: Run npm install @strapi/plugin-content-source-map to add the plugin to your project.
2. Configuration: Configure the plugin and ensure your API calls have the encodeSourceMaps=true parameter. Remember, for performance reasons, this should only be used in draft mode or preview deployments.

For a detailed description, head over to the documentation of the package on NPM. We invite you to test it and share feedback on Discord or Canny as we work towards General Availability.