[nikkwong]

I think it may be harder than you're leading on. Figma has put an awful lot of work into it's vector rendering system. They have state of the art compositing, strokes, fills, shadows, and importantly boolean operations on vectors that basically no other library has done correctly. When building a vector rendering tool you have to worry about all of these 2d path problems like fill rules, corner radiis, and path direction that are very complicated to work out. Figma also has best in class shape builders, and this proprietary drawing solution called vector networks which is, eh, kind of cool.

But they've done all of this work to get this far and have basically abandoned their pen tool before it was able to be used as an actual tool for drawing. It has all of the underlying technical aspects worked out but it is a UI nightmare to use—it's painfully user unfriendly and doesn't have a curvature tool, an easy way to edit/delete nodes, etc. It has such great potential, and is so close, but Figma has chosen to go another direction.

Anyways, the only rendering engine that I am aware of that rivals Figma's is Google's Skia (which in turn is the renderer for Canvas itself in most browsers I believe) but it's 20+ years old & painfully low level.

You could theoretically do whatever you want on Skia and port it to wasm to get it into the browser, but it doesn't itself have any tools that you'd want for drawing, or creating anything that looks anything like CSS/HTML.

Literally the second someone releases something high level enough in this area I am going to build an animation library on top of it. I've had the desire to build a library that could programmatically create and edit vectors for a decade now, but there's still nothing easy enough to work with to incentivize me.

[jitl]

Skia is available for JS/WASM called “CanvasKit”, see https://skia.org/docs/user/modules/canvaskit/

It has text shaping & editing (might have helped OP) and can play back Lottie animations

It is developed by Google in part for Flutter, which uses CanvasKit by default when you compile Flutter apps for web.

https://docs.flutter.dev/platform-integration/web/renderers

[nikkwong]

This is cool, but still looks painfully low level. A library one level above this would be the sweet spot that would allow people to build killer stuff on top of. (Sort of like what OPs are doing)

[jitl]

Oh I agree. I guess I was just trying to say someone already put in the leg work and supports Skia for WASM, that’s all. I guess my dream pathway would be to combine Tldraw’s high level canvas editor API with Skia/WebGL backend; their current backend uses canvas a bit but is mostly SVG and HTML.

[izakfr]

We actually looked into Tldraw. I read a lot of the source code and their editor is impressive. We ran into performance problems at around 1000 nodes when panning and zooming. After seeing that, we decided to make the jump to WebGL.