free-drawing

Appearance

free-drawingInfinite canvas drawing for any web page

A whiteboard in one element. Draw, organize and share ideas with tools, layers, frames, live collaboration and exports, in TypeScript and without framework.

Get started
Features
Try the demo
free-drawing logo
✏️

Drawing tools

Brush, highlighter, rectangles, ellipses, lines, arrows, triangles, diamonds, hearts, clouds, texts, laser pointer and eraser.

See the tools

🎯

Selection and editing

Select by click or rectangle, resize, rotate, flip, snap to shapes and grid, style mixed selections, undo and redo.

Edit shapes

🗂️

Layers, groups and frames

Name, hide, lock and reorder shapes, group them, gather them in frames, link them with arrows that follow.

Organize

🤝

Live collaboration

Share a link or a QR code, see the cursors of the others, give or remove the right to draw. Server included.

Draw together

📤

Files and export

Save and open files, share links holding the drawing, export PNG, SVG or PDF, copy to the clipboard.

Share

⌨️

Keyboard first

A shortcut for each action, context menu, command palette to search any command, help listing every shortcut.

Shortcuts

🌍

Themes and languages

Light and dark themes, English, French, Spanish and German, replaceable texts, labels for screen readers.

Accessibility

🔌

Plugins

Add your own tools, commands, shortcuts and menu items, created with npm create @fabwcie/free-drawing-plugin. They get help, palette, texts, saving, history and collaboration like the built-in ones.

Extend it

🧩

Made for apps

One element and one line, your own storage, events, preferences and typed API. Konva as only peer dependency.

Integrate

A roadmap drawn with free-drawing: frame, cards linked by arrows, shapes, freehand strokes and a highlight

Quick start ​

Install the library with Konva, its only peer dependency:

bash
yarn add @fabwcie/free-drawing konva
bash
npm install @fabwcie/free-drawing konva
bash
pnpm add @fabwcie/free-drawing konva

Then give it an element of your page:

js
import { Drawer } from '@fabwcie/free-drawing';
import '@fabwcie/free-drawing/style.css';

const drawer = new Drawer(document.getElementById('drawer'), {
  theme: 'system', // light, dark or the one of the device
  language: 'auto', // language of the browser
});

// drawing changed: keep it anywhere as JSON
drawer.on('drawer.change', () => console.log(drawer.getDrawingFile()));

The guide describes every option, the features page shows what the drawer can do, the plugins guide shows how to add your own features and the API documents each class and method.

Open source ​

free-drawing is released under the MIT License. Issues and contributions are welcome on GitHub, see how to contribute.