Skip to main content
The protocol repo ships six drivers under examples/. Each is a Vite project with the same scripts: dev starts the dev server that Drawdy’s development mode hot-reloads from, build packs dist/<driver-id>.drawdyx (dots in the id become dashes, so drawdy.hello builds dist/drawdy-hello.drawdyx), and typecheck runs tsc. From the repo root:

​
Drawdy Hello

drawdy-hello

drawdy.hello: says hello to the drawdy main loop. One source file.
Shows the smallest useful driver: subscription:scene:elements-added, command:camera:get-info, and command:camera:fly-to-elements.

​
Bomb

drawdy-bomb

drawdy.bomb: drag the bomb over your elements and drop to blow them up.
Shows drag-and-drop driven by the protocol’s own subscription:dom:drag rather than native browser drag, and local animation for the blast. Shows:
  • A scoped subscription:dom:drag: armed on the action button (command:dom:create-action-button), then re-scoped to the ring so the gesture keeps flowing while you drag it around.
  • A cursor-following overlay: command:dom:create-floating-element with asPopover: false, moved every tick with command:dom:move-floating-element, torn down with command:dom:remove-floating-element and command:subscription:remove.
  • Area hit-testing on drop: command:camera:get-info, command:scene:query-rect, command:scene:element-rects.
  • Local animation: command:scene:update-drawdy-elements with a LocalAnimation that flings each element radially and spins it, then command:scene:remove-drawdy-elements once the blast finishes.
  • Also command:tools:set-active.

​
Background Remover

drawdy-background-remover

drawdy.background-remover: right-click a selected image and remove its background, entirely on-device.
Shows a driver doing real compute inside the sandboxed worker. Segmentation runs on ONNX Runtime Web’s WebAssembly backend with the U²-Net family of models (u2netp for speed, silueta for quality), pulled from a CORS-enabled mirror and verified by SHA-256 before use. Shows:
  • Context menus with children: command:context-menu:add, subscription:context-menu:clicked.
  • Reading the selection: command:scene:get-current-selected-drawdy-elements, command:scene:get-drawdy-elements.
  • Image pixels in and out: command:scene:get-image-source, then command:scene:add-drawdy-elements with a blob-sourced image placed beside the original.
  • A status toast built from command:dom:create-floating-element / command:dom:remove-floating-element and command:dom:window-size.
  • Loading a WebAssembly runtime in the worker with importScripts, decoding with createImageBitmap + OffscreenCanvas, and a pure, unit-tested pre/post-processing pipeline under src/segment.ts: pnpm test.

​
Math Symbols

drawdy-math-symbols

drawdy.math-symbols: drag Greek letters, operators, and math notation straight onto the canvas.
Shows:
  • A webview: command:webview:create, command:webview:post-message, subscription:webview:message, and acquireDrawdyApi() from the webview API inside it.
  • An action button: command:dom:create-action-button, subscription:dom:element-clicked, command:dom:element-rect.
  • Preview elements during drag and drop: command:scene:create-drawdy-preview-elements, command:scene:delete-drawdy-preview-elements, then command:scene:add-drawdy-elements.
  • Text editing: subscription:scene:text-edit, command:scene:update-text-edit.
  • Also subscription:dom:theme-changed, subscription:keyboard:control-keys, command:scene:query-tool-style-state, command:camera:screen-to-canvas, and command:camera:get-viewport-rect.

​
Physics Engine

drawdy-physics-engine

drawdy.physics-engine: simulate selected elements as 2D rigid bodies: gravity, collisions, and impulse response.
Shows:
  • Context menus: command:context-menu:add, command:context-menu:remove, subscription:context-menu:clicked.
  • Reading the selection: command:scene:get-current-selected-drawdy-elements, command:scene:get-drawdy-elements.
  • The preview-transform lifecycle: command:scene:begin-preview, command:scene:preview-transforms, command:scene:end-preview, plus command:scene:update-drawdy-elements.
  • Scene events elements-added, elements-updated, elements-removed, elements-replaced, and subscription:camera:moved-rapid.
  • A physics engine under src/engine/ (broadphase, narrowphase, impulses, frame clock) with Jest tests: pnpm --filter drawdy-physics-engine test.

​
Presentation

drawdy-presentation

drawdy.presentation: turn a board into slides — a React webview picker, per-slide framing, and a fullscreen presenter.
The richest example, and the only one with a bundled UI: a React 19 + Tailwind webview compiled into one self-contained HTML string (see its rollup.config.mjs). Shows:
  • A React webview: command:webview:create, command:webview:hide, command:webview:post-message, subscription:webview:message, and acquireDrawdyApi() from the webview API inside it.
  • DOM surfaces: a floating slide picker via command:dom:create-floating-element and command:dom:remove-floating-element, command:dom:create-action-button, command:dom:element-rect, command:dom:window-size, and fullscreen presenting with command:dom:enter-fullscreen, command:dom:exit-fullscreen, and subscription:dom:fullscreen-changed.
  • Context menus: command:context-menu:add, subscription:context-menu:clicked.
  • Scene reads and writes: command:scene:get-current-selected-drawdy-elements, command:scene:get-drawdy-elements, command:scene:add-drawdy-elements, command:scene:update-drawdy-elements, command:scene:query-combined-rect, command:scene:element-rects, and slide thumbnails via command:scene:capture-screenshot.
  • Camera command:camera:fly-to-elements and tools command:tools:get-active, command:tools:set-active.
  • Scene events elements-added, elements-updated, elements-removed, elements-replaced, plus subscription:scene:activity and subscription:dom:theme-changed; unsubscribes with command:subscription:remove.