Contentstack
search
Changelog

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 Front-End Integration (Optional for Playground Use)

    Connecting Studio to your front-end enables live previews and deployment.

    1. Install the Studio SDK and any required dependencies in your front-end codebase (CSR or SSR).
    2. Add the generated Composition UID (covered later) to the appropriate route or page in your front-end code.
    3. Ensure Studio has access to the correct environment and locale via the Project Settings tab.

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

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

  3. Configure Project Settings (Optional for Playground Use)

    Project Settings control how Studio interacts with environments, locales, and live preview URLs. Proper configuration ensures that pages render accurately in your connected front-end.

    1. Navigate to the Project Settings tab.
    2. Set up the following:
      1. Base URL: The URL used for live preview from your front-end project.
      2. Default Environment and Locales: Defines where your content will render.
    3. (Optional) Configure fallback environments if your setup requires cross-environment support.

    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 Figma Plugin to bring in design tokens and create guardrails for layout styling.

    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 render multiple entries from a Content Type.

        Select the Content Type and specify a URL Slug (e.g., /blog/:slug).

      2. Freeform Composition: Ideal for standalone or one-off pages (e.g., landing pages using singleton Content Types).

        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 acts as a reference point that connects Studio compositions to your front-end code. This enables real-time previewing and publishing from Studio.

    1. Locate the Composition UID in your project details.
    2. Insert the UID into your front-end routing configuration.

    This allows real-time previewing and publishing from Studio into your live project.

    Note: This step is optional and only needed if you have access to a front-end codebase. If not, you can continue building and previewing compositions within the Studio playground.

  7. Build the Page in Canvas

    The Canvas is Studio’s drag-and-drop interface for visually composing your layout. It allows you to design pages without writing code while maintaining alignment with content and design tokens.

    Use the Canvas to visually compose your layout:

    • Drag and drop pre-registered or default components
    • Bind CMS fields in the Page Data tab
    • Apply styles in the Design tab using:
      1. Design tokens (colors, typography, spacing)
      2. Component props

      Tip: To bind content, go to Page Data, click Link Entry, and choose an entry from the linked Content Type.

  8. Preview and Deploy

    Previewing allows you to test your compositions before pushing them live. You can validate layout, binding, and styling directly in Studio before deployment.

    1. Click Preview in the Canvas toolbar.
    2. Review your layout and ensure components render correctly.
    3. Studio does not publish to a live URL by default. For deployment, you must:
      1. Ensure Studio is integrated in your front-end project
      2. Register necessary components and tokens
      3. Deploy your site using your existing hosting pipeline

      Note: Studio supports both client-side and server-side rendering 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 with greater consistency.

More articles in "Work with Studio"