Blog post preview
March 22, 2022

Big release – JointJS+ 3.5 is here

The latest version of JointJS+ (3.5) has been released, which brings many new features and improvements according to customer requests.

You can download the update package from your Account portal. If you're not eligible for a free update, you can purchase it through our online store or request a free 30 day trial to try it out.

Curious? Have a look at the extensive update description in the full changelog here.

In addition, rebranding is underway. JointJS+ will soon be replaced by JointJS+ (which will offer the same value). With this in mind, you may come across JointJS+ in the change log or other sources. This has no effect on the functionality of our powerful library.

"Every day we talk to our customers, we monitor how they use JointJS+ and get the inspiration on what to improve. In some cases, they've been forced to use workarounds to get the job done. JointJS+ 3.5 aims to make this unnecessary and is probably the biggest, and truly customer-driven, release in our history." Roman Brückner, CTO

JointJS+ 3.5 Key Highlights:

Create new types of diagrams (Kanban, Yamazumi)

New plugins have been added to help you create new diagram types more efficiently, such as Kanban or Yamazumi:

  • ui.StackLayoutView which represents a new drag & drop view for the stack layout graphs.
  • layout.StackLayout that helps you organize elements in a one-dimensional stacks, either horizontally or vertically.

Below, see an example of a Kanban board built with JointJS+. To play around with the demo yourself, visit this page.

Kanban board

Impressive, isn't it? Check out Yamazumi too (live demo available here).

Yamazumi 3D

Scrollbar and data modifier/decorator added to the Data Mapping application

Thanks to the scrollbars, it is no longer a problem to display huge data sets in a single shape. In addition, modifiers/decorators have been added to allow end users to modify the data flowing from one data silo to another. Check out the live demo to learn more.

Scrollbar and data modifier/decorator added to the Data Mapping application

No visible borders in a paper anymore

For some use cases, the way paper borders expanded in the past was not always ideal. We carefully listened to your suggestions and made the blank space around the paper become a borderless paper as well.

Before...

JointJS  – No visible borders in a paper anymore

After...

JointS - No visible borders in a paper anymore

Check out this live demo to learn more.

An option to move link labels to a separate (top) layer

It can be said that the more complex the diagram is, the less clear it is. In JointJS+ 3.5, you finally have the option to move link labels to a separate layer (above all other links and elements). This change makes even very complex diagrams clear and easy to read.

An option to move link labels to a separate (top) layer

Content-driven elements made possible

If you were wondering how to create an element where the content drives the size of the element, JointJS+ 3.5 is the answer. To learn more about this powerful mechanism, check out our tutorial.

Content-driven elements made possible
Content-driven elements made possible

Also, we're updating our CodePen profile where we are adding new tutorials regularly. Here's one we're proud of (Marey's Chart).

Marey Chart

Other additions

There is a lot to explore in the new release. Let us point out a few additions that deserve your attention.

@joint/decorators - a new package for defining shapes from an SVG template (text interpolation, data binding, using functions, define new SVG attributes).

-- CODE language-svg --
<g>
   <title>My Element</title>
   <rect @selector="body"
         x="0"
         y="0"
         width="calc(w)"
         height="calc(h)"
         line-style="solid"
         stroke-width="2"
         :fill="lighten(color, 0.2)"
         :stroke="color"
   />
   <text @selector="label"
         text-anchor="middle"
         text-vertical-anchor="middle"
         font-size="14"
         font-family="sans-serif"
         x="calc(0.5*w)"
         y="calc(0.5*h)"
         :fill="textColor"
   >{{ capitalize(firstName) }} {{ capitalize(lastName) }}</text>
</g>

apps.Tokens - integrate high performance WebGL heatmap library. Check out the live demo here.

Tokens
Complete JointJS+ 3.5 Changelog with sample code and screenshots is here.

We hope you'll get the most from the new features and updates. Please don't hesitate to get in touch with questions or comments.

Happy diagramming!

- The JointJS Team

Authors
Blog post author
Roman Bruckner
Diagramming enthusiast from an early age, traveler and a persistent contributor to the developer community.
Marek Hozak
Marketing guy, father, and sports fanatic who loves to learn about new technologies.
Stay in the loop

Speed up your development with a powerful library