Customizing shapes

JointJS makes it easy to customize ready-to-use shapes, but it also has a way to create your own custom shapes from scratch. You may need to create a custom shape from scratch if you need a shape with new markup, or one with additional prototype or static methods.

Customizing an existing shape

Learn how to customize an existing shape in JointJS.

Creating a shape from scratch

Learn how to create your own custom shapes in JointJS.

Relative dimensions

JointJS provides a calc() function which lets you perform calculations when specifying SVG attributes values. This allows you to size subelements relative to the size of the shape's model.

Link arrowheads

JointJS offers sourceMarker and targetMarker, two special presentation attributes in charge of link arrowheads.

Relative position on links

Learn how to use connection, atConnectionLength, and atConnectionRatio attributes in JointJS for precise positioning and rotation of subelements along SVG path links.

Link subelement labels

Special attributes also allow us to create custom labeling subelements - both those that adjust their rotation according to the underlying link path and those that always keep the same angle.

Filters & Gradients

In this section, we introduce filters and gradients to style JointJS shapes. JointJS uses standard SVG filters and gradients, defined with JavaScript objects instead of SVG markup code.

Styling with CSS

Learn how to style JointJS custom shapes with CSS.

HTML inside shapes

In the wonderful world of SVG elements, foreignObject stands out from the rest as it provides some unique behavior that other SVG elements do not.

Cell namespaces

An essential aspect of working with JointJS is ensuring it knows where to find built-in and custom shapes. You must specify where to read cell view definitions.