Draw

Vanduo Draw is a standalone SVG drawing tool from @vanduo-oss/vd3-cbun/draw. Its dependency-free brush engine turns freehand strokes into smooth, variable-width marks (pressure- and velocity-aware). Pick a brush (pen, pencil, marker, highlighter, calligraphy) and a color from the built-in palette, set size and opacity, and paint — or switch to the eraser, shapes, or sticky notes. Want room to think? Hit Full screen to sketch across the whole viewport (Esc to come back). The chrome themes with the active --vd-* palette and light / dark mode; your marks keep the color you pick.

Sketchpad

API Reference

Install

pnpm add @vanduo-oss/vd3-cbun

Usage

<script setup lang="ts">
import { VdDraw } from '@vanduo-oss/vd3-cbun/draw';
import '@vanduo-oss/vd3-cbun/draw/css';
</script>

<template>
  <!-- The toolbar (brushes, colors, size, eraser) is built in. -->
  <VdDraw tool="draw" @change="onChange" />
</template>

Component API

Prop / event	Description
`:data`	Drawing document ({ shapes, viewport }); updates flow through load().
`tool`	Active tool — 'draw', 'eraser', 'select', 'hand', shapes… (default 'draw').
`:readonly`	Render as a non-editable viewer (no toolbar).
`:gridSize / :snap`	Background grid size; snap-to-edges (default on).
`:history / :historyLimit`	Toggle undo history and cap the snapshot count.
`@change / @select / @viewport`	Forwarded editor events (pan/zoom is not undoable).
`@ready`	Emitted once with the underlying VdDraw instance.

Tools

Tool	Action
`brush`	Paint variable-width strokes with the active brush + color.
`eraser`	Drag to erase whole strokes / shapes you cross.
`select / hand`	Select, move, resize (select); pan the canvas (hand).
`rectangle / ellipse / arrow`	Secondary vector shapes in the current color.
`text / sticky`	Editable text and sticky notes.

Brushes

Preset	Feel
`pen`	Crisp, pressure-tapered ink.
`pencil`	Thin, slightly textured, softer opacity.
`marker`	Thick, flat, semi-opaque.
`highlighter`	Wide, translucent, multiply blend (overlaps darken).
`calligraphy`	Fixed-angle nib — width follows stroke direction.

Exposed methods (template ref)

Method	Description
`setColor / setBrush`	Set the current color / brush preset for the next mark.
`setBrushSize / setOpacity`	Set the current brush size / opacity.
`setGridSize / toggleGrid`	Resize the grid cells / show + hide the grid.
`undo / redo`	Step through the whole-document history.
`toSVG / toPNG`	Export the drawing (self-contained SVG string / PNG data URL).
`getInstance`	The underlying VdDrawCore for imperative use.