A whiteboard component for React

One import, one component, a complete whiteboard: pressure ink, shapes, sticky notes, arrows, images, infinite canvas, undo, light and dark themes, PNG export. MIT licensed — free in commercial products.

Get started Try the live app

The whole integration

npm install @quickdrawjs/react

import { Quickdraw } from '@quickdrawjs/react'
import '@quickdrawjs/core/quickdraw.css'

export default function Board() {
  return (
    <div style={{ position: 'fixed', inset: 0 }}>
      <Quickdraw theme="light" grid="dots" />
    </div>
  )
}

Persistence is one prop and one call

The document is plain JSON. onChange fires on every edit; snapshot restores a saved board: 

<Quickdraw
  snapshot={saved}
  autoFit
  onChange={(diff, source, editor) =>
    save(editor.store.getSnapshot())}
/>

Collaboration without a sync product

Every change emits a JSON-safe diff. A working multiplayer board over a bare WebSocket relay is four lines: 

const { store } = ref.current.editor
store.listen((diff) => socket.send(JSON.stringify(diff)), { source: 'user' })
socket.onmessage = (e) => store.applyDiff(JSON.parse(e.data), 'remote')

Bring your own toolbar

Pass hideUi and the canvas renders bare — every tool is reachable from editor.setTool(), editor.setStyle(), store.undo(), and friends. The stock toolbar is built on the same public API.

More: documentation · step-by-step tutorial · React Native whiteboard · GitHub