LATEST NEWS

‣ Rappid 2.2 now available.

‣ Check out our other product AppMixer!

‣ JointJS+ 3.6 is available now with lots of new features.

‣ NEW VERSION of our automated workflow system Appmixer is out!

‣ Our affordable custom development services deliver your solution quickly.

JointJS & JointJS+ Blog

Information, news, updates and more from the team.

Lorem ipsum dolor sit amet

Etiam euismod diam sed nibh cursus pulvinar. Etiam eget condimentum ligula, quis lobortis nibh. Morbi sollicitudin, metus ac commodo posuere, nisi ante suscipit sem, non ullamcorper. Etiam euismod diam sed nibh cursus pulvinar. Etiam eget condimentum ligula, quis lobortis nibh. Morbi sollicitudin, metus ac commodo posuere, nisi ante suscipit sem, non ullamcorper

Demo Wednesday: Tree graph and cycles

This 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.

Demo Wednesday: View/Edit Mode

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.

Demo Wednesday: Electric Generator

See how to 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. See the latter approach in action in this CodePen.

Demo Wednesday: Circular & Rectangular Layout

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.

Demo Wednesday: Corporate Organizational Chart

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.

New release: Introducing JointJS+ 3.6 with upgraded UI diagramming components

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, text editor, and touchpad support, making interacting with your application even more enjoyable for customers.

Demo Wednesday: JSON Visualization

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.

Demo Wednesday: Finite Object Pool

Do the elements of your diagram represent real world objects? Objects that can exist one at a time and cannot simply be duplicated. Check out this CodePen that shows how to manage a pool of objects to be either available in a stencil or already used on the canvas.

Demo Wednesday: Hierarchical diagram

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.

Demo Wednesday: Drop image as shape

Do you want users to be able to drag and drop an image from their operating system directly into a diagram and turn it into an interactive element? This is how it could be done.

Demo Wednesday: PDF Export

How to export a diagram along with other information to PDF? This CodePen does so with the help of the great jsPDF library and the export to canvas feature of JointJS.

Demo Wednesday: Copy & Paste

How to clone shapes using ui.Clipboard? How to allow the user to copy text or image and paste it into a diagram as a shape? That's what today's CodePen is about.

Demo Wednesday: Presentation mode

Do you want to present a diagram to your users element by element? Do you want them to navigate through the diagram using the presentation toolbar? Here's a CodePen that does just that.

Demo Wednesday: List of links in Inspector

How to add a list of links to your shapes? How to visually indicate when elements have links? How to open the hyperlinks from the canvas? See how to configure an inspector, write a custom highlighter, and add a context menu with a list of links.

Demo Wednesday: Absolute Port Layout & Dynamic Port Sizes

Do you need the size of element ports to be driven by the text they contain? Do you want to position ports based on dynamic factors? Well, here's a demo just for you!

Demo Wednesday: Find all cells between two elements

How to highlight all cells between two given elements? Check out this CodePen to see how we use the graph API to find cells and highlighters between any elements.

Demo Wednesday: Change element text alignment in inspector

How to configure an inspector field to control multiple attributes at once? One option is to define a custom element which binds a high-level attribute (textAlignment) to multiple presentation attributes (textAnchor, textVerticalAnchor. x, y).

Demo Wednesday: Working with Ports

Are you working with ports and looking for inspiration? Check out our new CodePen showing the following features: connection events, connection validations, magnet validations, and more.

Demo Wednesday: Two different views of the same graph

Do you need to show different views of the same data model? Display only a subset of what the graph actually contains. The paper viewport option can prevent arbitrary models from displaying as we have demonstrated in this CodePen.

Demo Wednesday: Port Reordering Tool

Need to support user interactions that are not part of JointJS? For example, allow users to drag and drop ports and change their order? This can be accomplished using the custom element tool, as we have done in this CodePen.

Demo Wednesday: Drop stencil element as shape icon

Do you need to fetch data and transform it into a palette of elements? Looking for a way to intercept the default stencil behavior and replace it with your own? This demo is for you.

Demo Wednesday: Shapes Drawing

How to allow your users to draw different shapes using their pointer device? Check out our new CodePen example.

Demo Wednesday: Diagram Index

How to list all objects from a diagram? How to create list items linked to diagram objects? Take a look at this diagram index example.

Demo Wednesday: Hexagonal Grid

How would you create a hexagonal grid diagram? We used the Honeycomb library to do the math for us, and JointJS, which rendered the grid and the shapes in it and made everything interactive.

Demo Wednesday: Move Elements With Keyboard

It's Demo Wednesday today! How to move selected elements using the keyboard? And how to merge a discrete sequence of moves into a single undo operation? See a live demo below or on our CodePen profile to get the answers.

Demo Wednesday: Selection Alignment

It's Demo Wednesday today! We borrowed the arrange and align function from good old PowerPoint. So if you've been racking your brain how to allow users to select and align objects, you don't have to.

Demo Wednesday: Elements Grouping

It's Demo Wednesday today! This time, we present a useful feature: Elements Grouping. It's a useful demo that showcases how to group several elements into a single entity and/or how to ungroup them.

Demo Wednesday: Confirmation Dialogs

It's Demo Wednesday today! This time, we present a useful feature: Confirmation Dialogs. The demo showcases how to add a confirmation dialog to your diagram to let your users approve requested operation.

Demo Wednesday: Tabs

We've published a new demo: Tabs. It's a useful example of switching between multiple diagrams in a single page using tabs written in four popular frameworks: React, Vue, Angular and Svelte.

New brand to be revealed: JointJS+ replaces Rappid

You may have noticed that we have started using JointJS+ in our materials: blog posts, newsletters, websites, documentation, etc. Moreover, the good old Rappid suddenly disappeared. Today you'll find out what this change indicates and what we're up to.

How to create nice looking curves in SVG with fixed tangents

During the development of various applications there is a need to generate curves. In the web environment, the SVG format is most often used for such purposes. How exactly do you create nice looking curves in SVG with fixed tangents?

How ConSol built a modern workflow editor with JointJS+

Enterprises often struggle with documentation of their business processes, and in general, digitalization of how they work. ConSol CM is an enterprise process management platform that transfers workflows into software.

Big release – JointJS+ 3.5 is here

The newest version of JointJS+ (3.5) is out and comes with a plethora of new customer-driven features and improvements.

JointJS+ 3.4.1 at your disposal

The newest version of JointJS+ is out and comes with a security update, bug fixes and a new demo. You can read about all the updates in our blog post and changelog.

More powerful, better – Meet JointJS+ 3.4

We're thrilled to announce the most powerful version of JointJS+ (so far) has been released! Make sure to check the new features and demos presented in this article.

Meet JointJS+ 3.3

We've just released the most powerful JointJS+ version yet. Have a look at what improvements, new features and demo apps it brings in this article.

JointJS+ 3.2 is now available!

JointJS+ v3.2 introduces new sample apps and tutorials for easy Vue, React and Angular integration, new Chatbot demo application and plenty of new features and improvements.

SVG Filter Builder

SVG filters are a powerful tool that allows you to create unique text effects, images and other geometrical object effects. Check out our visual filter builder that allows you to not only learn about SVG filters but also create them, share them with others and apply them in your diagrams.

JointJS+ 3.0 is here

JointJS+ v3.0 introduces support for ES6 modules, drastically improves rendering of large diagrams with smart viewport matching algorithm and contains a lots of other improvements.

Experimenting with JointJS+ and Mind Maps

We've been experimenting with new ways to share JointJS and JointJS+ documentation, and decided to try using a mind map. A mind map is basically an information diagram, and as you know JointJS+ is all about diagrams.

JointJS+ 2.4 has arrived

JointJS+ v2.4 showcases two free demos (with source code) for Angular and React integration, new features for the most popular widgets, and a host of other improvements, optimizations and fixes.

Introducing JointJS+ version 2.3

JointJS+ v2.3 introduces new plugins, heavily improved and optimized tools, performance increases, and tons of new tutorials to help you get the most out of your development.

JointJS+ v2.2 Released

JointJS+ v2.2 adds two new plugins for editing and drawing lines and curves. This opens up all sorts of new possibilities for building apps with vector editing capabilities similar to what you can find in programs like Adobe Illustrator.

JointJS+ 2.1 is now available!

JointJS+ version 2.1.0 delivers new features such as animated transitions, improved rendering performance, custom background images, and much more.

JointJS & JointJS+ with Chrome v57 Bug Alert

Chrome 57 will be released on March 14th and contains a bug that can break certain aspects of JointJS/JointJS+.

Looking back on 2016, and forward to 2017

For many people the holidays are approaching, and as we look back at 2016 we remember challenges faced, milestones reached, and good times had.

JointJS+ 2.0.1 update released

We're happy to announce an update for JointJS+, version 2.0.1, which includes some useful fixes and changes. Full changelog inside..

JointJS+ 2.0 is here!

We’re pleased to announce a new version of JointJS+, version 2.0. It brings customer requested features such as design variations (themes and customization), a simplified API to enable modular application building, configurable toolbar, and many more advancements that make using this framework easier than ever before.

RequireJS with JointJS/JointJS+

JointJS and JointJS+ now have full AMD/RequireJS support. In the past, a shim was needed to use JointJS or JointJS+ in a RequireJS project. That is no longer the case. This post will walk you through the steps needed to use JointJS/JointJS+ in your RequireJS application.

JointJS+ 1.7.1 Released

JointJS+ got some love again! This time we focused on improving BPMN diagrams and fixed a few long standing bugs. Read on for the complete changelog.

JointJS+ v1.7 Released

If there are three main features that should be pointed out in the new JointJS+ v1.7 release, these would be a powerful and efficient graph data model with traversing algorithms, a flexible tree layout engine and improved inline text editing.

Announcement: getTransformToElement() polyfill

Unfortunately, a new version of Chrome (48) removes a feature (SVGGraphicsElement.getTransformToElement()) that is core to JointJS/JointJS+. This post shows you a polyfill that makes sure the method exists.

JointJS+ v1.6 "Prague" Released

The new JointJS+ doesn't just improve the current set of components, it adds a lot of new ones, too. Now you can create truly advanced flow chart editors, workflow tools and other diagramming applications in days.

A complete site & logo redesign

We're very excited to introduce to you a brand new jointjs.com site. It was redesigned from the ground up and the JointJS library got a brand new logo!

JointJS+ v1.5 "Amsterdam" Released

JointJS+ version v1.5 just landed. The new version does not only improve the current components but brings ten brand new plugins to make your apps even better. This version brings Inline Text Editor, Tree Layout and Interaction with Trees, Shortest Path Finder, Dialog boxes and much more...

JointJS+ v1.4 "Lisbon" Released

JointJS+, the new generation JavaScript diagramming UI framework, got better once again. Leveraging the best of SVG and HTML 5, JointJS+ is becoming the choice number one for applications that involve a diagramming component.

JointJS 0.9 Released

It's been a good amount of time since inital works on JointJS started. Since then, the core library and its plugin set grew tremendously. We're proudly announcing another iteration of this work with a new release.

JointJS 0.8 Released

January is getting to an end and it's not hard to find blossom trees here in Amsterdam. To make things even warmer, we are happy to announce a new release of JointJS.