Elena Torró

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.

Rendering Design Software in the Browser at Penpot
#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.

Related jobs
Jobs that call for the skills explored in this talk.

Featured Partners

Related Videos

Building Collaborative Open Source tools for Developers and Designers - Pablo Ruiz-Muzquiz from Penpot56:24

Building Collaborative Open Source tools for Developers and Designers - Pablo Ruiz-Muzquiz from Penpot

Pablo Ruiz-Muzquiz

WeAreDevelopers LIVE - Rendering in the Browser, The State of CSS and Accessibility and more1:02:33

WeAreDevelopers LIVE - Rendering in the Browser, The State of CSS and Accessibility and more

Chris Heilmann, Daniel Cranney & Elena Torró

Uncharted Territories of Web Performance - Andrew Burnett-Thompson and David Burleigh49:57

Uncharted Territories of Web Performance - Andrew Burnett-Thompson and David Burleigh

Andrew Burnett-Thompson, David Burleigh

Catching up on the basics you don't really need that much code14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw1:13:35

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw

Chris Heilmann, Daniel Cranney & Rowdy Rabouw

Coffee with Developers - Cassidy Williams - 44:20

Coffee with Developers - Cassidy Williams -

Cassidy Williams

Making of paint.js.org—a Web Component-based Productivity PWA44:22

Making of paint.js.org—a Web Component-based Productivity PWA

Christian Liebel

Using all the HTML, Running State of the Browser and "Modern" is Rubbish1:15:44

Using all the HTML, Running State of the Browser and "Modern" is Rubbish

Chris Heilmann, Daniel Cranney and David Letorey

From learning to earning

Jobs that call for the skills explored in this talk.

Rust and GoLang

Rust and GoLang

NHe4a GmbH
Karlsruhe, Germany

Remote
€55-65K
Intermediate
Senior
Go
Rust