/drauu

Headless SVG-based drawboard in browser.

Primary LanguageTypeScriptMIT LicenseMIT

drauu

NPM version

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', 'reactangle', 'ellipse'
    color: 'skyblue',
    size: 5,
  }
})

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

Credits

Inspired by

Thanks!

Sponsors

License

MIT