# Create the Canvas scene

## What you will make

Start with a clear frame for the editor: a light toolbar, a roomy workspace,
and a dark status strip. The workbench paints `WORKFLOW MAP`, a workspace
message, and `READY · 100%`. As an exercise, change `WORKFLOW MAP` to a title
of your own and watch that one fixed Canvas region update.

## How it works

`DiagramEditor` is an ordinary synchronous component function. On a render,
Pibbl evaluates the tree and traverses all of its returned primitives in paint
order: the toolbar, its label, the workspace, its copy, then the status strip
and status copy. There is no generated DOM or retained scene graph behind this
first frame.

## Build the change

The snapshot ends by mounting the component with
`pibbl(canvas, <DiagramEditor />)`. [`pibbl`](/reference/functions/pibbl/) returns one
stable controller for that Canvas, which is the object that owns the mounted
scene and later disposes it. The toolbar and workspace are plain
[`Rectangle`](/reference/components/rectangle/) primitives; their labels are
[`Text`](/reference/components/text/) primitives.

## Predict and try

This chapter declares a 960 by 600 logical Canvas. The toolbar occupies y=0
through y=56, the workspace runs to y=568, and the 32-pixel status strip fills
the remainder. Change `WORKFLOW MAP` to your own title, then try changing the
Canvas CSS presentation size. Pibbl can scale the logical viewport, but the
positions in this source still use the same 960 by 600 coordinate system.

## Check your result

Successful output shows all three regions and the `READY · 100%` status copy.
If the Canvas looks scaled in the Studio, that is expected: changing its CSS
size does not change this chapter's fixed logical coordinate system.

## What you learned

`pibbl` schedules the initial paint; mounting does not require a manual render
loop. When the scene is no longer needed, call the controller's `dispose()`.
It is idempotent, so cleanup code may call it more than once without creating a
second teardown. For using this snapshot in an application, see
[Configure JSX](/guides/configure-jsx/).

[Open the interactive workbench](/playground/#/workbench/diagram-editor-canvas-scene)

## Implementation guidance for agents

Read the [Authoring, signals, and lifecycle companion](/agents/topics/lifecycle/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.