Skip to main content

Planning board

A practical planning surface with notes, grouping, and zoom-to-fit.

What happens

This planning surface uses a seeded document, direct engine commands, grouping, and the default interaction model. The application can add domain renderers later without replacing its board document.

The code

app.vue
app.vue
const engine = createBoardEngine({
  grid: { size: 20, majorEvery: 5, snap: true, pattern: 'line' },
})

engine.loadDocument(document, { mode: 'replace' })
toolbar.ts
engine.createNode({ type: 'text', text: 'New note' })
engine.zoomToFit(72, false)

Try these things

  • Click Add note and drag the new node around. It snaps to the grid.
  • Hold Shift and click two nodes, then click Group selection.
  • Double-click a node to edit its text. Press Escape to cancel.
  • Spread nodes apart, then click Zoom to fit to recenter.