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

Why free-drawing? ​

• Any framework, or none: a class for any page, a component for React and Vue, 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, which creates the drawer when it is mounted and destroys it when it is 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

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

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>

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