Create a 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.

Every experience in Studio begins with a project. A project is a scoped workspace that acts as a container for one or more compositions; these can be full web pages, page sections, or reusable blocks.

Projects also establish a connection between your design work and a specific Contentstack stack and content type, enabling seamless integration with your CMS data.

Projects help you:

• Connect to a specific Contentstack stack.
• Define where and how compositions are stored.
• Organize compositions by site, campaign, or functionality.
• Control layout behavior, data bindings, and design inheritance.

To create a project, log in to your Contentstack account and perform the following steps:

1. Open Studio and click the + New Project button.
2. In the New Studio Project modal:
   1. Enter a Name for your project.
   2. Optionally, add a Description.
   3. Select your Contentstack Stack to link with the project.

      Note: Ensure the selected stack has Live Preview enabled.

   4. Optionally, you can expand Advanced Settings to specify the Content Type Name and UID to create a new content type for storing compositions.

      Note: If not configured, the Studio stores composition details in Contentstack under the compositions content type in the main branch by default. You can customize this setting in the Advanced Settings.

3. Click Create.

Now that your project is set up, you can start creating compositions. These represent individual pages, sections, or reusable blocks that make up your digital experience.

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.

Follow these best practices to keep your projects organized, scalable, and easy for teams to manage:

• Create separate projects for different sites or campaigns.
• Use clear, descriptive names to indicate the project’s purpose.
• Reuse the same content type across projects if you want shared layout storage.

Tip: If you plan to reuse components or layouts across projects, define a common content type during project setup.