Rendering Design Software in the Browser at Penpot

SVG is too slow for complex design tools. Penpot is replacing it with a custom renderer built on Rust and WebAssembly for massive performance gains.

#1about 4 minutes

Moving from SVG to canvas for better performance

Penpot's new rendering engine replaces SVG with a canvas-based approach to solve performance bottlenecks in large, complex design files.

#2about 4 minutes

Optimizing canvas rendering with a tiling system

The new engine uses a custom tiling system with viewport culling and tile caching to efficiently render only what's visible on screen.

#3about 3 minutes

Managing application state with Rust and WebAssembly

State is managed manually outside the DOM by serializing data into a binary format and passing it to a Rust backend via WebAssembly.

#4about 10 minutes

Implementing advanced design features like multiple strokes

Replicating complex features like multiple text strokes requires creative solutions using blend modes and surfaces, as they are not standard in the Skia library.

#5about 10 minutes

Solving text interaction and emoji rendering challenges

The engine tackles difficult text rendering problems like selection and glyph placement, using a consistent font fallback for emojis to avoid cross-platform inconsistencies.

#6about 9 minutes

Building an open source renderer with a new tech stack

The team is learning Rust and WebAssembly together while building the new renderer in the open, documenting their progress publicly for community contribution.

#7about 11 minutes

Scaling collaboration and improving developer tooling

The client-side rendering architecture ensures performance doesn't degrade with more collaborators, and better browser performance tooling would further aid development.