We just settled the DOM-based vs WebGPU canvas debate. This is our WebGPU canvas rendering ~7,000 real HTML/CSS frames with over 2 million elements, at 120 fps. And it's not just static designs. Every frame runs your full app so you can click around etc. We built our own... HTML renderer that supports every single CSS property (blurs, shadows, gradients, 3D transforms, you name it). We have full parity with chrome's own renderer! This is possible because we own the entire pipeline. Our custom bundler takes almost any codebase and splits out its HTML, CSS and JS that is optimized for our canvas. We basically built a mini browser, in Rust, running inside your browser. Two years of infra work compounding and coming together finally 🥲show more

and here is open source version of it

ahh this is super cool. The api is p nice as well

@berkant_thedev do you guys use html-in-canvas ?

@eminimnim i do yes

this is dessn btw

Do you think this would also affect browser based video editing and a positive way?

yes!

Expand. If I were to, let's say, make you a CTO of an imaginary company that was trying to be the Figma of video editing, how would you approach a video editing platform from a tech stack standpoint? I'm just curious to hear a technically minded opinion.

hmm i would work backwards from the problem. the past two years of dessn was focused on getting a real codebase to run on the canvas and we focused on that we actually got normal html/css to be performant enough for most users before building our own renderer (custom renderer wasn't motivated by just performance btw. There's some stuff we want to do that's only possible with custom renderer) but I would try to see what kind of video editing you are aiming for. Like product/motion design vs other stuff. I know you can go really really far with just web stuff fwiw jitter has built their own renderer as well

I mainly edit on large multicam shows in Hollywood. Think shows that have up to a petabyte of raw footage that’s then compressed to a proxy mezzanine codec and then put on large on premise storage for collaboration purposes. I would love to chat sometime and exchange notes on my thesis and prototype. Would love your opinions.

That's fkin insane nim! But I can feel the performance everyday now. It's sooooo fast. Also I can't believe you asked me if it needed to be more performant LMAO

haha perf optimization work is so much fun. every ms you drop is like a dopamine hit. once you start looking at optimizing, it's hard to stop at good enough

This is incredible. What's it like for selecting high numbers of DOM elements? (Not just iframes)

is this real?

dafuq, how!? I would have guessed image caching with only starting the iframe content on interaction. I don't believe you, won't believe, can't believe, want to believe.

we did do image caching but only for very large pages. the problem with image caching is that you need to switch seamlessly once the user starts interacting. For example resizing doesn't work and selecting elements with images. btw one of the tricks is that you can simplify/rewrite a lot of html/css to make rendering easier on the engine. you don't have to support every property if you can convert it into an equaivalent but simpler markup (obvioulsy doing it in a way that doesn't fuck up layout/output is a big challenge and we have very complicated evals/tests to do this well)

When does this ship? You know I'm all up in dev tools once it does.

we are rolling this out to customers in the next few days. Goal is full rollout next week! Will holler once its fully live.

Can this just become... "the browser"? Please?

Does this work only with web based codebases? Or could one use it as an Figma alternative für desktop uis as well?

was there ever actually a debate? super cool btw, nice work

That's pretty impressive, I put a small game that I was working on for several days, and it was able to render something! UI part rendered correctly; the WebGL part exploded a lot. Really impressive. I know how hard it is to do a proper canvas. I wish you luck with your project!

Incredible engineering, 120 FPS with millions of elements is impressive work

👑🤌

Did you plan to open source this? 🤣

hmm

All great minds think alike 😂😂😅

Occasionally, you find a gem of innovation on social media like this

Two years of infrastructure work finally paying off.

This is CRAZY

That is nuts

That's quite impressive.

unbelievable

Incredible engineering turning ambitious ideas into reality

👀 @amihai

siiiick

Would it kill my battery in 10 minutes?

This is very impressive, nice work.

whoa this is nuts

damn

Wow... this is a very different way of building a design tool thant I would've thought of. This is wildly ambitious.

really impressive!

WebGPU 能跑出这么多帧很厉害！也很好奇在不同设备上的表现和无障碍支持。

I need this subagent swarm interface

🤯

How do you have full feature parity? LadyBird has not been able to pull this off man.

what the heck actually insane