JointJS+ client IO takes the best of HTML5 and SVG to give you the right tools for building your web products. It operates completely client-side and is therefore independent of your backend technology. Using Java, PHP, Python, Ruby or NodeJS? No problem, you can plug in JointJS+ in no time. This professional diagramming library also integrates with all major JavaScript frameworks, namely React, Angular, Vue and Svelte.

Join companies like BMW, Oracle, IBM, AirBnB and the thousands of developers and solopreneurs using JointJS+ to build your next app quickly and confidently.

Key JointJS+ concepts:

• Scalable vector graphics (SVG): Vector graphics is the building block of JointJS+. It renders perfectly, supports accessibility and makes interaction easier.
• Versatility: JointJS+ is used in a wide variety of industries and fields for all kinds of applications. Use one of our many demos as a boilerplate for your project and get results in no time.
• Customizability: JointJS+ can serve everyone from novice programmers who benefit from a range of pre-built features, to experienced developers who need as much customization as possible.
• Browser & framework friendliness: JointJS+ works on all devices and is compatible with all major JavaScript frameworks such as React, Angular, Vue and others.
• Exceptional support: JointJS+ is created by developers for developers and is known for its excellent support led by the library creators.
• Flexible pricing: JointJS+ is priced per developer, making it suitable for projects of any size. This means you can develop any number of products for any number of users on any number of machines without paying more.

JointJS+ features include:

• Essential Shapes: A set of standard, flexible shapes to get you started with diagramming.
• Custom Shapes: Customizable shapes to create any JointJS diagram you can imagine.
• Featured Shapes: Extra shapes such as BPMN, VSM, and table-like shapes and elements with scrollable content.
• Routers, Connectors & Anchors: Built-in or custom routers, connectors and anchors to determine link behaviour.
• Element & Link Tools: Utilize built-in or custom control panels to manipulate shapes.
• Events: Enable user interaction by triggering events on the JointJS paper, or individual elements and links.    
• Highlighters: Provide additional visual emphasis to elements and links.
• Default Layouts: A wrapper for a 3rd party layout library to help layout directed graphs. JointJS also allows you to lay out ports and their labels with ease.
• Additional Layouts: Grid, Tree, Stack & Force Directed layouts.
• Fast Graph Traversal: Fast algorithms for graph traversal, including (but not limited to) BFS & DFS search, and retrieving successors, predecessors & neighbors.
• Custom Properties: Easily hook your own custom data to any element, link, or diagram.
• View & Model architecture: Strong underlying graph data model with rich API for programmatic graph manipulation.
• Undo / Redo: Travel the history of graph changes, and undo/redo as much as you need with the Command Manager Component.
• Validation: Make sure your diagrams are always in the state you need them by determining if a command is valid or not.
• Geometry & Vectorizer Libraries: Additional libraries that provide useful math and SVG operations for working with JointJS.
• Dagre & Graphlib Libraries: Integration with 3rd party libraries for laying out graphs and working with data structures.
• JavaScript Frameworks: Seamless integration with your favourite JavaScript frameworks.
• JSON: Data serialization with JSON objects to help export or import diagram representations.
• Image: Export your diagrams in useful image formats such as PNG or JPEG.
• SVG: Export your diagrams as a vector based graphic.
• Canvas: Export your diagrams to 2D HTMLCanvas / Bitmap.
• Visio: Import and export Microsoft Visio archives translating them into JointJS diagrams.
• Print: Prepare your JointJS diagrams for printing.
• Property Editor and Viewer: Configure properties for your diagram model and shapes in this Inspector component.
• Element Palette: Organize your shapes in the Stencil component, then drag & drop the elements to the JointJS paper.
• Inline Text Editing: Powerful inline rich-text editing with the Text Editor component.
• Zoom & Scroll: Find your way around JointJS diagrams with ease utilizing zoom and scroll functionality provided by the Paper Scroller component.
• Minimap: Navigate your JointJS diagrams with a small pannable interactive view using the Navigator component.
• Copy & Paste: Take advantage of copy & paste functionality via the Clipboard component.
• Keyboard: Create keyboard shortcuts for your JointJS+ applications.
• Selection: Store selected JointJS cells in a collection via the selection plugin, or create a control panel above a selected element via the Halo component.
• Popups & Menus: Provide some extra contextual information to your shapes via a popup, context menu, or several other modal style components available in JointJS+.
• Toolbar: Enrich your JointJS+ application functionality with easy to reach tools via the Toolbar component.
• Tooltips: Display positioned messages or technical information anywhere in your diagram UI via the Tooltip component.
• Path & Transformation: Easily edit and transform SVG paths with multiple JointJS+ plugins such as PathEditor or FreeTransform.
• Drag & Drop: Provide Drag & Drop functionality to users working with complex layouts via the TreeLayoutView and StackLayoutView plugins.
• Measurement: Give users some extra precision with snaplines for element alignment, or a set of shapes for displaying dimensions of objects, the distances between them, and their relative angles.