Skip to main content
Version: 4.1

Add a toolbar

Toolbar is a JointJS+ plugin which populates an ordinary <div> HTML element with multiple tools that allow the user to interact with the diagram.

In our example, we define <div id="toolbar"> to be the host HTML element for our Toolbar. As with the Stencil, we have to make sure that the Toolbar is visible via CSS, by specifying absolute positioning and z-index.

The Toolbar consists of tools of different types. Let's create a Toolbar with two buttons, where the name identifies them as json and svg:

const toolbar = new ui.Toolbar({
tools: [
{
type: 'button',
name: 'json',
text: 'Export JSON'
},
{
type: 'button',
name: 'svg',
text: 'Export SVG'
}
]
});
toolbar.render();
document.getElementById('toolbar').appendChild(toolbar.el);

For our buttons to actually do something, we need to tell JointJS what should happen when our user interacts with them - that our diagram should be exported, for example. We do that by listening on Toolbar events, which are identified by the name of the tool (see above). A click on our "Export JSON" button therefore triggers a json:pointerclick event:

toolbar.on('json:pointerclick', () => {
const str = JSON.stringify(graph.toJSON());
const bytes = new TextEncoder().encode(str);
const blob = new Blob([bytes], { type: 'application/json;charset=utf-8' });
util.downloadBlob(blob, 'joint-plus.json');
});

toolbar.on('svg:pointerclick', () => {
format.toSVG(
paper,
(svg) => {
util.downloadDataUri(
`data:image/svg+xml,${encodeURIComponent(svg)}`,
'joint-plus.svg'
);
},
{ useComputedStyles: false }
);
});
Note about imports...

Our Toolbar buttons use features from the format and util modules of JointJS+. We need to modify the first line of our code in order to import the two modules:

import { dia, shapes, ui, format, util } from '@joint/plus';

See it in action​

Try clicking one of our Toolbar buttons in the example below:

💡 Would you prefer to learn more about Toolbar? We have many demos illustrating it on our Demos & examples page.