The OpenDraw component

Every prop, event and slot of <OpenDraw>, the Vue and Nuxt whiteboard component: theme, UI level, grid, autosave key, change and ready events.

<OpenDraw>

The full editor: canvas, toolbar, properties panel, main menu, context menu, zoom, help and welcome screen.

Props

Prop	Type	Default	Description
`theme`	`'light' \| 'dark' \| 'system'`	`'system'`	Starting theme. A persisted theme wins over it; the editor owns the theme afterwards.
`ui`	`'full' \| 'minimal' \| 'none'`	`'full'`	full: every island. minimal: toolbar and zoom only. none: a bare canvas for your own UI.
`grid`	`boolean \| number`	`false`	Show the grid; a number sets its size in px (true is 20).
`initialElements`	`OpenDrawElement[]`	`[]`	Elements to start with when nothing is persisted.
`persist`	`boolean \| string`	`true`	Save to localStorage. A string is the storage key; false disables it. Changing the key while mounted opens the scene saved under it.
`menuLinks`	`{ label, href?, onSelect?, icon? }[]`	`[]`	Your own links or actions in the main menu (docs, repository, …).

Events

Event	Payload	When
`@change`	`{ elements, appState }`	Every document or editor-state change.
`@select`	`string[]`	The selected element ids whenever the selection changes.

Slots

Slot	Where
`#top-left`	After the main menu, the open document's name.
`#top-right`	Beside the toolbar, top-right, a Share or Docs button.
`#footer`	Bottom-right, before the help button, status or install hints.

Board.vue

<script setup lang="ts">
import type { OpenDrawElement } from '@opendrawjs/core'

function save({ elements }: { elements: readonly OpenDrawElement[] }) {
  console.log('scene now has', elements.length, 'elements')
}
</script>

<template>
  <OpenDraw theme="dark" :persist="'my-board'" @change="save">
    <template #top-right>
      <button class="share">Share</button>
    </template>
  </OpenDraw>
</template>