Live Preview and Visual Editing with Studio

Note: Studio is currently part of an Early Access Program and may not be available to all users. Contact the Contentstack support team; they will coordinate with the appropriate stakeholders to review eligibility.

Studio integrates seamlessly with Contentstack’s Live Preview and Visual Builder, enabling teams to design layouts and edit content in real time. This guide explains how the tools work together, when to use each, and how to get the most from the integration.

The primary purpose of each tool is to better align your workflow across layout, editing, and preview.

This section outlines the typical workflow when using Studio alongside Live Preview and Visual Builder.

1. Create Structure in Studio

   Use Studio to:

   • Add or import components
   • Define layout and styling
   • Bind fields to CMS entries
   • Configure page metadata and slugs
2. Link to Contentstack Entry

   When a composition is connected to a content type, it inherits the entry fields needed for binding content. This enables:

   • Live Preview of content from linked entries
   • Inline editing in Visual Builder
3. Enable Live Edit Tags

   Studio automatically wraps supported components with Live Edit Tags, which:

   • Allow content managers to click and edit content directly in the UI
   • Power in-context editing in Visual Builder

   Tip: All default and Figma-generated components support live editing by default. Custom components must follow specific guidelines for live-edit compatibility.

Live Preview renders your page with real data and updates in real time as you edit the linked entry.

• Works for both default and custom compositions
• Auto-refreshes on save
• Uses the slug defined in Page Data

Example:

If you’ve linked your “Product Page” composition to the products content type and selected an entry with slug smartwatch-pro, the URL will be /smartwatch-pro.

Visual Builder enables inline editing of content fields directly in the context of the rendered page. When integrated with Studio:

• You can update text, images, and links on live-editable components.
• You can switch between different entry variants (e.g., languages, segments).
• You get full visibility into which content field maps to which component.

Note: You can’t modify the layout or design from Visual Builder—that must be done in Studio.

This section summarizes the major advantages of using Studio, Live Preview, and Visual Builder together.

• Streamlined workflow: Layout and content live in harmony.
• Empowered business users: Update content without dev involvement.
• Design system consistency: Components maintain structure and style while content is swapped dynamically.
• Faster time to publish: Visual feedback and in-context editing reduce iteration cycles.

Follow these best practices to get the most out of your integrated workflow.

• Test your compositions in Live Preview before deploying.
• Ensure field names and labels in the CMS match their purpose in the UI.
• For campaigns or personalized pages, use Visual Builder to manage variants and localization.

By combining Studio’s layout capabilities with the real-time editing power of Live Preview and Visual Builder, you create a flexible yet consistent content workflow. Developers retain full control over structure and design, while content managers can manage updates independently, all in a visually intuitive environment. This integrated approach reduces delays, improves collaboration, and helps you publish faster with confidence.