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.

Where Studio Fits in Your Day-to-Day Flow

Same content system, same website. Studio adds a visual layer where anyone can build and update pages, no engineering release for every change.

Why Studio Exists: in One Picture

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.

• Today: layout is JSX. A SalePage.jsx file hand-writes <main><Hero/><Promo/><Grid/></main>. Reorder, swap, or add a block → git → PR → 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 (mental model).

Pick Your Path: Decision Tree

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 → 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 → 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. 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 labeled 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.

Working Alongside Your Existing Stack

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.

More Paths for Developers

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.

Design-first: full details

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

• Single template / page kind → decompose-design.
• Whole site (3+ page kinds sharing atoms) → decompose-site: 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 end-to-end. 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 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: The three-layer model. Palette wiring for the code phase: Palette conventions.

Already have a working site? Add Studio on top

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.

Enterprise or Quickstart?

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

• Enterprise: bring your own React component library. Explicit 9-step flow from 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.

Do it with a skill

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

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

The installer then asks which editors to wire up.

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, Codex CLI, Gemini CLI, Cursor, Windsurf, Cline, Continue, or any chat LLM (paste-in copies under prompts/).

Bring your own data: data Studio didn’t fetch

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 CSR and 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.

Contents

Found a Discrepancy?

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.