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

Studio is a web experience builder designed for enterprise use. It enables developers, marketers, and designers to collaboratively build digital experiences, such as landing pages, campaign microsites, or content-driven apps, using pre-configured components, headless CMS content, and responsive design systems.

With its intuitive visual interface, teams can drag and drop components to build structured layouts. Developers can layer in business logic and integrations where needed, enabling business users to create pages and layouts within defined guardrails, without compromising code quality.

You can create projects, link them to a stack, and build dynamic pages from scratch or with pre-built templates. Features like content type support, real-time data binding, and responsive layouts make it easy to design and launch content-rich pages, without writing code.

Studio supports cross-functional collaboration across roles:

• Marketers can visually build pages and publish campaigns faster without waiting for dev resources.
• Designers can ensure brand consistency through design token support and Figma-based imports.
• Developers can register components, apply custom business logic, and integrate APIs.

Explore the main features that make Studio powerful and flexible.

• Visual canvas for composing layouts
• Integration with Figma and AI-assisted component generation
• CLI-based registration of React components
• Real-time data binding with Contentstack entries
• Design token and responsive design support
• Compatibility with Visual Builder and Live Preview

Studio consists of three tightly integrated components that work together to bridge design, code, and content management.

1. Contentstack Figma Plugin

   Use the Contentstack Figma Plugin to convert design elements into Studio-ready components.

   • Simple UI Components: Paste design elements directly into Studio Canvas.
   • Interactive Components: For complex elements (e.g., carousels), use the plugin with Agentic CLI to auto-generate code with embedded logic and token mappings.

     This ensures designers can hand off functional components without extra dev cycles.

2. Agentic CLI

   The Agentic CLI is a developer tool that converts Figma designs into production-ready components.

   • Automates code generation and component registration
   • Aligns with design tokens and themes
   • Reduces setup time and enforces consistency

   Ideal for scaling component handoffs across large teams.

3. Studio Canvas

   Studio Canvas is the visual workspace where teams collaboratively build and publish pages.

   • Use pre-registered or imported components
   • Edit only developer-exposed sections
   • Bind CMS fields to components
   • Preview and publish changes instantly

   Canvas enforces design system rules, helping non-technical users create safely within brand standards.

Studio bridges design, content, and development workflows. It helps teams:

• Reduce time-to-value from design to live experience
• Reuse design system-driven components across teams
• Scale content delivery while maintaining brand integrity
• Empower business users without compromising code quality

Studio is a key component of Contentstack’s composable Digital Experience Platform. It integrates natively with:

• Contentstack CMS for structured content and personalization
• Visual Builder for in-context editing
• Live Preview for testing changes in real-time

Studio brings structure and speed to collaborative page building. It empowers teams to launch content-driven experiences efficiently, while staying aligned with brand and design standards.