Your first board

Create one stable engine and pass it to BoardRoot.

<script setup lang="ts">
import { createBoardEngine } from '@lupinum/board-core'
import { BoardRoot } from '@lupinum/vue-board'
import '@lupinum/vue-board/style.css'

const engine = createBoardEngine({
  grid: { size: 20, snap: true },
})

engine.createNode({
  type: 'text',
  x: 80,
  y: 80,
  width: 260,
  height: 140,
  color: '5',
  text: 'Review onboarding',
})
</script>

<template>
  <BoardRoot :engine="engine" style="height: 100vh" />
</template>

The container needs a real height. BoardRoot cannot infer space from an auto-sized empty parent.

Try dragging, resizing, selecting, panning, and zooming. createNode() selects the new node by default.

What happened

The engine created and selected a JSON Canvas text record. BoardRoot subscribed to the engine and rendered the record with the default renderer. Pointer interactions update the same engine through the framework adapter.

Keep the engine instance stable after mount. Load new contents with engine.loadDocument() instead of replacing the engine prop.