Penpot's new rendering engine replaces SVG with a canvas-based approach to solve performance bottlenecks in large, complex design files.
The new engine uses a custom tiling system with viewport culling and tile caching to efficiently render only what's visible on screen.
State is managed manually outside the DOM by serializing data into a binary format and passing it to a Rust backend via WebAssembly.
Replicating complex features like multiple text strokes requires creative solutions using blend modes and surfaces, as they are not standard in the Skia library.
The engine tackles difficult text rendering problems like selection and glyph placement, using a consistent font fallback for emojis to avoid cross-platform inconsistencies.
The team is learning Rust and WebAssembly together while building the new renderer in the open, documenting their progress publicly for community contribution.
The client-side rendering architecture ensures performance doesn't degrade with more collaborators, and better browser performance tooling would further aid development.
56:24Pablo Ruiz-Muzquiz
1:02:33Chris Heilmann, Daniel Cranney & Elena Torró
14:44Chris Heilmann
1:13:35Chris Heilmann & Daniel Cranney & Rowdy Rabouw
44:22Christian Liebel
1:15:44Chris Heilmann & Daniel Cranney and David Letorey
59:03Florian Rappl
27:01Shem Magnezi
Jobs that call for the skills explored in this talk.
Speech Processing Solutions
Vienna, Austria
doinstruct Software GmbH
Berlin, Germany
JO Media Software Solutions GmBh
Brunn am Gebirge, Austria
Mindpeak