Build better Claude Code Playgrounds with JointJS JointJS 2026-04-13 | A hands-on guide on enhancing Claude Code Playgrounds with JointJS to turn static diagrams into fully interactive visual tools—draggable nodes, smarter routing, animated transitions, and more. You learn how to install third-party Claude Code Marketplaces & Plugins, how to use the JointJS Claude Playground plugin for Claude Code, and more.🔗 LinksJointJS Claude Code Marketplace: github.com/clientIO/jointjs-claude-marketplaceJointJS Claude Playground plugin for Claude Code: github.com/clientIO/jointjs-claude-playgroundJointJS: jointjs.com👀 DemosReact Codemap: changelog.jointjs.com/gallery/jointjs-claude-playgroundVue.js Codemap: changelog.jointjs.com/gallery/jointjs-claude-playground/vue-codemap.htmlSvelte Codemap: changelog.jointjs.com/gallery/jointjs-claude-playground/svelte-codemap.htmlExpress.js Codemap: changelog.jointjs.com/gallery/jointjs-claude-playground/expressjs-codemap.htmlJointJS Codemap: changelog.jointjs.com/gallery/jointjs-claude-playground/jointjs-codemap.html)SQL Query Builder: changelog.jointjs.com/gallery/jointjs-claude-playground/sql-query-builder.htmlDecision Tree Builder: changelog.jointjs.com/gallery/jointjs-claude-playground/decision-tree-builder.htmlDiff Review: changelog.jointjs.com/gallery/jointjs-claude-playground/diff-review.htmlCron Builder: changelog.jointjs.com/gallery/jointjs-claude-playground/cron-builder.htmlRegex Builder: changelog.jointjs.com/gallery/jointjs-claude-playground/regex-builder.htmlE-commerce Data Explorer: changelog.jointjs.com/gallery/jointjs-claude-playground/ecommerce-data-explorer.htmlSite Explorer - jointjs.com: changelog.jointjs.com/gallery/jointjs-claude-playground/jointjs-site-explorer.html 📖 Chapters00:00 Shortcomings of Claude Code Playgrounds01:12 How a diagramming library improves Claude Code Playgrounds03:34 How to enhance Claude Code Playgrounds with JointJS 03:57 How to add third-party Marketplaces and Plugins to Claude Code 07:39 How to use /codemap skill in JointJS Claude Playground plugin 10:31 How to use /canvas-builder skill to build visual tools in Claude Code 13:12 How to use /data-explorer to build visual data explorers 14:21 How to use /site-explorer to visualize website structures 15:18 How to use /diff-review skill to create review tools (diff, PR) 16:42 Why you should use JointJS Claude Playground to build visual toolsHappy diagramming! 🚀#jointjs #diagramming #claudecode
How to use JointJS for React with Next.js JointJS 2026-09-04 | A hands-on overview of the JointJS for React JavaScript library, outlining how the new React integration works and showcasing an AI Workflow Builder demo that highlights the library's strengths, from advanced UX features to performance at scale. 🔗 LinksBlog post: jointjs.com/blog/how-to-use-jointjs-for-react-with-next-jsJointJS for React docs: http://docs.jointjs.com/reactJointJS MCP Server: docs.jointjs.com/learn/help-center/mcp-server📖 Table of contents00:00 Demo Next.js setup01:13 How to install JointJS for React in your project using NPM01:37 How to include JointJS for React in your Next.js project02:16 How to set up a simple JointJS for React app in Next.js02:45 How to fix the most common error with JointJS for React in Next.js03:27 How to make your JointJS diagram take up the full browser window04:20 Next steps with JointJS for React#diagramming #jointjs #nextjs
Overview of key JointJS for React features JointJS 2026-07-10 | A short hands-on overview of JointJS for React, showcasing an AI Workflow Builder demo that highlights the library's strengths, from advanced UX features to performance at scale. 🔗 LinksAI Workflow Builder created with JointJS for React: http://www.jointjs.com/demos/ai-workflow-builderJointJS for React docs: http://docs.jointjs.com/react#JointJS #JointJSforReact #diagramming #react
Introducing JointJS for React: Production-grade diagramming for React applications JointJS 2026-07-09 | A hands-on overview of JointJS for React JavaScript library, outlining how the new React integration works and showcasing an AI Workflow Builder demo that highlights the library's strengths, from advanced UX features to performance at scale. 🔗 LinksAI Workflow Builder created with JointJS for React: http://www.jointjs.com/demos/ai-workflow-builderJointJS for React docs: http://docs.jointjs.com/reactJointJS on GitHub: github.com/clientIO/joint/tree/master/packages/joint-reactJointJS MCP Server: docs.jointjs.com/learn/help-center/mcp-serverJointJS Performance Overview: youtube.com/watch?v=vMLLgK7Lb2g📖 Table of contents00:00 What is JointJS for React00:56 JointJS for React code example (before/after)02:36 AI Workflow Builder Demo created in JointJS for React02:47 Difference between JointJS and JointJS+ library04:08 How AI Workflow Builder works04:38 Why you should build AI Workflow builders in JointJS05:54 Overview of AI Workflow Builder features (UX, performance, UI features)08:18 Why accessibility in diagramming applications matters 09:19 How to get started with JointJS+ for React#diagramming #jointjs
JointJS FIFA World Cup 2026 Predictions JointJS 2026-06-16 | JointJS prediction of the FIFA World Cup 2026 winner, based on simulated results from the Tournament Studio app built with JointJS.Tournament Studio: tournament-studio.apps.jointjs.comWorld Cup 2026 JSON for Tournament Studio: gist.github.com/ZoranJambor/4dbc998a0de9494b606bdf5847d027faShare your prediction of the FIFA World Cup 2026 winner in the comments below.
How to easily share the Claude Code MCP config with your team JointJS 2026-05-29 | Claude Code offers an easy way to share the MCP server setup with your team through a JSON file you can commit to your repository. In this brief guide, you'll learn how to easily set it up. 🔗 LinksBlog post: jointjs.com/blog/how-to-easily-share-the-claude-code-mcp-config-with-your-teamJointJS MCP Server: docs.jointjs.com/learn/help-center/mcp-serverGuide to JointJS MCP Server: youtu.be/irlwpbGCZFE📖 Chapters00:00 About Claude Code MCP Server config00:17 How to install an MCP Server in Claude Code to a directory00:55 How to install an MCP Server in Claude Code globally in user scope01:23 How to install an MCP Server in Claude Code in the project scope#claudecode #mcpserver
JointJS Performance on Large, Enterprise Diagrams? Top-Notch. JointJS 2026-05-27 | A short video showcasing the performance of a JointJS app with a large number of elements on the paper canvas.JointJS: jointjs.comYouTube Channel Visualizer: changelog.jointjs.com/gallery/youtube-channel-visualizer
JointJS MCP Server: Get better diagramming code from AI coding agents JointJS 2026-05-27 | A brief introduction to the JointJS MCP Server, which will help you get better quality JointJS code from AI coding assistants (such as Claude Code, Codex, Cursor, Copilot, and more).🔗 LinksJointJS MCP Server: docs.jointjs.com/learn/help-center/mcp-serverBlog article: jointjs.com/blog/introducing-jointjs-mcp-server
JointJS MCP Server: Higher-quality diagramming code from your AI coding agent JointJS 2026-05-25 | JointJS MCP Server will make your experience with AI assistants (such as Claude Code, Codex, Cursor, Copilot, and more) and JointJS smoother and more productive, and help you get higher-quality code. In this guide, you'll learn why you should use JointJS MCP Server, how to install it, and what the benefits of using it are.🔗 LinksJointJS MCP Server: docs.jointjs.com/learn/help-center/mcp-serverBlog article: jointjs.com/blog/introducing-jointjs-mcp-server🔥 Add JointJS MCP Server in Claude Code1. To a local folder:claude mcp add jointjs --transport http mcp.jointjs.com/mcp2. Globally:claude mcp add jointjs --transport http mcp.jointjs.com/mcp --scope user3. To your project .mcp.json{ "mcpServers": { "jointjs": { "type": "http", "url": "mcp.jointjs.com/mcp" } }}📖 Chapters00:00 Introduction00:14 What is JointJS MCP Server01:01 JointJS MCP Server before/after test setup01:29 JointJS Claude Code prompt test without MCP02:28 How to install JointJS MCP Server in Claude Code to a local folder03:12 Overview of JointJS MCP Server tools04:27 JointJS Claude Code prompt test with JointJS MCP Server05:46 How to remove/uninstall an MCP Server in Claude Code06:00 How local MCP Servers work in Claude Code06:26 How to install an MCP Server in Claude Code globally (in user scope)06:48 How to share Claude Code MCP Server config with your team (.mcp.json file)08:25 Why should you use the JointJS MCP Server#jointjs #diagramming
Pixel Art or Enterprise Diagram? #jointjs JointJS 2026-05-12 | A short video showcasing how well the JointJS JavaScript library performs on massive diagrams with 100,000 cells/nodes. Demo: changelog.jointjs.com/gallery/jointjs-performance-100000-nodes
How performant is the JointJS diagramming library? JointJS 2026-05-05 | A hands-on overview of JointJS diagramming library performance, stress-testing up to 100,000 diagram elements/nodes.In this video, you'll see how JointJS performs under pressure — starting with simpler diagrams and scaling all the way up to a canvas with 100,000 cells. You'll also learn how to get tailored, doc-backed performance advice using the JointJS MCP server inside Claude Code.⏱️ Testing scenarios with diagrams that feature:- 600 nodes- 1,000 nodes- 6,000 nodes- 11,000 nodes- 100,000 nodesSpoiler alert: even without any optimization, JointJS handles 11,000+ elements smoothly. With the documented techniques applied, 100,000 nodes is no problem.🔗 Links:Optimized demo (100,000 nodes): changelog.jointjs.com/gallery/jointjs-performance-100000-nodesJointJS MCP Server: docs.jointjs.com/learn/help-center/mcp-serverSVG versus Canvas (article): jointjs.com/blog/svg-versus-canvasYouTube Channel Visualizer: changelog.jointjs.com/gallery/youtube-channel-visualizerOptimized demo (20,000 nodes): changelog.jointjs.com/plus/examples/canvas-rendering📖 Chapters00:00 Overview of the test app (YouTube Channel Visualizer)00:43 JointJS performance test on a diagram with 600 nodes02:14 JointJS performance test on a diagram with 1,000 nodes03:26 JointJS performance test on a diagram with 6,000 nodes04:17 JointJS performance test on a diagram with 11,000 nodes04:57 Performance optimization tips for JointJS enterprise apps07:40 JointJS performance test on a diagram with 100,000 nodes10:45 How performant is the JointJS diagramming library#JointJS #JavaScript #DiagrammingLibrary #WebPerformance #DataVisualization
YouTube Channel Visualizer by JointJS JointJS 2026-04-29 | A short overview of the YouTube Channel Visualizer tool that allows you to visualize your channel on a diagram to be able to surface key metrics that will help you create better-performing content. YouTube Channel Visualizer: cssw.io/youtube-channel-visualizer#jointjs
Cron Expression Generator Tool JointJS 2026-04-18 | A short overview of an online Cron Expression Generator tool built with Claude JointJS enhanced version of the Claude Code Playground plugin.Cron Expression Generator: changelog.jointjs.com/gallery/jointjs-claude-playground/cron-builder.htmlBuild better Claude Code Playgrounds: youtu.be/GSYSbJo6rasJointJS Claude Playground: github.com/clientIO/jointjs-claude-playgroundHappy diagramming!#claudecode #jointjs
Next‑Level Claude Code Playground: Visual Tool Builder #claudecode JointJS 2026-04-16 | A quick tip outlining one setting you should enable for all third-party marketplaces and plugins in Claude Code.Build better Claude Code Playgrounds: youtu.be/GSYSbJo6rasJointJS Claude Playground: github.com/clientIO/jointjs-claude-playgroundHappy diagramming!#claudecode #jointjs
Claude Code Tips — Enable THIS for all third-party plugins #claudecode JointJS 2026-04-16 | A quick tip outlining one setting you should enable for all third-party marketplaces and plugins in Claude Code.Build better Claude Code Playgrounds: youtu.be/GSYSbJo6rasJointJS Claude Playground: github.com/clientIO/jointjs-claude-playgroundHappy diagramming!#claudecode #jointjs
How to enhance Claude Code Playgrounds! #claudecode JointJS 2026-04-15 | A guide on using the JointJS Claude Playground plugin to turn Claude Code Playgrounds into truly interactive, visual tools.JointJS Claude Playground plugin: github.com/clientIO/jointjs-claude-playground#claudecode #jointjs
Better Claude Code Playgrounds? #claudecode JointJS 2026-04-13 | A quick demo showcasing the differences between the standard Claude Code Playgrounds and the JointJS-enhanced version of the Claude Code Playground plugin.🔗 LinksBuild better Claude Code Playgrounds with JointJS: jointjs.com/blog/build-better-claude-code-playgrounds-with-jointjsJointJS Claude Playground plugin for Claude Code: github.com/clientIO/jointjs-claude-playgroundHappy diagramming! 🚀#jointjs #diagramming #claudecode
How to build a custom learning roadmap for React — Claude Code Playground JointJS 2026-04-13 | A quick tip showing how to use Claude Code Playground to build a learning roadmap for any coding framework or library, like React, Vue.js, Angular, and more.JointJS Claude Playground: github.com/clientIO/jointjs-claude-playgroundJointJS: jointjs.comHappy diagramming!#jointjs #claudecode
How to keep complex diagrams readable with Link Teleports JointJS 2026-03-26 | A hands-on guide on using Link Teleports to simplify workflow UIs and untangle complex paths between nodes in JointJS. 🔗 LinksDistance-Based Link Teleports Demo: jointjs.com/demos/link-teleportsToggle-Based Link Teleports Demo: changelog.jointjs.com/gallery/link-teleports-toggle-uiJointJS: jointjs.comJointJS Docs: docs.jointjs.com📖 Chapters00:00 What are Link Teleports, and which problems do they solve01:18 How to set up dynamic Link Teleports in JointJS 02:57 How to set up a toggle that switches Paths to Link Teleports 05:26 How to add event listeners for the toggle on the toolbar in JointJS 05:58 Common use cases for Link TeleportsHappy diagramming! 🚀#jointjs #diagramming
How to use AI coding agents to turn JointJS demos into working apps JointJS 2026-03-17 | A step-by-step guide to customizing JointJS demos with AI Coding Agents, such as Claude Code, Gemini, GitHub Copilot, Cursor, and others.You’ll learn how easily to find the best JointJS demo as a starting point that will fit your needs, how to tweak branding and styling of the app, how to change UI, add new features and actions—in short, everything you need to build your own proof of concept JointJS app quickly.The written tutorial, with all prompts ready to copy-paste, is available here: jointjs.com/blog/tutorial-customize-jointjs-demo-app-with-claude-code🔗 LinksDemo: changelog.jointjs.com/gallery/ai-customer-support-ticket-workflowJointJS: jointjs.comJointJS Docs: docs.jointjs.comHow to set up JointJS access token: docs.jointjs.com/learn/help-center/npm-registry📖 Chapters00:00 Why you should build your PoC apps from one of the JointJS demos01:17 How to use AI to find a JointJS demo that fits your needs01:51 How to set up a JointJS demo locally using NPX03:57 How to use AI Coding Agents to understand JointJS demos 05:33 How to tweak JointJS demo app branding and styling using AI Coding Agents 08:36 How to add JointJS features to a demo (Highlighters API) 10:48 How to add new buttons to the toolbar (Export SVG)12:20 How to add additional actions and triggers using AI13:55 Why you should use AI Coding Agents with JointJSHappy diagramming! 🚀#jointjs #diagramming
How Silo Team cuts development time by 40% and unveils a stunning new UI JointJS 2024-09-02 | For startups like Silo Team, time is the most precious asset. That’s why a 40% reduction in development time, resulting in a professional onboarding process builder, is a game-changer. Watch the story of Silo Team, a startup with recent $1.16 million in funding and a stunning JointJS-powered interface that impresses both clients and investors.Key achievements:✅ 40% development time reduction✅ Feature-rich drag-and-drop interface✅ Easy integration with Vue & TypeScriptRead the Silo Team's success story 👉 jointjs.com/success-stories/silo-team-reduces-development-time-by-40-percent--• More customer stories: jointjs.com/success-stories• Library of applications built with JointJS: jointjs.com/showcase
How to create JointJS shapes using SVG? JointJS 2023-11-13 | In this video, you will learn how to combine SVG elements from scratch, and convert the result into JointJS shapes. To learn JointJS, it’s very helpful to have a good base knowledge of SVG, and this video should get you started.👉 SVG• Getting started with SVG: developer.mozilla.org/en-US/docs/Web/SVG• SVG tutorial: developer.mozilla.org/en-US/docs/Web/SVG/Tutorial• SVG attribute reference: developer.mozilla.org/en-US/docs/Web/SVG/Attribute• Specification: w3.org/TR/SVG2• Path Commands: developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d#path_commands• Path Curves: blog.richardekwonye.com/bezier-curves👉 JointJSJointJS tutorials: docs.jointjs.comCalc expressions: docs.jointjs.com/api/dia/attributesFor more information, see our documentation, or contact us directly on Github or our website:• Documentation: docs.jointjs.com• Github Discussions: github.com/clientIO/joint/discussions• Contact us: jointjs.com/contact-usHaven’t started our 30-day free trial yet? Do it now, and experience the power of the professional JointJS diagramming library ➡️ jointjs.com/free-trial
How to integrate JointJS+ with Vue JointJS 2023-06-30 | Vue is an influential and much-loved front-end framework. In this video, you will learn how to integrate JointJS+ with Vue in order to get you started with diagrams in your Vue applications. Visit the JointJS resources page to see this tutorial in text form, or our Github to see the source code from the video.• Tutorial: docs.jointjs.com/learn/integration/vue• Source code: github.com/clientIO/joint-plus-tutorial-vueFor more information, see our documentation, start a Github discussion, or contact us via our website.• Documentation docs.jointjs.com• Github discussions github.com/clientIO/joint/discussions• Contact us jointjs.com/contact-usHaven’t started your 30-day free trial yet? Sign up now, and experience the power of the JointJS diagramming library ➡️ jointjs.com/free-trial
How to integrate JointJS+ with Angular JointJS 2023-06-30 | Angular is still one of the most used front-end frameworks. In this video, you will learn how to integrate JointJS+ with Angular in order to get you started with diagrams in your Angular applications. Visit the JointJS resources page to see this tutorial in text form, or our Github to see the source code from the video.• Tutorial: docs.jointjs.com/learn/integration/angular• Source code: github.com/clientIO/joint-plus-tutorial-angularFor more information, see our documentation, start a Github discussion, or contact us via our website.• Documentation: docs.jointjs.com• Github discussions: github.com/clientIO/joint/discussions• Contact us: jointjs.com/contact-usHaven’t started your 30-day free trial yet? Sign up now, and experience the power of the JointJS diagramming library ➡️ jointjs.com/free-trial
How to integrate JointJS+ with Svelte | JointJS JointJS 2023-06-30 | More and more developers are falling in love with Svelte. In this video, you will learn how to integrate JointJS+ with Svelte in order to get you started with diagrams in your Svelte applications. Visit the JointJS resources page to see this tutorial in text form, or our Github to see the source code from the video.• Tutorial: docs.jointjs.com/learn/integration/svelte• Source code: github.com/clientIO/joint-plus-tutorial-svelteFor more information, see our documentation, start a Github discussion, or contact us via our website.• Documentation: docs.jointjs.com• Github discussions: github.com/clientIO/joint/discussions• Contact us: jointjs.com/contact-usHaven’t started your 30-day free trial yet? Sign up now, and experience the power of the JointJS diagramming library ➡️ jointjs.com/free-trial
How to use and modify the Mindmap application | JointJS JointJS 2022-10-21 | In this video, you will discover how to use and edit the existing JointJS+ (Mindmap) application. Learn how to:✔️ structure an application in JointJS+,✔️ modify an existing JointJS+ application,✔️ use advanced diagramming features.For more information, see our documentation or contact us on Github or directly on our website:• Documentation: docs.jointjs.com• Github discussions: github.com/clientIO/joint/discussionsHaven't started your 30-day free trial yet? Do it now and build your next visual application in days: jointjs.com/free-trial
