https://github.com/nyxb/drauu-it

https://github.com/nyxb/drauu-it

Last synced: 1 day ago
JSON representation

• Host: GitHub
• URL: https://github.com/nyxb/drauu-it
• Owner: nyxb
• License: mit
• Created: 2023-11-25T01:19:27.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-27T14:23:24.000Z (about 1 year ago)
• Last Synced: 2025-01-10T19:12:33.838Z (12 days ago)
• Language: TypeScript
• Size: 189 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# drauu-it

[![NPM version](https://img.shields.io/npm/v/drauu-it?color=9945FF&label=)](https://www.npmjs.com/package/drauu-it)

SVG-based drawing tool in browser. Built for [Kolibry](https://github.com/kolibry-js/kolibry).

[Live Demo](http://drauu-it.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-it

```

```html

```

```js

import { createDrauuIt } from 'drauu-it'

const drauuIt = createDrauuIt({

  el: '#svg',

  brush: {

    mode: 'stylus', // 'line', 'rectangle', 'ellipse'

    color: 'skyblue',

    size: 5,

  }

})

// change brush color

drauuIt.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)

- [drauu](https://github.com/antfu/drauu) by [antfu](https://github.com/antfu)

Thanks!

## License

MIT