Support Portal

Submit a ticket My Tickets

Does Strapi Support Vercel Visual Editing?

The Short Answer: Yes

Strapi fully supports Vercel's Visual Editing feature. The integration aims to streamline your content creation and editing process, offering real-time visualization and editing capabilities right on your website's frontend. Strapi has developed a specific plugin, @strapi/plugin-content-source-map, to facilitate this feature. The Content Source Map Plugin is exclusively available to our Enterprise and Custom Cloud customers.

What Does This Mean for You?

Intuitive Visual Interface

Instead of toggling back and forth between your content and how it looks on the website, you can now edit directly on the frontend. When you hover over a piece of content, you can click to edit it instantly.

Real-time Changes

With this integration, what you see is what you edit. This eliminates any guesswork and allows you to see how your changes will look in real-time.

WYSIWYG Experience

What You See Is What You Get. You get a live preview of how your content will appear once published, enabling you to make more accurate and effective changes.

Efficient Workflow

The feature aims to reduce the back-and-forth communication usually required during the editing process. As a result, content creation and modifications are quicker and more effective.

Getting Started

  1. Installation: Run npm install @strapi/plugin-content-source-map to add the plugin to your Strapi project.
  2. Configuration: Configure the plugin following the setup guidelines and make sure your API calls include the encodeSourceMaps=true parameter. Note that, for performance reasons, this should only be enabled in draft mode or preview deployments.

For a more in-depth guide, refer to the official documentation. We also encourage you to share your feedback on Discord or Canny as we continue to improve this feature.

Strapi’s integration with Vercel’s Visual Editing not only augments your content management experience but also significantly speeds up your content creation and editing process.

Kai is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.