tcldr

Does anyone have any resources that go deep into the stack/architecture used by the Figma desktop/web app?

I'm not so interested in the server based syncing/CRDTs side of things (great as that is) but more the layers that make up the web/desktop app.

What I'm particularly interested in is the roles and responsibilities across the various layers.

My understanding is that the app container is written in react and hosted via a browser or within an electron app. Then, most of the business logic is delegated to a WASM core.

However, my understanding of where the boundaries lie and how the various layers communicate are a bit fuzzy.

For example, which components are part of the Web DOM and which components are driven by Web GL? I'm guessing everything but the canvas (so menus, palettes, cursors) is part of the HTML DOM?

Then, business logic wise, how much work is done within the react app wrapper vs. the WASM core? Is the react layer used strictly for hosting the WASM core and rendering the UI, or does it take part in some of the business logic responsibilities also.

Would love to read or watch a deep dive into this if it exists somewhere.