Setup Overview

Last updated July 17, 2026

Studio install is two layers:

Click to enlarge

Prerequisites lists what you need from your Contentstack stack before starting (Stack API Key, Delivery Token, Preview Token, Environment, Language, Visual Editor enabled). Those are stack-side setup, covered in Contentstack's own docs.

Reading Order

Step	What you'll do
Prerequisites	Checklist of what you need from your Contentstack stack
Layer 1: Your app
→ Install the Delivery SDK	Read published content from Contentstack's CDN
→ Install Live Preview	Set up real-time updates for draft content
→ Install the Studio SDK	Install, initialize, register components, fetch compositions, and mount the canvas
→ CSR vs SSR	Pick a render strategy; covers SSR / SSG / RSC patterns + the searchQuery requirement
Layer 2: Studio project
→ Create a Studio project	Link it to your stack
→ Configure environment + language + canvas URL	Project Settings
→ Add the section preview route	<StudioCanvas /> mount
→ Wire template preview routes	ONE catch-all <StudioComponent /> mount (handles every URL)
Final
→ Verify end to end	Layered smoke test
→ Troubleshoot	When something doesn't work

Automated Setup with an LLM

npx @contentstack/studio-skills install

Then ask your LLM "install Studio in this project". It will detect your framework, install the three SDKs, ask for your stack credentials, and wire everything up. Works in Claude Code, Cursor, Copilot Chat, and any general-purpose LLM.

Time to First Canvas

Plan on ~15 minutes total if you already have a stack: - ~10 minutes for Layer 1 (installing + wiring the SDKs) - ~5 minutes for Layer 2 (creating the Studio project, configuring it)

The LLM path is closer to 5.