WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
Coffee With Developers • Jun 23, 2025

Rendering Design Software in the Browser at Penpot

Elena Torró

Deep SVG hierarchies severely throttle browser performance. See how Penpot bypasses the DOM, utilizing Rust, WebGL, and Skia to unlock massive rendering speeds for their open-source design tool.

Pause
Mute Enter Fullscreen
#1 about 5 min

Migrating core design tools from SVG to HTML canvas

Replacing standard document object models with high-performance pixel drawing increases overall interaction speeds significantly.

#2 about 5 min

Managing layout updates inside tiled raster rendering architectures

Dividing vast drawing areas into invisible caching zones prevents expensive recalculations during minor interface actions.

#3 about 4 min

Translating memory states via binary formats to Skia

Serializing color definitions into raw buffer chunks directly feeds open-source rendering libraries efficiently.

#4 about 4 min

Balancing design layer granularity and visual color definitions

Parsing multi-layered design attributes into specific JSON representations preserves color accuracy across component hierarchies.

#5 about 6 min

Generating WebGL shaders manually for complex multiple shape strokes

Overlaying identical text paths via algorithmic blending tricks effectively simulates unsupported multi-border stylistic effects.

#6 about 5 min

Calculating text boundaries and glyph intersections across interactive canvases

Decoding raw typography metrics precisely identifies dynamic selection ranges across varying paragraph configurations.

#7 about 4 min

Synchronizing native emoji fallback behaviors utilizing custom font stacks

Resolving platform discrepancies between visual characters requires overriding default browser behaviors during PDF exports.

#8 about 4 min

Replicating trigonometry logic for complex vector and path differences

Supporting obscure interior rounding geometries requires matching deeply rooted pathing math found naturally in traditional SVGs.

#9 about 6 min

Opening ongoing Clojure and Rust system developments to contributors

Encouraging early public oversight exposes evolving repository layouts to valuable external testing architectures before stable releases.

#10 about 4 min

Accelerating specialized framework syntax learning via generative AI

Deploying artificial intelligence alongside highly specific library bindings expedites complex boilerplate coding patterns.

#11 about 5 min

Scaling collaborative design canvases using decoupled database synchronizations

Offloading heavy incoming bitmaps directly to backend nodes prevents local layout lag during high-concurrency editor interactions.

#12 about 7 min

Expanding browser profiling utilities for advanced layout regression architectures

Simplifying native inspection features deeply empowers software maintainers executing strict memory optimizations against volatile graphic specifications.

Matching moments

9:00 min

Managing open source community technical contributions and architectures

Pablo Ruiz-Muzquiz · Coffee With Developers

2:15 min

Transitioning native desktop graphics implementations to the web

Chris Heilmann +3 · LIVE

2:44 min

Evaluating AI tooling and design platforms for developers

Chris Heilmann +2 · LIVE

2:38 min

Overcoming technical challenges of browser-based design environments

Kris Rasmussen Kris Rasmussen +1 · WWC 2024

2:04 min

Advancing design tools for modern frontend development requirements

Kris Rasmussen Kris Rasmussen +1 · WWC 2024

58 sec

Boosting Figma rendering performance by targeting direct WebAssembly execution

Önder Ceylan Önder Ceylan · WWC 2024

More from Coffee With Developers

What to Do About Hackathons in the Time of Agents - Mike Swift thumbnail
46:03
9 days ago

What to Do About Hackathons in the Time of Agents - Mike Swift

Mike Swift

Moving from Playing with AI to Implementing AI - Lee Stott thumbnail
18:43
13 days ago

Moving from Playing with AI to Implementing AI - Lee Stott

Lee Stott

Evals vs. Evil - AI and Package Security - Laurie Voss thumbnail
16:57
22 days ago

Evals vs. Evil - AI and Package Security - Laurie Voss

Laurie Voss

Burning Satellites, Talking Plants and Agents Hiring Each Other - Fake or News with Matt Zeunert thumbnail
4:57
27 days ago

Burning Satellites, Talking Plants and Agents Hiring Each Other - Fake or News with Matt Zeunert

Matt Zeunert

Web Scraping, AI Agents, and the Future of Open Source - Kevin Lewis (Apify) thumbnail
40:29
about 2 months ago

Web Scraping, AI Agents, and the Future of Open Source - Kevin Lewis (Apify)

Making Teaching Code Less Academic and More Market-Ready - Peter Ruppel thumbnail
32:22
about 2 months ago

Making Teaching Code Less Academic and More Market-Ready - Peter Ruppel

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Honey, look! I vibe-coded an OS!

Ian Smith

CTO, LYOS

Ian Smith
Open session

World Congress 2026 North America

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

When Humans Stop Writing Code: Rethinking Languages, Compilers, and Responsibility

Simon Auer

Organizer of flutter vienna meetup and CEO of marqably

Simon Auer
Open session

World Congress 2026 North America

Fast by Design: A Masterclass in High-Performance Web Engineering

Aaron Grogg

Senior web developer, committed to improving the user experience by improving web performance

Aaron Grogg
Open session

World Congress 2026 North America

GitHub’s Team X-Ray: Your Repository Knows More About Your Team Than Your Team Does

Andrea Griffiths

Senior Developer Advocate

Andrea Griffiths
Open session

World Congress 2026 North America

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia

Related videos

Building Collaborative Open Source tools for Developers and Designers - Pablo Ruiz-Muzquiz from Penpot thumbnail
56:24
Coffee With Developers • about 1 year ago

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

Pablo Ruiz-Muzquiz

WeAreDevelopers LIVE - Speeding up with WebGPU thumbnail
57:38
LIVE • 3 months ago

WeAreDevelopers LIVE - Speeding up with WebGPU

Chris Heilmann, Daniel Cranney, Sylwia Laskowska

WeAreDevelopers LIVE - Rendering in the Browser, The State of CSS and Accessibility and more thumbnail
1:02:33
LIVE • about 1 year ago

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

Chris Heilmann, Daniel Cranney, Elena Torró

WeAreDevelopers LIVE - CSS is DOOMed thumbnail
1:01:17
LIVE • 4 months ago

WeAreDevelopers LIVE - CSS is DOOMed

Chris Heilmann, Daniel Cranney, Niels Leenheer

WeAreDevelopers LIVE – From JavaScript to WebAssembly, High-Performance Charting and More thumbnail
1:09:56
LIVE • 6 months ago

WeAreDevelopers LIVE – From JavaScript to WebAssembly, High-Performance Charting and More

Chris Heilmann, Daniel Cranney, Andrew Burnett-Thompson, David Burleigh

Making of paint.js.org—a Web Component-based Productivity PWA thumbnail
44:22
WWC 2022 • about 4 years ago

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

Christian Liebel

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.