JavaScript diagramming library powering exceptional UIs

Prague, Czechia
Pinned Tweet
🚀 Introducing JointJS for React Teams use JointJS to build AI workflow builders, BPMN editors, SCADA/HMI dashboards, and data modeling tools — apps where the diagram is the product. Today, that same powerful core comes to React.
6
4
78
1,515,987
JointJS was featured in G2's "6 Best Data Visualization Libraries" for 2026, and it earned the highest G2 rating of the group at 4.7 out of 5. The report captures what we hear from developers all the time. When your product lives or dies on its diagramming interface, JointJS gets you from a working demo to a real application fast, with the API depth and rendering performance to back complex, production scale builds. Grateful to every team building with JointJS. Full breakdown here: learn.g2.com/best-data-visua…
114
If you're looking for the best way to get started with JointJS for React, we've created a practical, hands-on tutorial that shows the most common techniques. The guide covers: 🦄 How to start from a ready-made demo (AI Workflow Builder) and customize it for your project 📑 Guidance on building your first app step-by-step using AI Coding Agents 🤖 Quick installation instructions to get you up and running from scratch jointjs.com/blog/how-to-get-… #JointJSforReact #diagramming #reactjs
733
Developing an AI workflow builder UI? 🤖 Rendering nodes and connecting them is maybe 20% of the work. The remaining 80% is where estimates fall apart: property panels, link routing, keyboard navigation, undo/redo, performance once graphs get big. Our new app template for JointJS for React has that layer already done: ✔️ property editor wired to the data model ✔️ obstacle-avoiding links and snaplines ✔️ run animations for executing workflows ✔️ keyboard navigation and screen reader support ✔️ virtual rendering — stays responsive at 100,000 cells You start from a complete app, not an empty canvas. Swap in your node types, connect your data, restyle it — and if an AI coding agent is doing that work, the JointJS MCP server feeds it up-to-date docs and demo code instead of letting it hallucinate APIs. Live demo → jointjs.com/demos/ai-workflo… Source code → github.com/clientIO/joint-de… #JointJS #React #AIWorkflowBuilder #Diagramming
1
2
795
The core diagramming library JointJS for React is open source. The advanced editing features and UI components ship in JointJS+ for React, the commercial extension. Want to see it in practice? We built an AI Workflow Builder demo with polished UX and full source code on GitHub — the walkthrough is in the announcement, along with all the details about JointJS for React: jointjs.com/blog/introducing…
202
What you get: 👉 A real data model: a serializable graph you can query, transform, and persist 👉 Exceptional UX built in: connection snapping, obstacle-avoiding link routing, hover and selection feedback 👉 Performance that holds up on graphs with thousands of nodes 👉 A deep set of diagramming features: undo/redo, clipboard, multi-select, snaplines, and more
1
299
Not as a wrapper, but as an idiomatic React API where the diagram behaves like regular React state: <GraphProvider/> holds the nodes and edges data, <Paper/> renders each of them as a React component, and you read and update the diagram through hooks you already know. No useEffect gymnastics, no manual cleanup, no hand-rolled synchronization layer between React's render cycle and the canvas.
2
1
893
Have you ever wished your JointJS code in React apps looked as elegant as this? 🚀 #JointJSforReact #comingsoon
274
Psst, we’ve been working tirelessly on something new you’ll love, and we can’t wait to tell you more, really, really soon. #JointJSforReact #React #ReactJS #FrontendDevelopment #JavaScript
221
Is your team using the JointJS MCP Server yet? 🤔 If you already connected it, what was the first prompt you tried? If not, try one of the prompts outlined in the article below and see how much it can improve your JointJS code. jointjs.com/blog/just-connec…
152
Tournament Studio: tournament-studio.apps.joint… World Cup 2026 JSON for Tournament Studio: gist.github.com/ZoranJambor/…
61
Can a diagramming library predict the winner of the 2026 FIFA World Cup? 🏆 JointJS Can. I plugged the FIFA team rankings into our Tournament Studio app and simulated the results. Check the video below to find out how it went and who the World Cup winner will be according to JointJS. And of course, share your prediction in the comments below. ⚽️
1
169
See the live demo here: changelog.jointjs.com/galler… It’s a single-page app, so the full source is available in `index.html` for anyone who wants to take a look. 🧑‍💻
65
After seeing a cool demo on Reddit, this flowchart was rebuilt in JointJS to recreate the effect of flowing dashed lines and animated dots moving along the links. #JointJS #flowcharts #diagramming
1
167
We (and by we I mean @DavidDurman) built a small JointJS app that lets you track tournament results. It's handy for sports events where you or your kids participate, and you can even use it to play guessing games for tournaments you watch. (The upcoming FIFA World Cup is a nice example here.) ⚽️🏀🏒 I peeked at the code and singled out some coding patterns I thought might be interesting for you to 'steal' and use in your JointJS apps. 📝 The article: jointjs.com/blog/building-to… 🏆 Tournament Studio JointJS app: tournament-studio.apps.joint…
1
115
You'll also find a short write-up on our blog: jointjs.com/blog/how-to-easi…
43
Are you sharing your MCP server configuration and setup with your team? 🤔 It's really easy in Claude Code. Just add a flag `--scope project` while installing an MCP, and a file `.mcp.json` will be created. You can commit that to your repository, and whenever a team member enters Claude Code, the config will be read, and servers will be connected (after granting permission). 🔥 #claudecode #mcp
1
1
157
We’re excited to launch the JointJS MCP Server, a completely free tool that connects your AI coding assistants (Claude, Cursor, Copilot, and more) directly to up-to-date JointJS docs, APIs, and demo code. Instead of guessing or relying on outdated training data, your AI agent can now: • Use the correct JointJS APIs • Follow official best practices • Generate higher quality code Learn more about JointJS MCP Server: jointjs.com/blog/introducing… If you’re building with JointJS, adding MCP to your AI tooling is a no-brainer.
2
2
183
Can your diagramming library handle 100,000 elements and still feel this smooth and performant? 💨 We put JointJS to the test to see whether it could turn a massive diagram into a performance masterpiece. See it in action below. 👇 #WebPerformance #JointJS #TechTips
88