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 · World Congress 2024

2:04 min

Advancing design tools for modern frontend development requirements

Kris Rasmussen Kris Rasmussen +1 · World Congress 2024

58 sec

Boosting Figma rendering performance by targeting direct WebAssembly execution

Önder Ceylan Önder Ceylan · World Congress 2024

More from Coffee With Developers

Using Agents to Curate the Content You See Online - Dan Gish thumbnail
12:47
5 days ago

Using Agents to Curate the Content You See Online - Dan Gish

Dan Gish

AI Vector Search at Scale - Ewa Szyszka - Ewa Szyszka thumbnail
11:14
5 days ago

AI Vector Search at Scale - Ewa Szyszka - Ewa Szyszka

Ewa Szyszka

What is Cross-Origin Storage - Thomas Steiner thumbnail
34:51
5 days ago

What is Cross-Origin Storage - Thomas Steiner

Thomas Steiner

Women in AI - Nalini Garg thumbnail
42:19
6 days ago

Women in AI - Nalini Garg

Nalini Garg

Agents and People Dynamics in Shared Chats - Sam Liu thumbnail
37:41
13 days ago

Agents and People Dynamics in Shared Chats - Sam Liu

Sam Liu

Why Token Reduction Isn’t Cost Reduction - Dave Anderson & Sarel Weinberger, PhD. thumbnail
41:09
19 days ago

Why Token Reduction Isn’t Cost Reduction - Dave Anderson & Sarel Weinberger, PhD.

Dave Anderson, Sarel Weinberger, Phd

Upcoming sessions on this topic

Open session

World Congress 2026 North America

September 23, 2026 · 14:20–14:50

Stage 2

Build Interactive Copilot Experiences with Canvas Extensions

James Clancey

Principal Product Manager, GitHub

James Clancey
Open session

World Congress 2026 North America

September 24, 2026 · 10:20–10:50

Stage 1

The Browser Is Becoming an AI Runtime

Ajit Varma, Will Bryk

Ajit Varma
Will Bryk
Open session

World Congress 2026 North America

September 25, 2026 · 16:50–17:20

Stage 1

Honey, look! I vibe-coded an OS!

Ian Smith

CTO, LYOS

Ian Smith
Open session

World Congress 2026 North America

September 24, 2026 · 11:00–11:30

Stage 6

Accelerating development and managing agents with the GitHub Copilot app

Christopher Harrison

Senior Developer Advocate, GitHub

Christopher Harrison
Open session

World Congress 2026 North America

September 25, 2026 · 15:30–16:00

Stage 6

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

September 24, 2026 · 16:10–16:40

Outdoor Stage

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

Simon Auer

Organizer of flutter vienna meetup and CEO of marqably

Simon Auer

Related videos

Building Collaborative Open Source tools for Developers and Designers - Pablo Ruiz-Muzquiz from Penpot thumbnail
56:24
Coffee With Developers • over 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 • 4 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 • 5 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 • 7 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
World Congress 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.