Set Up Visual Builder for Your Website

Contentstack’s Visual Builder transforms the content management experience, enabling content managers to edit and preview website content in real time. Unlike the standard Live Preview feature, which only allows previews within entries, the Visual Builder offers advanced capabilities—letting you modify the website’s structure and design from the same interface. This feature provides an intuitive and interactive environment for updating content, ensuring greater control over the final published result.

This guide outlines the steps to set up and configure Visual Builder for your website. Follow these instructions to enable Live Preview, upgrade SDKs, and set up the Visual Builder for an optimized editing experience.

• Contentstack account
• Access to stack settings
• Live Preview must be set up for your website
• Preview token
• IFrame-compatible website to avoid CORS errors

1. Upgrade Delivery and Live Preview SDKs

   link

   The Visual Builder requires Live Preview Utils version 3.0 or above and delivery SDK version 3.20.3 or above. To update to the latest versions, run the following command:

   npm install contentstack@latest @contentstack/live-preview-utils@latest

2. Configure Visual Builder

   link

   Pass the following config to the Live Preview init method:

   ...
   
   import ContentstackLivePreview from "@contentstack/live-preview-utils"
   
   ContentstackLivePreview.init({
   
     stackDetails: {
   
       apiKey: "your-stack-api-key",
   
       environment: "your-environment",
   
     },
   
     mode: "builder",
   
     ...
   
   });
   
   ...

   Note: To explore the different configuration properties, refer to the config section.
   Ensure Live Preview is set up for your website. Refer Set Up Live Preview for Your Website for more information.

   

3. Set Up Edit Tags

   link

   Once you’ve set up Live Preview, you should be able to see your website in Visual Builder.

   

   Edit tags contain the location where the corresponding field lies within the entry. The Live Preview Utils SDK searches for the elements which contain the edit tags referred to as data-cslp.
   Setting up edit tags will enable edit functionalities within your website.

   <main>
   
     <h1 {...(post.$?.title ?? {})}>{post.title}</h1>
   
     <div {...(post.$?.author.$?.name ?? {})}>{post.author.name}</div>
   
     <div {...(post.$?.body ?? {})}>{post.body}</div>
   
   </main>

   When your website runs in production, you should remove the edit tags. This will throw an error when you try to destructure an undefined value. Hence, we use the Nullish coalescing and pass an empty object value.Refer to Set Up Live Edit Tags for Entries with REST to configure your tags.To enable actions like adding, deleting, and ordering an instance of a multiple field type, add live edit tags for each instance of the field. Refer to the Enable Support for Multiple Field Actions in Visual Builder section for more information.By following these steps, you can fully configure the Visual Builder for your website, allowing seamless content management and live preview capabilities.

4. [Optional] Enable Empty Placeholder for Multiple Fields

   link

   Additionally, to display an empty placeholder when a modular blocks field is not populated, import the VB_EmptyBlockParentClass from Live Preview Utils:

   import { VB_EmptyBlockParentClass } from '@contentstack/live-preview-utils'

   Add it as a class to the parent HTML element of all the block components:

   <div
   
     {...(entry.$?.page_components || {})}
   
     className={pageComponents?.length ? undefined : VB_EmptyBlockParentClass}
   
   >
   
   {/* Block components */}
   
   </div>

   Once added, you should see a empty placeholder for multiple fields.