JointJS+

JointJS+ is a powerful and modern toolkit for building visual tools of various kinds. This documentation gives you an overview and many examples on how you can use the plugins of the JointJS+ toolkit to build groundbreaking applications in a fraction of the time.

If you're looking for documentation on the core JointJS library, go to the JointJS API reference page.

For more information about the JointJS+ toolkit, licensing and online purchase, see the About JointJS+ page.

Browse through the menu on the left to see the documentation for the JointJS+ plugins.

The JointJS+ toolkit is split into modules. Every plugin has a module identifier in its name. This helps you in orientating around the framework. Here is the list of modules with a short description:

• ui - User Interface Widgets. These widgets are user facing components that the user can interact with.
• dia - Programmer's toolkit. This includes undo/redo, graph manipulation, validation and more.
• shapes - Different kinds of diagram shapes including a wide range of charts, BPMN shapes, and Record shapes.
• format - Exports to vector and raster formats, imports and print.
• storage - Storage.
• alg - Algorithms and data structures.
• layout - Automatic layouts.
• elementTools - Render a certain type of control element on top of an ElementView.
• graphUtils - Utilities for algorithms and data structures.

Installation

Include joint-plus.min.css and joint-plus.min.js files in your HTML.

<link rel="stylesheet" type="text/css" href="dist/joint-plus.min.css">
<script src="dist/joint-plus.min.js"></script>

Note that each component documentation page has an Installation section. You do not need to follow the instructions from the section if you installed JointJS+ as described above (with joint-plus.min.js, joint-plus.min.css and all the dependencies). The Installation section of the components is only useful if you do not want to include the whole framework but only some of its components. In this case, you have to include all the dependencies, the JointJS Core library and then only the components you want to use:

<script src="dist/joint.js"></script>

// And now, for example, only the ui.Stencil component:
<link href="dist/joint.ui.stencil.css" rel="stylesheet" type="text/css">
<script src="dist/joint.ui.stencil.js"></script>