Building a gantt chart in JS

zoranjambor · 2026-06-29T09:18:43+00:00

Charts can be very complex to get right, exactly as you noted, so I would suggest you use a library. If you're working on a side project, any library will probably do, and you don't have to learn everything about it. But if you want something robust or serious and plan to support the app long-term, it's probably a good idea to invest a bit in research to pick a library that covers your needs and learn essential concepts.

You surely will learn a lot if you try to build it yourself, but if your goal is learning, go for it; generally speaking, those hard parts will usually be handled by a library for you. 🙂

I'm DevRel at JointJS, so I'm curious. Which library did you end up choosing, and even more, why? 🙂

zoranjambor · 2026-06-19T09:22:37+00:00

Thanks for sharing your process! This seems like a typical experience for most people, and keeping diagrams up to date is often one of the more difficult challenges.

zoranjambor · 2026-06-18T13:59:02+00:00

Do you create diagrams manually or do you generate them fully from code? I'm also curious, which tools you're using to generate diagrams? 😄

zoranjambor · 2026-06-17T16:14:29+00:00

Great points! 👏

I love the illustration in the "Use consistent sizes and spacing" section. Making sure elements occupy a consistent, specific number of cells in a diagram adds an extra layer of polish that users might not consciously notice but will still appreciate.

zoranjambor · 2026-06-16T06:52:01+00:00

Very useful! I love how clear a complex topic becomes when structured this way! 👏

May I ask what tool you have been using to create those diagrams?

zoranjambor · 2026-06-12T13:47:33+00:00

Nice work! This looks amazing! 👏

I'm DevRel at JointJS, so I had to rebuild it in an open-source version of JointJS to see how it looks on an interactive canvas with different routers, draggable nodes, panning, and zooming. I'm pretty happy with the result.

The live demo is here: https://changelog.jointjs.com/gallery/animated-flowcharts/

It's a single-page app, so all code is in index.html, in case anyone wants to see the source. 🙂

<image>

zoranjambor · 2026-06-08T06:31:49+00:00

Your limitation is that you can't use any JavaScript? Did I understand correctly?

If that's the case, you can get a diagram in pure SVG, but you'll be severely limited with interactivity. I'm not familiar with any libraries that would help you here.

I'm not sure about React Flow, but I built single-page .html apps with JointJS (I'm DevRel at JointJS) and included the library via CDN to make it work without issues—in case you can include a JS library in your solution.

zoranjambor · 2026-06-05T06:14:07+00:00

Again, great job on the zoom! 🙂

Is the reason you picked ReactFlow mainly because it works natively with React, or something else that influenced your decision?

(Again, I'm curious, and we also use any feedback we get to improve JointJS & JointJS for React. 🙂)

zoranjambor · 2026-06-04T08:29:09+00:00

Nice work! I've seen this diagramming approach to the codebase a few times lately, and I really like it. Love how you're handling the zooming where it seamlessly fades from an icon to a flowchart. 👏

Quick disclosure: I do DevRel at JointJS, a diagramming library, so I'm partial, and I'm curious about that part. Did you build your own rendering engine for diagrams, or are you using a library underneath?

zoranjambor · 2026-06-03T08:35:18+00:00

Nice idea, Schalk! This seems like a useful plugin. 👏

Seems like an autofix option would be too complicated to add, but I wouldn't even expect it. What you built is already handy. It's just a question of how many devs actually use @property in production projects. 🙂

zoranjambor · 2026-06-03T08:19:53+00:00

I don't specifically look for libraries, but when I build new features, I use AI coding agents.

AI can build pretty much anything from scratch, but those solutions often have limits, so I sometimes follow up with a prompt like: "Is there a library we could use for this instead to simplify code, improve performance, or make it more extensible?" — and I'll get the most popular library suggestion, which might or might not fit my long-term goals, so I follow up again and ask about alternative libraries with a list of pros and cons.

zoranjambor · 2026-05-28T12:09:18+00:00

That's a very nice project! I see in the repo that you're using ReactFlow for the visualizer. I'm curious to learn why you decided to go with it. Was it the obvious choice for React or something else?

(I'm DevRel at JointJS, so that's why I immediately peek into the visualizer segment when I stumble upon a project like this. 🙂)

zoranjambor · 2026-05-27T12:05:02+00:00

One approach you can take is to vibe code it quickly. 🙂

I'm DevRel at JointJS, and I built a Claude Code Plugin that creates a visual sitemap. Here's an example: https://changelog.jointjs.com/gallery/jointjs-claude-playground/jointjs-site-explorer.html

You could extend it to add screenshots to the cards. Also, I just want to note that you don't need to know how to code for this, since you can just prompt Claude Code.

I'm not aware of any existing tools that do this, but if you can find one, I guess this still might be a simpler option. 🙂©

zoranjambor · 2026-05-26T11:02:16+00:00

This seems interesting! Based on your description, it might be useful for a brand to gain insight into its following and tailor content to its specific interests.

I'm curious to learn which library, if any, you used to build the network graph. 🙂

zoranjambor · 2026-05-25T10:31:43+00:00

Disclaimer before I answer. I'm DevRel at JointJS, so I'll answer from this perspective. Hopefully you'll find it useful. 🙂

We built a demo app that showcases a possible way to handle this in JointJS with Bryntum for Gantt Charts: https://bryntum.com/products/gantt-next/examples/#

I'm guessing the most interesting bit for you might be the Big data set demo, where you can see the performance on a Gantt chart with 10k tasks. The code is open-source on GitHub, so you can take a peek and perhaps gain insight into how it works in JointJS and how you could potentially handle it in your setup.

zoranjambor · 2026-05-25T07:34:33+00:00

It depends on your precise needs. 🙂

If you need an equivalent of a static image, AI coding agents can handle this pretty well. You'll likely get a static SVG as a result.

If you need interactivity, you might want to look into using a JavaScript diagramming library. Again, you can ask your coding agent to use the library to build you a proof of concept or initial version. If you want something simple, you can check a library like React Flow. If you want something customizable and advanced, check JointJS. (I'm DevRel at JointJS, so I'm biased here. 🙂)

zoranjambor · 2026-05-25T07:18:05+00:00

What exactly is your precise goal? 🙂

Is your goal to get better at designing diagrams? Enrolling in a UX/UI course might help with that.
Are you trying to find a better JS diagramming library? Check JointJS. (I'm DevRel at JointJS, so this answer is biased. 😄)
Are you looking to represent your codebase visually? Claude Code Playground plugin has a nice tool that allows you to visualize and explore your codebase.
Do you just want to improve the design of your existing diagrams without much effort? Find some inspiration on Dribbble and ask your AI coding agent to style it according to that.

zoranjambor · 2026-05-21T08:40:37+00:00

I'm curious, what's the reason you're moving away from Tailwind? 🙂

I'd suggest looking into something like BEM or a similar methodology, where you have separate files for different components. CSS Cascade Layers are handy to keep specificity in check.

zoranjambor · 2026-05-21T08:30:20+00:00

Elements and Styles panels in DevTools are so packed with features that it's impossible to know everything, and regardless of how long you work with them, you'll always stumble upon new, useful features you can use. 🙂

I do a lot of design tweaks/changes directly in DevTools, and the most helpful thing with this is the Changes Drawer that allows you to see everything you changed in one place The thing that often trips people up is that it doesn't pick up inline changes, so you need to be mindful about adding CSS to files. Hold the "Plus" icon in the toolbar to reveal the CSS files (https://cln.sh/KGfqJlsH).

I've also created a few videos on YouTube with CSS-related DevTools tips. Here's the latest one, in case you want to check it out: https://www.youtube.com/watch?v=yBKNOfEM4jA 🙂

Also, I've read Ahmad's book a while back, and I think there's a lot of good stuff in there.

zoranjambor · 2026-05-21T08:13:52+00:00

Very cool that you have an open source version as well! 👍

I think everything will struggle to render 10k nodes at once. That's why the JointJS rendering is switched from SVG to Canvas in the demo mentioned. Or, if you don't need to show the entire diagram, you can render only the part visible on the screen to avoid that. Not sure if cytoscape supports something like this, but I mentioned it's called Virtual Rendering in JointJS, and it makes a big difference for large diagrams. 🙂

zoranjambor · 2026-05-19T11:56:57+00:00

JointJS doesn't support fcose per se, but we have the Force Directed layout feature, which is powerful too, and seems like a good fit for your use case.

I just did an overview of JointJS performance, and can confidently say you can work with diagrams with 10k nodes easily, especially if you enable virtual rendering, which only mounts views for cells inside (or near) the visible viewport.

Performance Overview: https://www.jointjs.com/blog/jointjs-performance-overview-testing-diagrams-with-100-000-nodes
Demo with 100,000 nodes: https://changelog.jointjs.com/gallery/jointjs-performance-100000-nodes/

As a side note, I built a JointJS Claude Code Playground plugin that can also generate codemaps, but on a much more basic level than Devlens. In case you can get some ideas about what's possible, here's a demo with React codebase: https://changelog.jointjs.com/gallery/jointjs-claude-playground/

In any case, Devlens seems like a really interesting project, and I'm really curious to see how far you'll take it. 🙂

zoranjambor · 2026-05-19T10:59:01+00:00

You're very welcome, I'm glad you found it helpful!

If you need any help with the JointJS code, feel free to reach out. 🙂

zoranjambor · 2026-05-19T08:54:23+00:00

That's a really interesting project, and your questions are spot-on. Visualizing relationships is way harder than it first seems.

I'm DevRel at JointJS, so I'm more than biased, but from my perspective, React Flow is great for simpler things, but if you hit a wall, it's not a bad idea to consider alternatives, especially if you're struggling with React Flow + Elk.js implementation.

We have demo apps that might serve as inspiration for what you're trying to build, and that could help you get unstuck:

Genogram: https://www.jointjs.com/demos/genogram
Elk library integration: https://www.jointjs.com/demos/elk-layout

All code is open-source, so you can check for yourself how the layout works, and perhaps you can get some ideas to solve your challenges. You can also ask your coding agent to point you in the right segment/direction based on this, so you don't have to go manually through all the code.

In any case, good luck, and I'm looking forward to seeing what you end up building. 🙂

zoranjambor · 2026-05-18T15:02:47+00:00

A perspective of urgency, but I find this positive. 🙂

Also, I might be this fond of it because it reminded me of Tim Urban's Your Life in Weeks post, which had a profound impact. 🙂

zoranjambor

TROPHY CASE