We just released Bloom, new way to create interactive diagrams and visual explanations. Creating interactive diagrams usually requires a programmer to write tedious event handling, collision detection, and tree update code. In Bloom, you simply tell the library what properties you want to maintain and the system does the hard work for you. Read this blog post to see cool example diagrams and learn more about Bloom.

Oh that's super cool. Is it the same solver as used in Penrose, or something new? And, any plans to allow folks to use this without taking a dependency on React? Also… is this project open source? I couldn't find any links to view the source code.

@Ivan Reese looks like the source is here! https://github.com/penrose/penrose/tree/main/packages/bloom

@Ivan Reese it's based on the same optimizer, but with one major tweak. If you run the vanilla Penrose optimizer, shapes that you are not interacting with tend to jump disconcertingly. We add what's called a "lasso term" so shape continuity is preserved during interaction.

This looks great, something I have been wanting for years! Not just for the interactivity, the constraint-based diagram construction on its own is something I find very useful. But... React? No. I need components that I can combine as I want. Anything forcing me to use a single master framework is too much of a constraint.

Based on a quick look at the code, looks like it should be pretty easy (albeit undocumented) to use this without React.

You definitely do not have to use React. @Konrad Hinsen what are you hoping to use it for? Would you be interested in talking to someone on our team to help you out?

@Josh Sunshine My use case would be illustrations for scientific articles or courses. These illustrations would have to be embeddable in plain HTML pages, e.g. drawing on a canvas. A static export to SVG would be a plus, both for PDF exports and for people browsing without JS support.

If you are primarily interested in static diagrams then vanilla Penrose may be a better fit.

I am interested in both!

@Konrad Hinsen we don't currently provide an explicit SVG export/capture button. However, if you are viewing a website with a bloom interactive diagram, you can use the chrome developer tools to capture the current SVG source at any moment of interaction. That SVG source will be a "static SVG."

@Josh Sunshine Thanks, that’s good enough for occasional use.