docs

opendraw

A hand-drawn whiteboard for Vue, Nuxt, React & Svelte, tools and shortcuts for everything, arrows that connect, frames, sticky notes and sketchy rough.js rendering, as one component.

opendraw ships as five packages:

  • @opendrawjs/core, the engine: element model, document & history, geometry, hit testing, rendering and export. No framework code.
  • @opendrawjs/editor, the framework-free editor: tools, gestures, keyboard, the action registry, persistence. Mounts onto any DOM.
  • @opendrawjs/nuxt, the Vue/Nuxt adapter: <OpenDraw>, <OpenDrawCanvas>, useOpenDraw() and the full editor UI.
  • @opendrawjs/react and @opendrawjs/svelte, the React and Svelte 5 adapters.

Installation

terminal
npm install @opendrawjs/nuxt
# or
pnpm add @opendrawjs/nuxt

Register the module, it auto-imports the components and composables:

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@opendrawjs/nuxt'],
})

Quick start

Drop <OpenDraw /> anywhere. It fills its container, so give the container a height. The scene saves itself to localStorage and restores on reload.

pages/index.vue
<template>
  <div style="height: 100vh">
    <OpenDraw />
  </div>
</template>

Press ? inside the editor for every keyboard shortcut. Every tool has a key: V/1 select, R rectangle, D diamond, O ellipse, A arrow, L line, P draw, T text, N sticky note, E eraser, F frame, K laser.