Elena Torró
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 Penpot
Pablo Ruiz-Muzquiz
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 Burleigh
Andrew Burnett-Thompson, David Burleigh
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 Rabouw
Chris Heilmann, Daniel Cranney & Rowdy Rabouw
Coffee with Developers - Cassidy Williams -
Cassidy Williams
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 Rubbish
Chris Heilmann, Daniel Cranney and David Letorey
From learning to earning
Jobs that call for the skills explored in this talk.


![Senior Software Engineer [TypeScript] (Prisma Postgres)](https://wearedevelopers.imgix.net/company/283ba9dbbab3649de02b9b49e6284fd9/cover/oKWz2s90Z218LE8pFthP.png?w=400&ar=3.55&fit=crop&crop=entropy&auto=compress,format)

Senior Software Engineer [TypeScript] (Prisma Postgres)
Prisma
Remote
Senior
Node.js
TypeScript
PostgreSQL







