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.

Matching moments

Penpot's technical stack and contribution model
09:04 MIN

Penpot's technical stack and contribution model

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

Bringing designers into the open source ecosystem
06:01 MIN

Bringing designers into the open source ecosystem

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

Bridging paradigms with declarative design in a tool
04:09 MIN

Bridging paradigms with declarative design in a tool

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

Overcoming the technical challenges of a web-based tool
02:43 MIN

Overcoming the technical challenges of a web-based tool

Fireside Chat with Kris Rasmussen, CTO at Figma

Bridging the gap between designers and developers
03:26 MIN

Bridging the gap between designers and developers

WeAreDevelopers LIVE - Is Software Ever Truly Accessible?

Solving the historic designer and developer collaboration gap
03:00 MIN

Solving the historic designer and developer collaboration gap

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

A tour of creative code demos and useful developer tools
11:20 MIN

A tour of creative code demos and useful developer tools

WeAreDevelopers LIVE – PHP Is Alive and Kicking and More

Building collaborative design tools and the neo-brutalism trend
03:05 MIN

Building collaborative design tools and the neo-brutalism trend

Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2

Featured Partners

Related Videos

See all 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

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof49:20

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Kilian Valkhof

WeAreDevelopers LIVE – Keeping Up with Styles, Data & More1:16:52

WeAreDevelopers LIVE – Keeping Up with Styles, Data & More

Chris Heilmann, Daniel Cranney & Peter Kröner

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

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

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

Related Articles

View all articles
DC
Daniel Cranney
Dev Digest 159: AI Pipelines, 10x Faster TypeScript, How to Interview
Inside last week’s Dev Digest 159 . 🤖 How to use LLMs to help you write code ⚡ How much electricity does AI need? 🔒 Is your API secure? Learn all about hardening it… 🟦 TypeScript switches to go and gets 10 times faster 🖼️ An image cropper in your ap...
Dev Digest 159: AI Pipelines, 10x Faster TypeScript, How to Interview

From learning to earning

Jobs that call for the skills explored in this talk.

Software Engineer

Software Engineer

Code Healers LLC
Hinesville, United States of America

Remote
€40-50K
Intermediate
Senior
PHP
.NET
React
+2