Drawesome is a drawing toolbar for React. Seven pens that behave like pens, an eraser that takes away area rather than whole strokes, and SVG or PNG out. No dependencies beyond React.

npm install drawesome

Peer dependency: react >=18.

import { Draw } from 'drawesome'
import 'drawesome/styles.css'

function Canvas() {
  return (
    <div style={{ height: 480 }}>
      <Draw />
    </div>
  )
}

It fills its parent container. Set a height on the wrapper.

Each behaves like the thing it's named after. The pencil, pen and brush thin out the faster you move; the fineliner and highlighter hold one width whatever you do. The fountain pen goes by direction instead: thick one way, hairline the other. No two strokes come out quite the same.

The eraser takes away area rather than whole strokes, so you can rub out part of a line and keep the rest.

Surface

Tools

Chrome

Ref handle

It's opinionated on purpose: the defaults are meant to be the version you ship. Everything here is turning things off or moving them around, not rebuilding it. If you'd rather assemble a drawing tool from parts, tldraw or Excalidraw will suit you better.

Pick the tools and their order, and switch off what you don't want:

<Draw
  tools={['pencil', 'marker', 'highlighter']}
  controls={{ undo: false, clear: false }}
/>

Set background to transparent and it paints nothing, so whatever is behind becomes the canvas:

<div className="your-paper">
  <Draw background="transparent" />
</div>

The bar is as wide as what's in it, and a phone has more height than width. On a small screen, stand it up and drop a few tools:

<Draw
  placement={narrow ? 'left' : 'bottom'}
  tools={narrow ? ['pencil', 'pen', 'marker', 'highlighter', 'brush'] : undefined}
  controls={narrow ? { undo: false, clear: false, opacity: false, custom: false } : undefined}
/>

const draw = useRef<DrawHandle>(null)

<Draw ref={draw} />

await draw.current.download('sketch', 'png', 2)

Strokes are plain data: store what onChange gives you and hand it back as initialStrokes.

chrome={false} leaves you the surface with no toolbar. DrawSurface, Toolbar and useDrawing are exported separately if you'd rather lay them out yourself, and strokePath draws a stroke anywhere you can put an SVG path. The logo above is one.

Every pen has a single-key shortcut, shown in its tooltip. E for the eraser, [ and ] for size, ⌘Z and ⇧⌘Z for undo and redo. Hold Shift while drawing to lock the stroke to the nearest of eight directions.

© 2026 Benji Taylor

Licensed under MIT