Studio Overview

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 is a visual web experience builder that streamlines frontend development. It offers a component-based interface that bridges design, development, and content, enabling teams to launch scalable digital experiences efficiently.

Core Concepts

Studio introduces key building blocks for structured and visual page creation:

• Project: A logical container linked one-to-one with a stack. It houses all compositions within that stack.
• Composition Type: A content type in the linked stack that stores composition metadata, such as layout JSON, title, and component references. You can start with a freeform composition and link it to a content type later.
• Composition: The primary unit in Studio. It represents a full page, reusable section, or UI component. Stored as a structured JSON tree, it includes:
  • Layout structure
  • Component references
  • Data bindings
  • Design configurations
• Symbol: A reusable component derived from a composition. All symbol instances reflect updates made to the source.
• Template: A copy-based variation of a composition. Changes affect only the specific instance.
• Code Component: A React component registered within your project to handle business logic or complex UI. These function as foundational building blocks.
  • Default Components: Prebuilt layout and content elements such as containers, text blocks, and images. These appear in the left panel by default.
  • Registered Components: User-defined code components that, once registered, also appear in the left panel under categorized sections.

Visual Composition Workflow

Studio enables drag-and-drop page building with modular components.

Design-to-Code Workflow

Connect design and development with enhanced automation:

• Import design layers using the Figma plugin
• Use AI to scaffold layout structures
• Register production-ready components using the CLI

This workflow supports rapid iteration for business users and full control for developers.

CMS Data Binding

Each composition can be linked to a Contentstack content type. Bind component fields (props) to entry fields to:

• Dynamically render content
• Centrally manage content from Visual Builder
• Enable personalization and localization

Design System Integration

Maintain brand consistency and scale design decisions using tokens for:

• Color
• Typography
• Spacing
• Breakpoints

Live Editing Compatibility

Studio compositions integrate seamlessly with Contentstack’s visual experience tools:

• Live Preview: View content updates in real time.
• Visual Builder: Edit content directly within the rendered UI.

All default and AI-generated components are automatically wrapped in live-edit tags.

Studio combines visual workflows, reusable component models, design-token support, and deep CMS integration. It empowers teams to create consistent, scalable digital experiences, faster.