antfu / drauu

Headless SVG-based drawboard in browser.

drauu

SVG-based drawing tool in browser. Built for Slidev.

Live Demo (built with Vanilla JavaScript!)

Features

• Vanilla JavaScript - integrate into any framework you like
• SVG-based - scalable, transparent, and serializable
• Stylus / Touch pressure support
• Headless (unstyled) - style it as you want
• Undo / Redo stacks

Install

npm i drauu

<svg id="svg"></svg>

import { createDrauu } from 'drauu'

const drauu = createDrauu({
  el: '#svg',
  brush: {
    mode: 'stylus', // 'line', 'rectangle', 'ellipse'
    color: 'skyblue',
    size: 5,
  }
})

// change brush color
drauu.options.brush.color = 'red'

Credits

Inspired by

• scribby by naknomum
• excalidraw
• draw by amoshydra
• live-draw by antfu

Thanks!

Sponsors

License

MIT