Studio Overview

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.

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.

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.

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

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.

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

Maintain brand consistency and scale design decisions using tokens for:

• Color
• Typography
• Spacing
• Breakpoints

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.