free-drawingInfinite canvas drawing for vanilla JS, React, Vue and web components

Why free-drawing? ​

• Any framework, or none: a class for any page, a component for React and Vue, a <free-drawing> element for Angular, Svelte or plain HTML, with the same options and API.
• Truly open source: MIT licence, no licence key, no watermark, no paid features. Use it in any app, commercial ones included.
• Rights in live sessions: participants view the drawing until its owner lets them draw, they ask in one click, and follow the view the owner presents. See live collaboration.
• A real layers panel: name, hide, lock and reorder every shape, select ranges of them. See layers.
• Share without a server: a link holds the whole drawing, compressed, and files open anywhere. See files and links.
• Your own features: tools, commands, shortcuts and menu items with a typed plugin API, a new plugin created by npm create @fabwcie/free-drawing-plugin.
• Your server, or the one included: Node server with accounts, saved drawings and live collaboration, or your own following the protocol.

Quick start ​

The library works in any page, without framework. React and Vue apps can use its component, other apps (Angular, Svelte, plain HTML...) its <free-drawing> element: they create the drawer when they are mounted and destroy it when they are unmounted. Install it with Konva, its only peer dependency (also with yarn or pnpm):

npm install @fabwcie/free-drawing konva

npm install @fabwcie/free-drawing-react @fabwcie/free-drawing konva

npm install @fabwcie/free-drawing-vue @fabwcie/free-drawing konva

npm install @fabwcie/free-drawing-element @fabwcie/free-drawing konva

Then give it an element of your page, render its component, or add its element:

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()));

import { FreeDrawing } from '@fabwcie/free-drawing-react';
import '@fabwcie/free-drawing/style.css';

export function Board() {
  return (
    <FreeDrawing
      style={{ height: 600 }}
      theme="system" // light, dark or the one of the device
      language="auto" // language of the browser
      // drawing changed: keep it anywhere as JSON
      onChange={(drawer) => console.log(drawer.getDrawingFile())}
    />
  );
}

<script setup lang="ts">
import { FreeDrawing } from '@fabwcie/free-drawing-vue';
import type { Drawer } from '@fabwcie/free-drawing';
import '@fabwcie/free-drawing/style.css';

// drawing changed: keep it anywhere as JSON
const onChange = (drawer: Drawer) => console.log(drawer.getDrawingFile());
</script>

<template>
  <FreeDrawing style="height: 600px" theme="system" language="auto" @change="onChange" />
</template>

<script type="module">
  import '@fabwcie/free-drawing-element';
  import '@fabwcie/free-drawing/style.css';

  const board = document.querySelector('free-drawing');

  // drawing changed: keep it anywhere as JSON
  board.addEventListener('drawerchange', (event) => console.log(event.detail.getDrawingFile()));
</script>

<free-drawing theme="system" language="auto" style="height: 600px"></free-drawing>

The guide describes every option, the React, Vue and Web Component pages the props of the components and the attributes of the element, 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.