inspired by SVG.js
draft.js is a lightweight library for parametric design.
draft.js is licensed under the terms of the MIT License.
Prebuilt distributions can be found on the releases page.
You can also use Bower
or npm
:
# Install via Bower
bower install draft.js
# Install via npm
npm install draft.js
Guides and API reference are located in the docs directory and on the wiki page.
Include the library at the top of your html file:
<head>
...
<script src="draft.js/dist/draft.min.js"></script>
</head>
<body>
<div id="view" style="width: 100%; height: 100%"></div>
</body>
Write a new script and include it after your html content:
// Create a new draft document and add a group to it
var doc = draft('my_document');
var group = doc.group();
// Add some shapes to the group
var rect = group.rect(200, 150).fill('#18f');
var circle = group.circle(50).fill('#f1c');
// Create a view for the group
var view = group.view(600, 400);
// Use the draft-svg plugin to render an image
var body = document.getElementById('body');
body.appendChild(view.svg());
- Follow the Google JavaScript Style Guide
- Indent with two spaces
- Use semicolons at the ends of lines
- Wout Fierens, Ulrich-Matthias Schäfer, and all the other contributors to the SVG.js library.
- Oliver Caldwell for creating EventEmitter, a library for using DOM-like events without the DOM, and Heir, a tiny script for object inheritance and mixins.