JSDraft is a functional toolkit for drawing and flexing 2D parametric drawings.
It includes:
- A javascript library (@crhio/jsdraft) for manipulating 2D parametric drawings
- A simple editor app to assist in creating new drawings
- A webkit loader (@crhio/webpack-jsdraft-loader) for importing drawings into webkit projects
- A rollup/vite plugin (@crhio/rollup-plugin-jsdraft) for importing drawings into rollup/vite projects
JSDraft documentation can be found below:
- Introduction to JSDraft
- Using the JSDraft app
- YAML feature syntax
- JS feature syntax
- JSDraft API
- Draft files
A demo of the app can be found here: https://jsdraft.netlify.app
The app can run in the browser, or as a standalone Electron app.
To run the app locally, begin by cloning the repository and compiling the library:
npm install
npm run build
Then navigate to the app directory and run the app.
cd app
npm install
npm run electron-dev
For node-based projects:
const { Draft } = require('@crhio/jsdraft');
const draft = Draft.load('path/to/file.draft');
// Render an svg of a sketch
const svg = draft.render(
'my_sketch', // the name of the sketch within the draft "file"
[1, 2, 3], // parameter overrides to flex the sketch
'svg', // the desired output format
{ }, // provide any options to affect rendering
);
For webkit-based projects (having installed webpack-jsdraft-loader):
import draft from 'path/to/file.draft';
const svg = draft.render('my_sketch', [1, 2, 3], 'svg');