Set Up Studio for Your Project

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 Contentstack’s unified environment for designing, structuring, and managing composable digital experiences.

This guide demonstrates how to apply the foundational concepts from Get Started with Studio to set up your own project, including environment configuration, component registration, Figma sync, and workspace setup.

Before configuring your Studio project, verify that your environment is ready. This ensures you have the required access, integrations, and tools for a smooth setup.

• You have Admin or Developer access in Contentstack.
• The Studio feature is enabled for your stack.
• You have access to the Figma Plugin for component synchronization.
• The Contentstack CLI is installed (v2.0 or later).
• If you’re new to Studio, review Get Started with Studio for installation and environment preparation details.

The setup process includes creating a project, defining your environment, registering components and tokens, creating compositions, and deciding how you’ll use them, either within the Playground Canvas or in a connected front-end.

A Studio project links your stack to a structured workspace where compositions, components, and tokens live.

To access and create with Studio, log in to your Contentstack account and perform the following steps:

1. Select Studio from the “App Switcher”.
2. If you are accessing Studio for the first time, click New Project.
3. Enter a Project Name and Description.
4. 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.

Tip: Use a project name that reflects the initiative or site (e.g., “Marketing Site 2025” or “Customer Portal”).

Before building compositions, configure key settings that connect Studio to your environment and define how your pages preview and render.

Project Settings define how Studio connects to your Contentstack stack and rendering environment. Proper configuration ensures accurate previews, environment consistency, and correct localization when building or testing compositions.

1. In your Studio project, open the Settings tab.
2. Under Environment Settings, configure:
   1. Base URL: The front-end preview URL that Studio uses to render compositions.
   2. Default Environment: Select the environment (for example, development, staging, or production) where your compositions should preview content.
   3. Default Locale: Choose the primary locale for your stack to ensure accurate language rendering.
   4. (Optional) Add fallback environments if your setup supports multiple publishing targets.
   5. Define Access Controls to specify which users can view, edit, or publish compositions in the project.

Tip: Always ensure the Base URL and Environment settings match your active front-end deployment context to prevent preview mismatches or rendering errors.

Registered components form the reusable building blocks of your project. Each component can represent a UI section (such as a Hero Banner or Product Card) or a logical unit connected to CMS data.

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

1. Open your Studio project and go to the Components section.
2. Click Register Component.
3. Enter a Component Name, select its Type, and provide metadata (e.g., category or token group).
4. Click Save.

Use the CLI to streamline registration and maintain consistency across multiple projects.

csdx studio:register:component

After registration, use the CLI sync command to ensure components are registered across Studio environments.

csdx studio:sync

Additional Resource: Learn more in our Register Component section in the Work with the Studio CLI documentation.

Note: When you export from Figma, it retains context of your components because they’ve been registered and synced with Studio.

Tokens define design rules that maintain consistency across pages, such as color palettes, typography, and spacing. These tokens can be imported from Figma or added manually.

1. In Studio, go to the Tokens section.
2. Click Register Token.
3. Enter the Token Name, choose a Category (e.g., color, spacing, typography), and assign a Value.
4. Click Save.

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

Tip: Keep token naming consistent with your organization’s design system (e.g., primary-color, font-heading-xl).

To register tokens via the CLI:

csdx studio:register:token

Compositions are structured layouts for pages. Create one template per repeated content type or use one-off pages for standalone campaigns.

1. Open the Compositions tab and click New Composition.
2. Choose Linked (multiple entries share one template) or Freeform (one-off page).

   Additional Resource: Learn more about the types of compositions through our documentation.

   1. Enter a Name and review the auto-generated UID (you can edit it).
   2. Click Create to open it in Canvas.

Tip: If you plan to bind content immediately, ensure your content types and entries exist in the selected environment.

Decide whether you want to use the composition only inside Playground Canvas (no code) or connect it to a front-end for real previews and publishing.

Use in Playground Canvas (no front-end)

Best for quick prototyping and visual validation.

1. In Canvas, drag components into your layout.
2. Bind fields from your stack in Page Data (Link Entry).
3. Adjust styles in Design using tokens/props.
4. Click Preview to validate layout and bindings.
5. Save your composition. (No live URL; usage stays within Studio.)

Use in a Connected Front-end (actual use)

Best for real previews, routes, and production publishing.

1. Ensure your front-end project is prepared (see next section).
2. Locate the composition’s UID in Studio.
3. Add a route in your front-end that renders the composition by UID.
4. Start your preview server and confirm the Base URL matches in Project Settings.
5. Click Preview in Studio to load the page from your front-end runtime.
6. Commit and deploy via your normal CI/CD for production.

A connected front-end converts compositions into real pages with a route, live preview, and deployability.

1. Install Studio SDK in your front-end project.
2. Expose a route that renders a composition by UID (e.g., /about, /blog/:slug).
3. Read environment/locale from your app config to match Studio defaults.
4. Run preview locally/remote so Studio can load pages at the configured Base URL.
5. Deploy through your standard pipeline when ready.

For foundational concepts and examples, see Get Started with Studio (Create a Composition, Use the Composition UID in Code, and Preview and Deploy).

Tip: Ensure your front-end preview URL matches the Base URL in Project Settings; otherwise, the Studio preview will not load correctly.

Connect components to your entries and validate rendering before handing pages to editors.

1. In Canvas, select a component and open Page Data.
2. Link Entry from the target content type; map fields as needed.
3. Click Preview to validate real content in the composition.
4. Adjust component props or tokens in Design for consistency.
5. Save your changes.

Need granular authoring control? See Expose Editable Page Sections to mark safe, editable areas.

Workspaces segment collaboration (e.g., Design, Content QA, Release Review) without mixing environments.

1. Open Workspaces and click Add Workspace.
2. Name and define its Purpose (e.g., Content QA).
3. Associate the Environment and access scope.
4. Save and invite the right contributors.

Tip: Maintain separate workspaces for design, content, and QA teams to promote structured collaboration and reduce cross-environment conflicts.

Validate the experience end-to-end—first in Canvas, then in your connected front-end.

• In Canvas, confirm layout, bindings, and section editability.
• If connected, open Preview and confirm the route renders via your Base URL.
• Validate environment/locale outputs match expectations.
• Save the composition; deploy your site through your standard pipeline.

This side-by-side view clarifies when to use each mode.

• Playground Canvas:
  • Drag/drop → bind entry → preview in Studio → save.
  • No live URL, ideal for prototyping and early content design.
• Connected Front-end:
  • Route renders composition by UID → Studio preview opens your live runtime → deploy via CI/CD.
  • Required for production pages and stakeholder reviews on real URLs.

Both modes allow you to build, test, and iterate, but connecting a front-end unlocks full publishing, real routing, and stakeholder previews.

The following example demonstrates how a team can structure a complete Studio setup. It shows how compositions, components, and tokens come together to create a unified design and development environment ready for synchronized workflows.

A team sets up Studio for a new digital experience project. The project includes multiple compositions, such as Login Page and Dashboard Layout.

Custom components are registered, tokens define consistent color and typography, and workspaces are divided into Design, Development, and Testing to streamline collaboration.

When exported from Figma, the layout retains component structure and styling because Studio and Figma remain in sync.

Setting up Studio for your project establishes the foundation for a unified design and development workflow. By linking components, compositions, and tokens, you create a single source of truth that enables consistency, efficiency, and real-time collaboration across teams.

Additional Resource: To continue building with Studio, visit the Expose Editable Page Sections guide for next steps and best practices on optimizing your composable project setup.