Live Preview and Visual Editing with Studio

Note: Studio is currently available as part of an Early Access Program and may not be accessible to all users. For more information or to request access, contact our support team.

Composable 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.

Tool Comparison

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

Workflow Integration

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

1. Create Structure in Composable Studio

   Use Composable 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

   Composable 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.

Using Live Preview

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.

Using Visual Builder

Visual Builder enables inline editing of content fields directly in the context of the rendered page. When integrated with Composable 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 Composable Studio.

Key Benefits of Integration

This section summarizes the major advantages of using Composable 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.

Best Practices

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 Composable 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.