Create paper

Every JointJS diagram needs a Paper, a Graph, and a shared namespace.

The JointJS Paper transforms an ordinary <div> HTML element into an interactive diagram area. In our example, we identify <div id="paper"> as the host HTML element of our paper via the el Paper property:

const namespace = shapes;

const graph = new dia.Graph({}, { cellNamespace: namespace });

const paper = new dia.Paper({
    el: document.getElementById('paper'),
    model: graph,
    width: 300,
    height: 300,
    background: { color: '#F5F5F5' },
    cellViewNamespace: namespace
});

See it in action

The Paper is the gray area in the code example below. It will serve as the visible area of our diagram, which we will be populating with Elements and Links:

• JointJS
• JointJS+

Open Sandbox

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