# Video Production Plan : Video 9 — Visual Builder, Releases, and Future-State Preview ### About this export | Field | Value | | --- | --- | | **content_type** | lesson | | **platform** | contentstack-academy | | **source_url** | https://www.contentstack.com/academy/courses/video-production-plan/video-production-plan-video-9-visual-builder-releases-and-future-state-preview | | **course_slug** | video-production-plan | | **lesson_slug** | video-production-plan-video-9-visual-builder-releases-and-future-state-preview | | **markdown_file_url** | /academy/md/courses/video-production-plan/video-production-plan-video-9-visual-builder-releases-and-future-state-preview.md | | **generated_at** | 2026-08-26T11:17:53.665Z | > Part of **[Video Production Plan](https://www.contentstack.com/academy/courses/video-production-plan)** on Contentstack Academy. **Academy MD v3** — structured for retrieval; no quiz or assessment keys. #### Lesson text # Video 9 — Visual Builder, Releases, and Future-State Preview Attribute Details Course 4 (Preview, Visual Builder, and Releases), Module 4.1 (lessons 4-5) + Module 4.2 Covers Lessons 4.1.4, 4.1.5, 4.2.1, 4.2.2, 4.2.3 Priority Critical Length 20-30 min Format Screencast (code editor + Visual Builder in action) Status Not started ## Why This Video Matters This combines one of the most visual platform features with one of the most operationally important publishing topics. Visual Builder is the showstopper demo of the entire certification. ## Outline 1. What Visual Builder adds on top of Live Preview: click-to-edit, drag-and-drop, in-context component management 2. Architecture: how Visual Builder communicates between the Contentstack UI and your frontend 3. data-cslp and editable tagging 4. Implementation walkthrough: adding Visual Builder SDK, annotating components, registering editable regions 5. Show the editor experience: clicking on a component, editing inline, seeing changes live 6. Visual Builder with GraphQL: how to set up when your frontend uses GraphQL instead of REST 7. Localization in Visual Builder: switching locales, seeing locale-specific content render 8. Releases: bundle multiple entries and assets into a single coordinated publish action 9. Veda use case: new collection launch — product entries, landing page, navigation, assets all go live together 10. Scheduling: set a release to publish at a future date/time 11. Version comparison, rollback, and previewing future states ## Key Lines "Visual Builder only works well when the frontend is intentionally prepared for it." "Visual Builder turns your frontend into an editor's canvas. That is the promise of headless done right." "Previewing what will happen later is often more valuable than previewing what exists now." ## Detailed Talking Points ### 1\. What Visual Builder adds on top of Live Preview * Live Preview shows your frontend with draft content. Visual Builder goes further: it turns that frontend into an editable surface. * Click-to-edit: editors click directly on rendered content (a headline, an image, a CTA) and edit in place. No switching between the entry form and a preview panel. * Drag-and-drop: reorder modular block components visually, and Visual Builder reflects the new order instantly. * In-context component management: add, remove, or reconfigure components without leaving the rendered page view. * Visual Builder renders your actual production frontend inside the Contentstack UI via an iframe. Editors see exactly what visitors will see. * Key dependency: if Live Preview is not working, Visual Builder will not work either. It extends Live Preview, it does not replace it. ### 2\. Architecture: how Visual Builder communicates between the Contentstack UI and your frontend * Contentstack loads your frontend in an iframe inside the entry editor. * Visual Builder scans the iframe DOM for data-cslp attributes and creates clickable overlay regions around each tagged element. * When the editor clicks a tagged region, Visual Builder reads the data-cslp value to identify the field and opens an inline editing panel. * Communication happens over the postMessage API between the parent Contentstack window and your iframe. * The Live Preview SDK receives updated data via postMessage and re-renders the element, giving immediate visual feedback. * Changes are saved to the entry's draft state in Contentstack automatically. * MutationObserver watches for DOM changes to keep overlays positioned correctly. ### 3\. data-cslp and editable tagging * The data-cslp attribute is the contract between your frontend and Visual Builder. Without it, nothing is editable. * Format: content\_type\_uid.entry\_uid.locale.field\_path -- four parts, dot-separated. * Each part serves a purpose: content type identifies the schema, entry UID identifies the specific entry, locale identifies the language, and field path maps to the exact field. * For nested fields (groups), use dot notation: seo.meta\_title, not seo\_meta\_title. * For modular blocks, include the array index and block type: components.0.hero.title, not components.0.title. * For reference fields, decide whether to tag the reference field itself (lets editor change which entry is referenced) or the referenced entry's fields (lets editor edit the referenced content). * Incorrect paths cause silent failures: the element renders but no overlay appears, no error in the UI. * Use addEditableTags() from @contentstack/delivery-sdk to auto-generate tag values instead of hand-coding them. It attaches $ properties to each field. ### 4\. Implementation walkthrough * Step 1: Verify Live Preview works first. Check your preview deployment fetches draft content, the SDK is initialized with correct region-specific hosts, and onEntryChange callbacks fire. * Step 2: Add data-cslp attributes to all rendered content. Use addEditableTags() where possible. Pay special attention to modular blocks (include array index), group fields (dot notation), reference fields (choose the right target), and image/file fields. * Step 3: Configure Visual Builder in Contentstack stack settings under Settings > Live Preview. Enable Visual Builder, set the preview URL, and configure content type URL mapping. * Step 4: Conditionally load the Live Preview SDK. Use @contentstack/live-preview-utils, set mode: "builder", configure clientUrlParams.host to the correct application host, and set editButton.exclude: \["outsideLivePreviewPortal"\]. * Step 5: Test in the Contentstack entry editor. Switch to Visual Builder view and verify hoverable highlights, click-to-edit, and real-time updates. ### 5\. Show the editor experience * Open an entry in Contentstack and switch to Visual Builder view. * Hover over elements: highlight regions appear around every tagged element. * Click on a text field: an inline text input appears. Type changes and watch them render immediately. * Click on an image field: a file picker opens. Select a new image and it swaps in the rendered page. * Click on a rich text field: the JSON RTE editor opens inline. * Demonstrate editing a modular block component, then reordering blocks via the entry form and watching Visual Builder reflect the change. * Show that the edit button only appears inside the Contentstack portal, not when accessing the preview URL directly. ### 6\. Visual Builder with GraphQL * GraphQL uses a different preview endpoint (graphql-preview.contentstack.com pattern) and requires the Preview Token instead of Delivery Token. * The live\_preview hash must be passed as a header on each GraphQL request during a live editing session. Without it, there is a delay between keystrokes and preview updates. * data-cslp values always reference the content type schema field UID, not GraphQL aliases. If your query aliases heroTitle: title, the data-cslp must still use title. * When using GraphQL without the Contentstack JS SDK, you do not pass stackSdk to ContentstackLivePreview.init(). Instead, you manage data flow manually through onEntryChange callbacks. * For SSR with GraphQL, trigger router.refresh() in the onEntryChange callback so the server re-runs the query with the updated hash. ### 7\. Localization in Visual Builder * When an editor switches locale in the Contentstack entry editor, a postMessage is sent to the preview iframe with the new locale. * The Live Preview SDK detects the locale change and can trigger navigation to the locale-specific URL or a content refresh. * The locale in data-cslp must be dynamic and match the content being rendered. Hardcoding en-us breaks Visual Builder for every other locale. * Use ContentstackLivePreview.getLocale() in your onEntryChange handler to get the current locale and navigate accordingly. * Locale fallback behavior: if an entry is not localized for ja-jp, the preview shows English fallback content. This is correct behavior but can confuse editors. Consider adding a visual fallback indicator. ### 8\. Releases: coordinated publishing * A Release is a named collection of entries and assets that publish or unpublish together atomically. * Each item carries a publish or unpublish action, so a single Release can swap old content for new content in one operation. * Without Releases, coordinating multi-entry campaigns means publishing items one by one and hoping the timing holds. A hero banner goes live before the landing page it links to. A nav item points to a page that does not exist yet. * Three ways to add items: from the entry editor (Add to Release), from bulk actions in the entry list, or from the Release detail screen. * Releases target specific environments and locales. Most teams still promote progressively: staging first, then production. ### 9\. Veda use case: new collection launch * Veda is launching the Holiday Collection. The campaign touches 12 entries across 4 content types: homepage hero, 8 Digital Dawn products, a product line update, a navigation header change, and an old campaign page to unpublish. * Without Releases, an editor manually publishes each entry and remembers to unpublish the old banner. The margin for error is significant. * With a Release named "Holiday Collection 2025": editors prepare entries over weeks, adding each to the Release as it reaches approval. The Release manager reviews the complete list. Schedule for November 28 at midnight. All 12 entries deploy atomically. * The customer experience is seamless: one moment the site shows the previous campaign, the next it shows the Holiday Collection. No intermediate state. * Call out the Release API: Releases can be created and managed programmatically, enabling CI/CD integration and automated campaign management. ### 10\. Scheduling: set a release to publish at a future date/time * Open the Release, click Schedule Release, select environment, set date and time, choose locale, confirm. * Once scheduled, the Release enters a locked state. You cannot add or remove items without first unscheduling. * This lock prevents last-minute unreviewed changes from slipping into a coordinated deployment. * Scheduling is timezone-aware. Set the deployment time according to your business needs, not your team's timezone. * Entries must be in a publishable workflow stage before the Release fires. If an entry is stuck in "Review," it may be silently skipped or block the entire deployment. ### 11\. Version comparison, rollback, and previewing future states * Every save creates a new, immutable, complete snapshot of the entry. Not a diff, not a delta. Any version can be loaded independently. * Version comparison: select two versions and see a field-by-field diff. Additions, deletions, modifications highlighted. * Restoring a previous version creates a new version (never overwrites history). Entry at version 10, restore version 7, entry becomes version 11 with version 7's content. Versions 8-10 remain accessible. * Restoring does not republish. The restored content updates the draft. You must explicitly publish to push changes live. * Previewing future states: standard Live Preview shows a single entry's draft. Time travel preview composites all scheduled changes to show the full site state at a target date. * Three approaches to future-state preview: preview all drafts (simplest), date-parameterized preview (more targeted), or Release-scoped preview (most precise but most code). * Overlapping Releases targeting the same entry on the same date have no automatic conflict resolution. The last one to execute wins. ## Screen: What to Show Outline item What to show on screen Opening (outline items 1-2) Start with the Contentstack entry editor showing a page entry. Toggle from the standard form view to Visual Builder view. Let the iframe load and show your actual frontend appearing inside the CMS. Briefly show the browser DevTools Elements panel with  data-cslp  attributes visible on DOM elements, demonstrating the field-to-DOM mapping. data-cslp tagging (outline item 3) Switch to VS Code. Show a component file with  data-cslp  attributes on elements. Highlight the format:  content\_type\_uid.entry\_uid.locale.field\_path . Show  addEditableTags()  usage: the call to  contentstack.Utils.addEditableTags(entry, "page", true)  and the resulting  entry.$?.title  spread syntax in JSX. Show a modular block component with the index in the field path:  components.${index}.hero.title . Implementation walkthrough (outline item 4) Show the Live Preview SDK initialization code with  mode: "builder" . Point out  clientUrlParams.host ,  editButton.exclude , and the conditional loading pattern. Show the  next.config.js  CSP headers allowing  frame-ancestors 'self' https://app.contentstack.com . Editor experience demo (outline item 5) Back in Visual Builder in the browser. Hover over elements to show highlight overlays appearing. Click on a title and edit it inline. Show the change rendering live. Click on an image field and show the file picker. Select a new image and watch it swap. Edit a rich text block inline. This should be the most visually impressive part of the video. Let it breathe. GraphQL setup (outline item 6) Show the GraphQL preview client code in VS Code. Point out the preview endpoint, the  live\_preview  hash header, and the  onEntryChange  callback with  router.refresh() . Show a  data-cslp  attribute next to a GraphQL query with an alias, and explain that the attribute must use the schema field UID, not the alias. Localization (outline item 7) In Visual Builder, switch the locale dropdown in the Contentstack entry editor. Show the preview iframe updating to render locale-specific content. Show the dynamic locale in a  data-cslp  attribute in code:  page.${entry.uid}.${locale}.title . Releases (outline items 8-9) Navigate to Publish Queue > Releases in the Contentstack UI. Create a new Release, name it descriptively. Add entries to the Release from the entry editor and from the Release detail screen. Show both publish and unpublish actions on items. Show the Veda Holiday Collection Release with its item list: product entries, landing page, navigation update, old campaign page marked for unpublish. Scheduling (outline item 10) Click Schedule Release. Set the environment, date/time, and locale. Show the locked state after scheduling. Show the Publish Queue with pending scheduled items. Versioning and future-state preview (outline item 11) Open an entry's version history. Show the version list with numbers, authors, timestamps. Select two versions and show the diff view with field-level changes highlighted. Demonstrate restoring a version: click Restore, show the new version created, point out the version number incremented. Show the publish queue with scheduled Releases and explain the "time travel" concept. If you have a Release-aware preview endpoint, show the composite future state. ## Veda Scenario Thread Veda is launching the Holiday Collection -- a coordinated campaign touching multiple content types. This thread runs through the entire video: 1. **Visual Builder setup:** Show Veda's kickstart-veda marketing homepage in Visual Builder. The page uses modular blocks (hero, list, rich\_text, two\_column). Demonstrate editing the hero title, a product card from a reference field, and rich text content directly in the rendered page. 2. **Tagging complexity:** Veda's list block stores content in a reference field. The page-level edit tag for the reference picker is page...components.{index}.list.reference, while nested product fields use the referenced entry's own content type and UID (product.{uid}.en-us.title). Walk through this distinction live. 3. **Localization:** Veda operates in multiple locales. Show switching from en-us to another locale in Visual Builder and seeing the localized hero text update. Point out the dynamic locale in data-cslp attributes. 4. **Release assembly:** Veda's Holiday Collection Release includes: homepage with Holiday hero (publish), 8 Digital Dawn products (publish), Digital Dawn product line update (publish), header with "Holiday" menu item (publish), and old campaign page (unpublish). Walk through adding items and reviewing the complete list. 5. **Scheduling the launch:** Schedule the Holiday Collection Release for November 28 at midnight. Show the locked state and the publish queue entry. 6. **Version control during prep:** While preparing the campaign, an editor introduces a typo in a product entry. Show the version history, compare the current version to the previous one, restore the correct version, and verify the fix before re-adding to the Release. 7. **Future-state preview:** Preview what the homepage will look like on November 28 after the Release deploys. All campaign content appears together. The old campaign page is gone. Everything is validated before the scheduled date. ## Transitions 1 to 2: "Now that you know what Visual Builder gives editors, let's look at the architecture that makes it possible." 2 to 3: "The key to that architecture is one HTML attribute: data-cslp." 3 to 4: "Knowing the format is one thing -- let's walk through the full implementation, step by step." 4 to 5: "With everything wired up, here is what the editor actually experiences." 5 to 6: "That was the REST setup. If your frontend uses GraphQL, the setup differs in a few important ways." 6 to 7: "GraphQL covered. Now let's handle localization, because hardcoding en-us will break Visual Builder for every other locale." 7 to 8: "Visual Builder handles the editing experience. But when you need multiple entries to go live together, you need Releases." 8 to 9: "Let's make this concrete with Veda's Holiday Collection launch." 9 to 10: "The Release is assembled. Now we schedule it so everything deploys automatically at the right time." 10 to 11: "Before we wrap up, there is one more operational layer: version control and previewing what the site will look like after a scheduled Release deploys." 11 to closing: "That covers Visual Builder, Releases, and future-state preview. In the next video, we move into workflows, branches, and team collaboration -- the governance layer that keeps all of this organized at scale." ## Common Mistakes to Call Out 1. **Missing** **data-cslp** **on modular block children:** Tagging only the modular block container produces a single large clickable region that opens the full block editor instead of field-level editing. Tag each field individually, including the array index in the field path. 2. **Incorrect field paths for nested content:** Using components.0.title instead of components.0.hero.title for a modular block, or seo\_title instead of seo.meta\_title for a group field. Visual Builder fails silently -- no overlay, no error. Always verify paths against the content type schema. 3. **Deploying Visual Builder SDK to production without conditional loading:** The SDK only activates in the iframe context, but including it in the production bundle adds unnecessary JavaScript weight. Conditionally import based on your preview mode flag. 4. **Using GraphQL aliases in** **data-cslp** **values:** If your query uses heroTitle: title, the data-cslp must still reference title, not heroTitle. Visual Builder resolves against the schema, not your query structure. 5. **Hardcoding locale in** **data-cslp** **for multi-locale sites:** Setting en-us when rendering French content causes Visual Builder to open the English field editor. Always derive the locale dynamically from routing context. 6. **Omitting** **frame-ancestors** **CSP directive on the preview host:** Without it, the browser blocks the iframe entirely. Visual Builder shows a blank panel. This is easily missed because the preview site works when accessed directly in a browser tab. 7. **Adding entries to a Release that have not completed workflow review:** If an entry is stuck in a non-publishable workflow stage when the Release fires, it may be silently skipped or block the entire deployment. Verify workflow stages before scheduling. 8. **Forgetting to include referenced assets in a Release:** Entries go live but render with broken images because the assets were not in the Release and were not already published to the target environment. 9. **Assuming restore republishes content:** Restoring a previous version updates the draft only. The live site continues serving the old content until you explicitly publish. Editors often miss this step. 10. **Previewing individual entries and assuming the full page is correct:** A single entry from a Release renders fine, but a navigation change in the same Release conflicts with the layout. Always validate the composite page state using a Release-aware or all-drafts preview. 11. **Not accounting for overlapping scheduled Releases:** Two Releases modify the same entry on the same date. No automatic conflict resolution exists. The last one to execute wins. Review the publish queue for collisions. ## Notes Use this space for recording notes, script drafts, or post-production feedback. #### Key takeaways - Connect **Video Production Plan : Video 9 — Visual Builder, Releases, and Future-State Preview** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ## Supplement for indexing ### Content summary Video Production Plan : Video 9 — Visual Builder, Releases, and Future-State Preview. Video 9 — Visual Builder, Releases, and Future-State Preview Attribute Details Course 4 (Preview, Visual Builder, and Releases), Module 4.1 (lessons 4-5) + Module 4.2 Covers Lessons 4.1.4, 4.1.5, 4.2.1, 4.2.2, 4.2.3 Priority Critical Length 20-30 min Format Screencast (code editor + Visual Builder in action) Status Not started Why This Video Matters This combines one of the most visual platform features with one of the most operationally important publishing topics. Visual Builder is the showstopper demo of the entire certification. Outline 1. What Visual Builder adds on top of Live Preview: click-to-edit, drag-and-drop, in-context component management 2. Architecture: how Visual Builder com ### Retrieval tags - Video - Production - Plan - Visual - Builder - video-production-plan - lesson 24 - Video Production Plan : Video 9 — Visual Builder, Releases, and Future-State Preview - video-production-plan lesson ### Indexing notes Index this lesson as a primary chunk tagged with lesson_id "24" and topics: [Video, Production, Plan, Video, Visual, Builder]. Parent course slug: video-production-plan. Use asset_references URLs as thumbnail hints in search results when present. Never surface LMS quiz content or assessment answers from this file. ### Asset references _No image or video thumbnail URLs were extracted._ ### External links | Label | URL | | --- | --- | | Contentstack Academy home | `https://www.contentstack.com/academy/` | | Training instance setup | `https://www.contentstack.com/academy/training-instance` | | Academy playground (GitHub) | `https://github.com/contentstack/contentstack-academy-playground` | | Contentstack documentation | `https://www.contentstack.com/docs/` |