Pick the path that matches your situation.

You already have a React component library (Storybook, design system package, Pattern Lab, etc.) and you want authors composing against your components, not Studio's defaults.

The order:

1. Set up Studio: install the SDKs, configure your stack, create a project.
2. Register your components: your Button, Card, Hero appear in Studio's palette.
3. Start authoring: build templates and sections using your registered components.

Skipping step 2 means rebuilding components you've already designed. Use Studio's defaults to validate your approach, not for shipping.

Recipe: enterprise-day-one walks the full flow end to end.

You're evaluating Studio, building a demo, or running a proof of concept.

Glossary: A canvas-app is your own React application that hosts the Studio SDK. The Playground Canvas is a Studio-hosted iframe for authoring without a canvas-app configured. The Website Canvas is the canvas-app you own and deploy, used once you move beyond evaluation.

1. Set up Studio: create a project; no canvas-app required yet.
2. Playground Canvas: author compositions directly against Studio's hosted iframe with no Canvas URL configured. Studio's default components are the palette. You cannot deploy from Playground, but you can author and test (authoring, binding to CMS data, and saving all work).
3. First page in 5 minutes: when you're ready, wire a canvas-app and template preview route to see a real page render.

You can graduate to the enterprise path anytime, registering your components doesn't remove Studio's defaults; both coexist in the palette. Compositions you build in Playground keep working once you switch to a Website Canvas (your own app).

Every page has an audience tag at the top:

• both: works for either path
• author: content-authoring focused
• developer: code-focused

Use the audience tag (or just the table of contents) to find the right page for what you're doing.

• Set up Studio
• Bring your own components