Skip to main content

Customize your first node

Render product-specific Vue content without creating another document schema.

Register a Vue component for an existing JSON Canvas node type.

ts
import type { BoardRendererRegistry } from '@lupinum/vue-board'
import TaskCard from './TaskCard.vue'

const renderers: BoardRendererRegistry = {
  text: TaskCard,
}
vue
<BoardRoot :engine="engine" :renderers="renderers" style="height: 100vh" />

The renderer receives the node and selection state. Store canonical content in direct node fields such as text; do not introduce a nested content mirror.

Renderer laboratory

Presentation can change without creating another node schema.

Try this Switch renderers and compare the card with the canonical record. The stored node does not change.

Relevant code
const renderers: BoardRendererRegistry = {
  text: TaskCard,
}

<BoardRoot :engine="engine" :renderers="renderers" />

Switch the renderer in the lab. The card changes while the record keeps the same ID, type, text, and color.

For a complete renderer contract, editing hooks, slots, and LOD behavior, read Custom node renderers.