The Studio Canvas: What You Are Looking At
The canvas is your own app, rendered live in an iframe, with editing chrome around it. Nothing here is a mockup — what you see is your components running against real content.
Four surfaces, and each answers a different question.
| Surface | Answers |
|---|---|
| Create a composition | How do I start a new Template or Section? |
| Layers tab | What is on this page, and how is it nested? |
| Design panel | What does the selected element look like? |
| Component Data tab | What is the selected element bound to? |
Do It With a Skill
drive-studio-canvas-ui covers driving the canvas through browser automation, including the drag sequence that actually commits.
The Split That Matters
Design and Data are the two halves of any element. Design decides appearance and is bounded by what the component’s registration exposes. Data decides which CMS field fills it. An element can look right and be bound to nothing, which renders as a component showing its defaults — the most common “why is this blank” on the canvas.
Layers is how you select the thing you actually mean. Deeply nested components are easier to reach from the tree than by clicking through the render.
If the Canvas is Blank
That is almost never a canvas problem. It is the Canvas URL, the environment’s Base URL, or a missing /canvas route — see Troubleshoot.