Studio Docs

Contentstack Studio is the visual composition layer on top of your React app + Contentstack. Engineers register components once. Anyone composes them into live pages, no deploy per page.

Click to enlarge

Same content system, same website. Studio adds a visual layer where anyone can build and update pages, no engineering release for every change. For the deeper decomposition, see What is Studio.

Answer three questions:

1. Do you code?

• No: you're either an author or a business reader. Pick one:

  • Author (5 min): Your first edit in 5 minutes. Existing Template, drop a Section, publish. Then the 15-minute seasonal landing page walkthrough to level up.
  • Sales / marketing / buyer: Studio for Business. Speed-to-market, marketing autonomy, positioning vs page builders / headless-CMS-alone / AI tools.
• Yes: go to question 2.

2. Do you have a design in hand? (Figma / screenshot / mockup / description doc)

• Yes: Design-first Quickstart (~30 min). Runs Q1 SDK install as step 0, then hands the design to decompose-design: chained skills build Sections + Template + first render, end-to-end.
• No: go to question 3.

3. Do you want the fastest possible eval, or a full manual build?

• Fastest eval, LLM-driven (~15 min): Quickstart with LLM Skills. One curl install + English prompts to Claude Code / Cursor / Copilot.
• Full manual build (~1 hr): Quickstart 1 in Getting Started. Install SDKs, register components, build Sections + Templates. Five numbered pages, each self-contained.

Already have a working React site? See Add Studio to an existing app below: depends on what's there (hand-coded pages / Visual Editor / existing Content Types).

Content authors: everything below this row is engineering material. If you don't code, jump straight to the author quickstart above. You won't need what follows.

Or use the sidebar on the left, six labelled role sections (Start here / For Content Authors / For Business / For Developers / Reference / LLM Skills), and the search box at the top of the sidebar for instant keyword lookup.

Your CMS turned content into reusable data. Studio extends that shift one layer up: layout moves out of code and onto a visual canvas, where anyone composes your React components into live pages. Same React. Same CMS. No deploy per page.

Click to enlarge

• Today: layout is JSX. A SalePage.jsx file hand-writes <main><Hero/><Promo/><Grid/></main>. Reorder, swap, or add a block, and the change goes through git, then a PR, then a deploy.
• With Studio: layout is composition. Your exact same React components show up as draggable tiles on the Studio canvas. Anyone arranges them, binds real Contentstack content, saves: no engineering, no deploy.
• Outcome: same React, same CMS, same render path. Engineering stays focused on building components. Marketing ships pages at the speed of content.

Full mechanics: What is Studio?, The Studio page (how it works).

Studio installs alongside two companion products you'll wire at the same time:

• Live Preview SDK: pipes content changes from Contentstack into your running site.
• Visual Editor: a separate product that provides inline click-to-edit on any page emitting data-cslp tags. Studio itself has no inline-edit surface (all value edits happen in the right panel), but Studio emits data-cslp tags, so VE-installed apps get inline editing on Studio-rendered pages.

Setup for all three: Setup chapter.

The decision tree at the top of this page routes new developer + author + business readers. Below are the specialist paths for developers who fit a specific existing-state profile.

The Design-first Quickstart covers the fast path. Deeper reference for the underlying flow:

• Single template / page kind: use decompose-design.
• Whole site (3+ page kinds sharing atoms): use decompose-site, which wraps decompose-design, deduplicates components across pages, identifies Global Field candidates, emits one site plan + per-template build sheets in dependency order.

Both drive the whole flow from install to first authored page. No manual canvas clicks. What runs at each phase:

1. Decompose: reads the design(s), emits machine-readable build sheet(s) (atomics + Layer-2 containers + Sections + Content Type + governance dial + unmapped-fields note).
2. Schema phase (multi-page only): offers to provision CTs + Global Fields via provision-studio-stack.
3. Code phase: offers to scaffold + register the components. Chains register-component per new component.

4. Studio-canvas phase: offers to author the Sections + Template automatically:

   • API path (fastest): chains author-composition-via-api. Writes composition JSON straight through the Content Management API (CMA). No canvas, no clicks, no MCP. Requires management token in env.
   • Canvas path: chains build-section + build-connected-template driving Studio's canvas via Playwright MCP. Slower but produces a real canvas trail.
5. Content phase (optional): offers to populate real entries via import-content from a customer-owned source (JSON / CSV / Markdown / existing Contentstack stack).
6. Verify + deploy: chains verify-setup + deploy-studio-site.

Developer's role: provide the design(s), accept the plans at each phase, review the result. Manual canvas clicking is only needed as a last-resort fallback (no creds AND no MCP).

Long-running builds are idempotent + resumable: every skill records its own state file under docs/_<skill>-state/ so a crash midway resumes from the last completed unit. See Agent idempotency for the contract. Schema evolves safely via migrate-ct-schema after the initial build.

Mental-model prerequisite: From designs to Sections. Palette wiring for the code phase: Palette conventions.

You don't need to rebuild. How Studio joins your app depends on what's there today:

• Hand-coded pages: Migrate hand-coded pages. A real per-route migration that replaces hand-coded JSX with Studio compositions. One route per sprint.
• Visual Editor app: Add Studio to a Visual Editor app. Not a migration. Studio layers on top of Visual Editor to expedite page building. VE stays installed and in use forever.
• The per-route conversion (for hand-coded routes, or for VE routes you choose to author through Studio) is automated by the migrate-page-to-studio skill: paste a route filename, get an inventory + a populated Studio template + the JSX swap.

Pick the setup path that matches your situation. Two ways to start covers both:

• Enterprise: bring your own React component library. Explicit 9-step flow: existing components, CT, CLI register, SDK install, Canvas route, catch-all route, Sections, Templates, Deploy. Recipe: enterprise-day-one.
• Quickstart: evaluate Studio with defaults first via Playground Canvas, or the quickstart-with-skills evaluator recipe.

Install all skills once (full listing + override options on the Skills page):

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

Then ask your LLM in plain English: "install studio in this project", "register my Button component", "migrate this page to studio". Works with Claude Code, Cursor, Windsurf, Cline, Continue, or any chat LLM (paste-in copies under prompts/).

When your composition needs data Studio's SDK didn't retrieve (live pricing from a service, feature flags, geo-personalization, weather, session state), you supply it in code and Studio composes against it.

Two surfaces:

• StudioComposition: render a full composition against a context object you supply. No SDK data fetch, no hook. Works in client-side rendering (CSR) and server-side rendering (SSR).
• Slot data: attach data to a slot prop so components an author drops into that slot can bind to it through component_props, with the nearest slot winning.

Start here: Bring Your Own Data (chapter overview). Troubleshooting: BYOD troubleshooting.

If the docs say something different from what you see in Studio, the product is right. Open an issue so we can fix the docs.