Get Started 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.

Contentstack Studio is a visual experience builder that enables developers and content teams to collaboratively create dynamic, responsive web pages.

This guide walks you through setting up Studio, including project configuration, component registration, and composition creation. Whether you're a developer integrating code or a content editor designing page layouts, this guide helps you get started confidently.

Prerequisites

Before starting, ensure your environment and permissions are correctly configured. This section lists what you’ll need to access, configure, and use Studio effectively.

• A Stack where your content and compositions will reside
• Roles and permissions with read/write access to entries and environments
• A front-end project (CSR or SSR) with Studio SDK installed (for live preview and deployment)

Follow these steps to get started with Studio for your project:

1. Create a Studio Project

   Setting up a new project is the first step toward building with Studio. Each project connects to a stack and serves as the workspace where compositions and pages are created.

   1. Log in to your Contentstack account
   2. Select Studio from the “App Switcher”.
   3. If you are accessing Studio for the first time, click New Project.
   4. In the Create New Studio Project modal:
      1. Enter a Name for your project.
      2. Optionally, add a Description.
      3. Select the Contentstack stack you want to link.

      By default, Studio stores compositions in a content type named compositions.

      Note: You don’t need to change this setting. However, if your stack already has a content type named “compositions”, you can expand Advanced Settings to specify a different content type name and UID for storing compositions.

   5. Click Create.

2. Set Up Studio SDK in the Front-End (Optional for Playground Use)

   By default, Studio provides a built-in playground where you can create and experiment with compositions. To deploy your pages or view live previews, you must first set up a front-end project and connect it to your Studio environment.

   Note: This step is optional if you plan to use Studio as a standalone playground for testing.

   1. Install the Studio SDK and any required dependencies in your front-end codebase (CSR or SSR).
   2. Ensure Studio has access to the correct environment and locale via the Project Settings tab.

      Tip: If you don’t have front-end access, you can still use Studio to build and preview compositions directly within the playground Canvas.

3. Configure Project Settings (Optional for Playground Use)

   Studio requires the base URL of the website you want to integrate with. You can select the base URL by choosing the corresponding environment and language from your CMS settings. Proper configuration ensures that compositions render accurately in your connected front-end.

   1. In your Studio project, open the Settings tab.
   2. Under Configurations, select the Environment and Language.

      Note: You must configure the environment, base URL, and language in your stack settings.

   3. The Base URL configured against the selected environment is displayed.
   4. Click Save.

      Note: This step can be skipped if you are using Studio as a playground. However, real projects with front-end integration require this configuration for proper rendering and deployment.

4. Register Components and Set Up Design Tokens (Optional)

   Components and tokens form the foundation of your design system within Studio. Registering them ensures your visual and interactive elements stay consistent across pages.

   To use your own components and design tokens:

   • Register components via CLI: Add your own React components using the Agentic CLI.
   • Import designs and tokens: Use the Agentic CLI to create and register design tokens directly from your project.

     Tip: You can skip this step for prototyping with built-in components in Canvas.

   When to Use:

   • Business users: Use built-in components for layout and styling.
   • Developers: Register reusable components and tokens for production-grade projects.

5. Create a Composition

   Compositions define page layouts in Studio. You can create Linked Compositions for dynamic templates or Freeform Compositions for standalone pages.

   1. Click New Composition to create your composition.
   2. In the modal, select the type of composition: Linked or Freeform.
   3. Select the Composition Type:
      1. Linked Composition: Best for dynamic templates that reuse the same layout.

         Select the Content Type and specify a /blog/* URL Slug.

      2. Freeform Composition: Ideal for standalone pages or specific sections.

         Provide a custom URL Path (e.g., /marketing/launch).

   4. Enter the Name of your composition.
   5. The UID auto-generates based on the name. You can customize it.
   6. Click Create.

      Note: You can convert a freeform composition to a linked composition later if needed.

6. Use the Composition UID in Code (Optional for Playground Use)

   The Composition UID connects Studio compositions to your front-end code via the StudioComponent React component.

   1. Open the file that handles the composition’s URL path.
   2. Copy the Composition UID from the listing page.
   3. Use the UID to render the composition based on your CSR or SSR setup.

      Note: This step is optional unless you have front-end access.

7. Design the Composition in Canvas

   The Canvas is a visual drag-and-drop interface for building layouts without writing code.

   • Drag and drop components from the left panel.
   • Bind content: Use the Page Data tab and link a CMS entry. Then go to Settings to bind fields.
   • Apply design styles: Use the Design tab:
     1. Design tokens like color, spacing, typography
     2. Component props for variations

8. Preview and Deploy (Optional for Playground Use)

   Preview lets you test compositions before going live.

   1. Preview pages in the Canvas to verify layout and content.
   2. Studio does not deploy by default. For live deployment:
      1. Ensure Studio is integrated into your front-end project.
      2. Use your hosting pipeline to deploy.

      Note: Studio supports CSR and SSR frameworks.

Studio simplifies web page creation with reusable components, live content binding, and visual design tools. Once integrated with your front-end, your team can collaboratively build, preview, and publish responsive digital experiences faster and more consistently.