Getting started

There are two main ways of adding js-draw to a project:

• With a JavaScript bundler (e.g. ESBuild or Webpack).
• Using a CDN (e.g. jsdelivr).

With a bundler

A JavaScript bundlers take the source files of your project (JavaScript, CSS, etc.), and convert them into a form that can be loaded by a browser. When used with a tool like npm, bundlers can simplify dependency management.

If you don't plan on adding a bundler to your project, skip to the pre-bundled version section.

Adding js-draw as a dependency

From the same directory as your project's package.json, npm install js-draw:

$ npm install --save-dev js-draw
Copy

To also add the material icons dependency, also npm install @js-draw/material-icons:

$ npm install --save-dev @js-draw/material-icons
Copy

With a bundler that supports importing .css files

To create a new Editor and add it as a child of document.body, use the Editor constructor:

import Editor from 'js-draw';
import 'js-draw/styles';

const editor = new Editor(document.body);
editor.addToolbar();

The import js-draw/styles step requires a bundler that can import .css files. For example, webpack with css-loader.

With a bundler that doesn't support importing .css files

Import the pre-bundled version of the editor to apply CSS after loading the page.

import Editor from 'js-draw';
import 'js-draw/bundledStyles';

const editor = new Editor(document.body);
editor.addToolbar();

js-draw/bundledStyles is a version of the editor's stylesheets pre-processed by es-build. As such, importing or including it with a <script src="..."></script> tag applies editor-specific CSS to the document.

Using a pre-bundled version

CDN setup

While not recommended for production builds, using a CDN can make it easier to get started with js-draw.

<!--
	Replace 1.27.1 with the latest version of js-draw, which should be 1.27.2.
-->
<script src="https://cdn.jsdelivr.net/npm/js-draw@1.27.1/dist/bundle.js"></script>
<script>
  const editor = new jsdraw.Editor(document.body);
  editor.addToolbar();
</script>

Note: To ensure the CDN-hosted version of js-draw hasn't been tampered with, consider including an integrity="..." attribute. Read more about using SRI with JSDelivr.

Of course, you can also self-host bundle.js.

Next steps

See:

• The README includes an overview of several of the most significant js-draw APIs (e.g. loading and saving, adding a toolbar).
• Changing the icon theme.