Playground Canvas: try Studio without setting up an app

Playground Canvas is a built-in Studio canvas that lets you author compositions without setting up a canvas-app in your own codebase. Studio hosts the iframe. The playground ships with Studio's default components. No <StudioCanvas /> route, no Canvas URL configuration, no SDK install in your app.

It's the fastest way to try Studio, build a demo, or sketch a composition before investing in the full integration. Once you're ready to ship to production, you graduate to a regular Canvas URL pointing at your own app.

You're on Playground Canvas whenever your project has no Canvas URL configured. Studio checks:

You don't pick Playground explicitly: it's the default until you set a Canvas URL on the project (Configure environment + language + canvas URL).

Feature	Playground	Website Canvas (your app)
Drop Studio's built-in components onto the canvas	Yes	Yes
Drop your own registered components	No: Studio's playground iframe has no access to your component registry	Yes: Studio loads your SDK + components from your app
Build sections and templates	Yes	Yes
Bind components to real CMS data (entries, references)	Yes	Yes
Save compositions	Yes	Yes
Deploy	No: disabled in playground	Yes
Preview the composition against a real visitor URL	No: the playground is the only preview	Yes, via your template preview routes

The deploy button is greyed out in playground mode with a tooltip:

"Deployment is disabled in the playground. Set up an app and configure the base URL in the settings to enable deployment."

• Onboarding: try Studio in 60 seconds before convincing your team to wire up the SDK
• Sketching: block out a section's layout while engineering is still building the components
• Demos & POCs: share a composition without a deployment story
• Internal training: content authors learn the UI without needing a live app
• Evaluation: see whether Studio's authoring model fits your workflow before integrating

Authors who started in Playground keep their compositions when the project is later wired to a Website Canvas: the data model is the same.

• Studio's default components only. Your design system isn't in scope until you set up a Website Canvas. The cards, heroes, and buttons you see are Studio's defaults, useful for shape, but they won't match your brand.
• No external Component Default Data. The data prop on <StudioComponent /> is set by your app. Without an app, there's no place to pass external pricing / variants / feature flags from. You can still bind to CMS entries via the Data Picker, but there's no external-data hook yet.
• No deploy. Whatever you build sits in your Studio project. Visitors can't see it until you set up a Website Canvas + template preview routes (Wire template preview routes).
• Internal-only preview URL. The PLAYGROUND_HOST_URL is Studio-internal: you don't need to know or set it. Studio uses its own.

When you're ready to ship to your real site:

1. Build your app's canvas route mounting <StudioCanvas />
2. Wire your template preview routes with <StudioComponent specOptions={...} />
3. Set the Canvas URL on your Studio project (Configure environment + language + canvas URL), the route path only, e.g. /canvas. The origin comes from the targeted environment's per-locale Base URL (your dev origin locally, your production origin in prod), not this field.
4. Register your components in your canvas-app so they appear in Studio's palette
5. The compositions you built in Playground still exist. They just now render against your components and your design tokens

The transition is one-way: once the Canvas URL is set, Studio uses it for all canvas previews on this project. You can clear the Canvas URL to drop back into Playground mode, but the typical workflow is to start in Playground, move to Website Canvas, and stay there.

Pitfall	Symptom	Fix
Expecting your custom components in Playground	Palette shows only Studio's defaults	Set the Canvas URL to point at your app, then your registered components show up
Trying to deploy from Playground	Deploy button greyed out + tooltip about base URL	Set a Canvas URL on the project. Deploy becomes available
Building a composition in Playground, then setting Canvas URL, components disappear	Your custom components were never in Playground. The dropped Studio-default components don't auto-swap	Re-author the canvas tree against your registered components, or set the Canvas URL first, then author
Confusion between Playground (Studio-hosted) and your canvas-app (<StudioCanvas /> route)	Authors don't know which iframe they're looking at	Studio's loading message reads "Using playground environment" when on Playground. The canvas top bar surfaces a "Configuration" gear that lets you check + set the Canvas URL

Step	Where you are	What's running
Created a new Studio project, no Canvas URL set	Playground Canvas	Studio's hosted iframe + Studio's defaults
Set a Canvas URL pointing at localhost during dev	Website Canvas (dev)	Your canvas-app at localhost:<port>/canvas
Set a production Canvas URL	Website Canvas (prod)	Your production canvas route

The Canvas URL is the single switch.

• Create a Studio project: making the project that defaults to Playground
• Configure environment + language + canvas URL: the Canvas URL field is the one that graduates you out of Playground
• Add the section preview route: what you build in your app to host the Canvas URL
• Wire template preview routes: the visitor-side rendering after Playground
• Bring your own components: once on Website Canvas, your components show up here