News

How to automatically place element labels based on the available space around them? How to enable the user to select the preferred position of the label? Take a look at this demo.

Today's demo shows how to maintain a tree with automatic tree layout, and also how to allow users to add special backlinks that may create cycles but are not taken into account by automatic layout.

Do you need to switch a diagram from read-only to completely editable mode? Do you need to make it dynamic, e.g. based on user permissions? Here is a CodePen of how to structure your application to make toggling between view and edit mode easier.‍

Do you want to animate elements in a diagram? You can use the transition feature on the model attributes or write a custom element view and take advantage of the fact that JointJS shapes are made up of SVG, which can be set in motion using the Web Animation API.

Do you want the elements in the diagram to form a circle or rectangle? Do you want the position of the elements to be automatically calculated based on the number of elements? Let’s take a look at Circular Layout and Rectangular Layout CodePens.

Do you want to allow users to define an organizational structure and populate it with people in a drag & drop fashion? Check out this cool CodePen leveraging the flexibility of JointJS+ by combining tree and grid layouts and customizing the stencil.

It's Tuesday, October 25, 2022, and the new and improved version of JointJS+ will see the light of day for the first time! This time, we've taken a step back and significantly improved some key diagramming UI components such as the contextual toolbar and text editor making interacting with your application even more enjoyable for customers.

Today's demo shows how to write a simple JSON visualizer using JointJS+. Use TreeLayout to automatically position nodes and add Record shapes to organize object properties into tables where values have different styles depending on their type.

Interested in advanced tips for working with hierarchical diagrams? Try our new demo that offers features like inserting elements into a container, dropping container over children to embed them and more.