Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/antfu/drauu
Headless SVG-based drawboard in browser.
https://github.com/antfu/drauu
drawboard
Last synced: 5 days ago
JSON representation
Headless SVG-based drawboard in browser.
- Host: GitHub
- URL: https://github.com/antfu/drauu
- Owner: antfu
- License: mit
- Created: 2021-08-05T17:03:34.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-11-18T23:47:13.000Z (about 1 month ago)
- Last Synced: 2024-12-10T15:36:19.425Z (12 days ago)
- Topics: drawboard
- Language: TypeScript
- Homepage: https://drauu.netlify.app/
- Size: 347 KB
- Stars: 1,220
- Watchers: 6
- Forks: 66
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome - antfu/drauu - Headless SVG-based drawboard in browser. (TypeScript)
README
# drauu
[](https://www.npmjs.com/package/drauu)
SVG-based drawing tool in browser. Built for [Slidev](https://github.com/slidevjs/slidev).
[Live Demo](http://drauu.netlify.app/) (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
```bash
npm i drauu
```
```html
```
```js
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](https://github.com/naknomum/scribby) by [naknomum](https://github.com/naknomum)
- [excalidraw](https://github.com/excalidraw/excalidraw)
- [draw](https://github.com/amoshydra/draw) by [amoshydra](https://github.com/amoshydra)
- [live-draw](https://github.com/antfu/live-draw) by [antfu](https://github.com/antfu)
Thanks!
## Sponsors
## License
MIT