Playground Canvas is a built-in Studio canvas for authoring compositions without a canvas-app in your codebase. Studio hosts the iframe and ships the playground with its default components: no <StudioCanvas /> route, no Canvas URL configuration, no SDK install required 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).

Quick start: To begin composing in Playground, create a new Studio project and skip the Canvas URL field. Studio opens directly in Playground mode. When you're ready to connect your own app, set the Canvas URL in Project, Settings, Configuration.

Feature	Playground	Website Canvas (your app)
Drop Studio's built-in components onto the canvas	✅	✅
Drop your own registered components	❌: Studio's playground iframe has no access to your component registry	✅: Studio loads your SDK + components from your app
Build sections and templates	✅	✅
Bind components to real CMS data (entries, references)	✅	✅
Pin entries / pin queries (Freeform)	✅	✅
Save compositions	✅	✅
Deploy	❌: disabled in playground	✅
Preview the composition against a real visitor URL	❌: the playground is the only preview	✅ 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 /> comes from your app. Without an app, there is no place to pass external data, pricing, variants, feature flags, from. You can still bind to CMS entries via the Data Picker, but the external-data hook is not available in Playground.
• 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 typical workflow is "Playground to Website Canvas, then 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