@algorisys/yappydraw
The YappyDraw drawing API without the editor, as a browser ES module.
Create shapes in code, then render them as inline SVG. Each shape is a <g data-yappy-id="…">,
so CSS and animation libraries can target it.
npm install @algorisys/yappydraw
import { Yappy, mount, fontsReady } from '@algorisys/yappydraw'
await fontsReady() // before creating any text
const sun = Yappy.createCircle(40, 40, 120, 120, { backgroundColor: '#ffd166', fillStyle: 'hachure' })
mount('#stage') // inline SVG
Or with no install, from a CDN:
<script type="module">
import { Yappy, mount } from 'https://cdn.jsdelivr.net/npm/@algorisys/[email protected]/yappy.js'
</script>
| Export | What |
|---|---|
Yappy | The full window.Yappy API: create*, importDSL, loadDocument, … (see the in-app Help) |
toSVG(options?) | SVG markup, element ids on by default. Never downloads a file. |
mount(target, options?) | Render into an element as inline SVG; returns the <svg> |
fontsReady() | Load YappyDraw's fonts; await it before creating text |
clear() | Start a fresh drawing |
version | The YappyDraw version this was built from |
Notes
- Browser only. It needs a DOM and canvas for text measurement.
- One drawing per page. The store is a module singleton; call
clear()before building the next one. - Keep
chunks/next toyappy.js. MathJax and the exporters are loaded from there the first time they are used. - Licence: AGPL-3.0-only, as the rest of YappyDraw. Check that it suits your project before bundling it into software you distribute or run as a network service.
Source: algorisys-oss/yappydraw @ v0.8.306.