Prerequisites

Studio needs a Contentstack set up the usual way. Collect these from your stack before starting the install. Studio assumes they’re in place and won’t create them for you.

Studio does not ask for your Contentstack account password, browser session, or any account-level API token. Stack setup is something you do manually in the Contentstack UI, once, in about 10 minutes. After that, Studio reads four values from your project’s .env and never asks for credentials again.

Do It With a Skill

analyze-project-fit covers the dev-environment half of this list. It is read-only: it inspects your package.json, framework and React version, then prints the install path your project can actually take, before anything changes state.

curl -fsSL https://studio-documentation.contentstackapps.com/install.sh | sh

The Contentstack half below, the stack, tokens and environment, it cannot gather for you. Collect those first.

From Your Contentstack

Configure these by hand at app.contentstack.com. If you’ve shipped a Contentstack-backed site before you already have most of these.

When the eight rows above are done, you’ll have these four values to paste into your app’s .env later (the install-studio skill prompts for them and writes the file for you):

CONTENTSTACK_API_KEY=blt...                # public — identifies the stack
CONTENTSTACK_DELIVERY_TOKEN=cs...          # secret — reads published content
CONTENTSTACK_PREVIEW_TOKEN=cs...           # secret — reads draft/scheduled content
CONTENTSTACK_ENVIRONMENT=preview

Plus your locale code (e.g. en-us) and your region (defaults to us).

Framework prefix map: same four secrets, different prefix per framework. Because bundlers gate client-side env vars behind a naming convention, the suffix stays CONTENTSTACK_* everywhere. Only the prefix changes:

Framework	Prefix in .env	Accessor in code
Node.js / SSR (server-only)	CONTENTSTACK_*	process.env.CONTENTSTACK_API_KEY
Next.js (client-visible)	NEXT_PUBLIC_CONTENTSTACK_*	process.env.NEXT_PUBLIC_CONTENTSTACK_API_KEY
Vite / React (client-visible)	VITE_CONTENTSTACK_*	import.meta.env.VITE_CONTENTSTACK_API_KEY
Remix (client-visible)	CONTENTSTACK_* in .env, window.ENV.CONTENTSTACK_* on the client (populated via root loader)	window.ENV.CONTENTSTACK_API_KEY
Astro (client-visible)	PUBLIC_CONTENTSTACK_*	import.meta.env.PUBLIC_CONTENTSTACK_API_KEY

Server-only secrets (management tokens, auth tokens, delivery-when-SSR-fetching) never need a client-side prefix: plain CONTENTSTACK_* is safe. Client-visible values (API key + delivery token used from the browser + preview token for Live Preview) need the framework’s public prefix so the bundler will inline them.

Where to find each in the stack

The stack’s left sidebar has dedicated pages for every item in the table above:

Delivery + Preview tokens: in your stack, open Settings, then Tokens:

Click a token in this list to open its edit drawer. The Stack API Key, Delivery Token, and the auto-paired Preview Token are shown there (treat them as secrets: copy them into your project’s .env rather than into committed source).

Environments: in your stack, open Settings, then Environments:

Each environment carries its own base URL per locale. Studio uses this when resolving the canvas URL for sections and the preview URLs for templates:

Required: the environment your Studio project targets must have a non-empty per-locale URL for your locale, and that URL must match the app you actually spin up, same host and port. For local dev this is your dev server’s origin (e.g. http://localhost:3010 if that’s the port your npm run dev binds to). For deployed it’s the live origin. Studio uses it as the canvas/preview Base URL. A mismatched or empty value means a blank canvas with an error that points at the wrong layer. setup-section-preview confirms this before building the canvas route.

Languages: in your stack, open Settings, then Languages. At least one locale must exist:

Live Preview + Visual Editor enable: in your stack, open Settings, then Visual Experience, then General. The Enable Live Preview checkbox plus the Display Setup Status toggle under Visual Editor must both be on for Studio’s canvas iframe to mount inside the Visual Editor pipeline:

Custom Preview URL (recommended): in your stack, open Settings, then Visual Experience, then Preview URL. Per-content-type URL paths. Studio reads these to derive accurate template URL patterns. The Preview URL tab unlocks only after Enable Live Preview is toggled on in the General tab above. Until then it shows a “Custom Preview URL Unavailable” message.

From Your Dev Environment

Browser

Studio’s canvas is a browser app. Any current Chromium browser (Chrome, Edge, Brave, Arc) works. Safari and Firefox work with local HTTPS trusted correctly. Private-window sessions block the third-party cookies Studio’s iframe uses. Use a regular window.

What You Don’t Need (yet)

• A Studio project: we’ll create one in Layer 2
• A canvas route: we’ll add it during install
• Template preview routes: same

Ready?

Install the Delivery SDK

Or, if you’d rather have an LLM walk you through the full install in one go:

curl -fsSL https://studio-documentation.contentstackapps.com/install.sh | sh

Then ask your LLM: “install Studio in this project”. It chains install-studio (the three SDKs plus studioSdk.init), setup-section-preview (the canvas route), setup-template-preview-routes (the catch-all route), configure-studio (environment, language and Canvas URL) and verify-setup.

Creating the stack itself is not one of these: no skill provisions a new Contentstack stack. Do that in Contentstack first, per the rows above, then hand the credentials to install-studio.

Last Resort: Try Studio Without Setting Any of This Up

If you want to see what Studio looks like before committing to setting up a stack, installing the SDKs, or registering components, use the Playground Canvas, a Studio-hosted iframe that lets you compose with Studio’s built-in components against demo data. No app, no canvas URL, no tokens.

This is a try-before-you-buy fallback only. Pages built in the Playground can’t be deployed to your site, can’t use your components, and don’t bind to your content. Once you’re convinced, come back here and do the proper setup. That’s where Studio’s real value (your components, your data, deployable pages) lives.