# Build an editor: a canvas in a dock

> Plainkit 0.28.0. Generated by scripts/build-skills.mjs from pk-canvas and pk-dock. Do not edit: change the source and run the generator.

An editor is a `pk-dock` with a toolbox panel, a centre panel holding a `pk-canvas`, and a properties panel (`plainkit.canvas` and `plainkit.dock` packages). The host owns the model; the canvas only reports geometry and never writes to your items.

```html
<pk-dock label="Editor" fill>
  <div slot="tools" data-heading="Toolbox" data-group="left">...</div>
  <div slot="canvas" data-heading="Canvas" data-group="center">
    <pk-canvas label="Drawing" selectable auto-grid snap="grid edges">
      <div dir="ltr"><svg width="400" height="200"><rect data-id="a" x="20" y="40" width="60" height="40" tabindex="0" role="button" aria-label="Shape a"/></svg></div>
    </pk-canvas>
  </div>
  <div slot="props" data-heading="Properties" data-group="right">...</div>
</pk-dock>
```

- Selection: an item is a child with `data-id` and a world rect (`data-x`, `data-y`, `data-w`, `data-h`, or an SVG child's own x, y, width, height). `selectable` turns it on, `selection` is the array of ids you own, `readonly` shows without moving.
- Events: `pk-canvas-select` (ids), `pk-canvas-move` ({ moves, done }) and `pk-canvas-resize` ({ id, x, y, w, h, done }) are cancelable asks: write the new numbers back to your model and items, or call preventDefault to refuse. `pk-canvas-key` carries Delete and Escape; `pk-view-change` the pan and zoom.
- Snapping: `snap` lists grid, guides, edges, centres; `guides` is an array of { axis, at }; `targets` is a JS-only array of extra { x, y, w, h } boxes (for example the bounds of items outside the canvas).
- Keyboard: arrows move the selection, Ctrl or Cmd with an arrow resizes the one selected item, Shift makes the step ten.
- Undo: keep your own history of the model (`js/history.js`); a drag sends done false while it runs and done true once, so record only done true.