|
|
Why choose JsPlumb over ReactFlow?
4 key reasons:
JsPlumb is flexible and composable. Once you reach the limit of ReactFlow's capabilities is it very difficult to extend.
JsPlumb integrates with Angular, Vue (2/3) and Svelte. ReactFlow does not.
JsPlumb has no external dependencies. ReactFlow has several, and more if you want support for layouts etc
JsPlumb ships with a comprehensive component testing manager.
| ReactFlow | JsPlumb | |
| Integration with Angular, Vue2, Vue 3 and Svelte | ||
| Integration with React | ||
| Depends on multiple external libraries | ||
| Supports touch events | ||
| Access to unminified source code | ||
| No restrictions on use of license | ||
| Graph Layout Algorithms | ||
| Dedicated support available | ||
| Export to SVG, PNG and JPG | ||
| Full text search | ||
| Dialogs module | ||
| Object inspectors | ||
| Custom layouts | ||
| Edit edge paths | ||
| Transactions | ||
| Render dynamic selections | ||
| Component testing support |
Interested in seeing what you can build with JsPlumb?
Extensive built-in feature set
Layouts
JsPlumb provides a number of built-in layouts - Force Directed, Hierarchy (org chart), Balloon and more - and it's a straightforward process to write your own.
Miniview
Use the miniview to help navigate your way around the UI. Zoom in and out via the miniview, even with touch events.
Undo/redo
All operations on the dataset can be easily undone/redone, and JsPlumb provides support for batching operations in transactions
Pan/zoom
The smoothest wheel zoom for miles around. Touch events are handled transparently with no need for an external library. Pan and zoom operations are automatically clamped to ensure your users never lose track of where they are.
Templating
JsPlumb has a clear separation between model and view, allowing you to define templates for your nodes and groups and leave it to JsPlumb to know what to render
Library Integrations
The deepest library integrations of any diagramming library (because JsPlumb is not just a diagramming library!) - use components from React , Angular , Vue or Svelte to render rich graphical content and isolate behaviour
Drawing tools
Resize elements using the mouse or touch devices. Fully customizable via CSS.
Shape Libraries
JsPlumb ships with a set of SVG shapes for drawing flowcharts and a simple means for plugging these in to your UI. Watch this space - we'll be shipping BPMN shapes very soon!
CSS styling
Every part of the JsPlumb UI publishes an extensive list of CSS classes that you can use to tweak the appearance.
Edge editing
Let your users find their own paths with JsPlumb's edge editor functionality.
Graph operations
Use the Graph that lies at the heart of JsPlumb to query the dataset. What's connected to this vertex? What are the ancestors of this group? Is there a path from this vertex to some other vertex?
Path tracing
Grab a path from some vertex to another and then have JsPlumb navigate an overlay along it
Rapidly build diagrams and graphical front ends
Flowcharts
Fully featured flowchart builder for you to use as a base for your own apps. Includes support for custom shapes, edge routing, node resizing, and SVG/PNG/JPG export. Angular, Vue 2, Vue 3, React and Svelte versions available.
Gantt charts
Interactive Gantt chart featuring tasks, task groups and milestones. Drag dependencies between tasks and use the inspector to update task names and their progress. Configurable and comprehensive timeline options and a neat scroll effect using floated labels.
Chatbots
Use JsPlumb to build a chatbot flow, with actions, messages, input and choices. Angular, Vue 2, Vue 3, React and Svelte versions available.
Kanban boards
Fully featured Kanban board. Drag items between columns and use the inspector to update items and columns. React, Angular, ES6 and Typescript base versions available.
Network Topology Diagrams
Use JsPlumb to build a network topology diagram, with our neat selection of drawing and sizing tools.
Schemas
Includes support for tables, views, multiple columns types, and column relationships. Easily extensible. Angular, Vue 2, Vue 3 and React versions available.
Org Charts
JsPlumb makes it simple to build interactive org charts. This starter app uses the classic org chart layout and provides an inspector from which the user can navigate around. Angular, Vue 2, Vue 3 and React versions available.
Mindmaps
Simple mindmap builder, highlighting several advanced features JsPlumb offers, such as custom layouts, parsers and exporters
Nested Groups
Learn about how JsPlumb lets you work with groups nested to an arbitrary level, with full drag and drop support.
Path Tracing
Leverage JsPlumb's underlying Directed Graph to visualize paths between elements.
Hello World
This app is designed to give you a basic starter app from which you can build your own, without any of the bells and whistles included in our other starter apps.
Image Processor Pipeline
Fully featured image processor using HTML canvas for you to use as a base for your own apps. Angular, Vue 2, Vue 3, React and Svelte versions available.
