---
source: https://www.jointjs.com/demos/shape-builder
github: https://raw.githubusercontent.com/clientIO/joint-demos/main/shape-builder/README.md
generated: 2026-04-18
format: plaintext
---

JointJS+: Shape Builder <a href="https://www.jointjs.com/jointjs-plus"><img src="../jointjs-plus-badge.svg" alt="JointJS+" width="123" align="right" /></a>

Some applications necessitate the capability for users to create diagram shapes via a user interface. Users need to have the flexibility to define various attributes of the shape, such as its color, name, and the type of data it can contain, which may include numbers, text, and other kinds of data. In the demo below, we present a method that enables users to initially set up shape metadata using forms offered by the ui.inspector plugin. This shape is then incorporated into the stencil as a template for later use. Users can later modify the specific data of the shape, once again utilizing the Inspector.

This demo is also available online at jointjs.com.

Available Versions

JavaScript

Screenshot

!screenshot