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.

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 / server-side rendering (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.

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

Click to enlarge

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

Click to enlarge

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:

Click to enlarge

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:

Click to enlarge

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:

Click to enlarge

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:

Click to enlarge

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.

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.

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

Install the Delivery SDK

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

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

Then ask your LLM: "create a Contentstack and install Studio in this project". It invokes create-contentstack-stack, then install-studio, then configure-studio, and finally verify-setup.

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.