durman

Hi HN! I’m David, founder of JointJS.

We built this React template for AI workflow editors and thought others might find it useful.

The goal was to provide the UI layer that many AI products end up needing: a drag-and-drop canvas, editable nodes, connections, validation, undo/redo, copy/paste, keyboard shortcuts, zooming, snaplines, accessibility, proper graph data model, and support for larger graphs. The full source code is available so it can be used as a starting point for your own workflow editor.

I’d really appreciate any feedback—especially from anyone building workflow tools or AI products.

16% of the global population has a disability, according to the World Health Organization. How can we build diagramming web apps to ensure accessibility for everyone? Dive into this important topic, explore the current state of accessibility, enabling technologies, and the role of AI in creating more inclusive experiences.

Discover various techniques for outlining complex SVG shapes, including unions of shapes. Learn how to balance advanced styling with performance, accuracy, and flexibility. This guide covers key methods and their pros and cons, with practical, code-based examples for building modern, responsive web applications.

That's great progress! It's nice to see JointJS becoming lighter and shedding its reliance on jQuery and Backbone.

Thanks for the suggestion. The JointJS core library, basically anything except of what is described here: http://jointjs.com/rappid/docs (in other words, anything that is downloadable here: http://jointjs.com/download) is licensed under the MPL v2 license. The rest is licensed under our own, commercial, license. Commercial support is indeed optional and covers bug fixes, general advise, help, online troubleshooting and more. We also do custom developments that are priced individually, depending on the project.

Gliffy is a product for end users. Rappid is a showcase of JointJS (JavaScript diagramming library) and its components that can be used to build all kinds of (custom) visual tools and application builders (workflows, business processes, state machines, voice applications and much more...).

Just to inform you that this is now implemented.

Figurepool can be very handy for mindmapping, actually the 'fork icon tool' was added with mindmaps in mind, you just click the icon tool and a new already connected box is added. Just double click the box to add new text label to it.

The scrolling issue seems to be an OS X related bug. I sometimes observe the same. The fact that sometimes two finger swipe is recognized as back button is a Google Chrome on OS X feature. I was able to get around the zoom/scroll issue by pressing the Shift button. Not sure if it'll work for you though. At least you can give it a try...

Nice that you noticed. I was indeed inspired by Squeak Smalltalk. I love that system. Pity it didn't get widespread.

Nice work your editor! Small note, I'd suggest you not hide some of the functionality behind menu (Bring forward, Send backward, ...). There is plenty of space in the upper menu and it might be better if the user saw these buttons directly and be able to manipulate them with one click.

Figurepool is indeed built with Raphael from scratch. I'm also using JointJS though, a diagramming lib that I built some time ago. My goal is to build a mixture of vector graphics and diagramming tool.

You're absolutely right about the "Save & Sign up" button. Will do it soon...

That's a great suggestion. Putting it on the list of the next features to be done...

Thanks! A full-screen mode is in place but not in the demo. You'd have to sign-up (free) to get the editor with fullscreen capability.

Another batch of screenshots revealed. Look at how easy it is to search and embed images and WebPage screenshots into your graphics and diagrams.