> Markdown version of [/videos/1353-rendering-design-software-in-the-browser-at-penpot?t=2712](https://www.wearedevelopers.com/videos/1353-rendering-design-software-in-the-browser-at-penpot?t=2712). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Rendering Design Software in the Browser at Penpot

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.

- **Speakers:** Elena Torró
- **Event:** Coffee With Developers
- **Published:** June 23, 2025
- **Duration:** 52:04
- **URL:** https://www.wearedevelopers.com/videos/1353-rendering-design-software-in-the-browser-at-penpot

## Summary

Penpot is overhauling its open-source design tool by replacing its traditional DOM and SVG-based renderer with a high-performance WebGL and Canvas architecture. Because deep hierarchies of SVG nodes become extremely expensive to recalculate during live interactions, the new engine relies on a custom tile-based rendering system. By breaking the canvas into isolated surfaces that are individually cached, the tool drastically increases the number of shapes users can manipulate simultaneously. If an object rests outside the user's viewport, its intersection bounds prevent it from rendering at all, ensuring a massive performance boost over standard web APIs.

Under the hood, this pivot leverages WebAssembly and Rust to manage application state alongside Google’s Skia 2D graphics library. A primary engineering complexity involves bridging web application interactions with the Rust backend; Penpot manages this by manually serializing render states—like colors and shape coordinates—into binary buffers that Skia can rapidly process. Adopting this bare-metal tech stack exposes missing features in standard graphics APIs, forcing the engineering team to deploy custom blending modes and shaders to support expected designer capabilities, such as rendering multiple strokes on text, handling inner corner rounding, and adding images onto borders.

Perfecting the UI layer comes with immense edge-case friction, particularly concerning text manipulation and cross-platform emoji compatibility. Browsers naturally fall back on native OS emoji fonts, but custom Skia engines lack that embedded context, which historically disrupts design accuracy during headless browser PDF exports. By strictly controlling font stacks and glyph positioning rather than relying on browser fallbacks, visual fidelity is strictly maintained across devices. Interestingly, despite the complexity of these challenges, AI tools like GitHub Copilot proved mostly unhelpful for the team due to the highly specialized interplay of Clojure, Rust, WebGL, and custom Skia bindings. Ultimately, building transparently in the open allows the team to debug these obscure browser rendering constraints publicly while isolating multi-user collaboration to backend synchronization so local rendering speed remains completely unhindered.

**Keywords:** webgl rendering architecture, webassembly graphics engine, rust state management, skia 2d graphics library, tile-based canvas rendering, dom vs canvas performance, open source design tools, binary memory serialization, custom webgl shaders, cross-platform emoji compatibility, headless browser pdf export, text stroke rendering, collaborative platform synchronization, niche framework constraints, browser ui limitations

## Chapters

1. **Migrating core design tools from SVG to HTML canvas** (00:11) — Replacing standard document object models with high-performance pixel drawing increases overall interaction speeds significantly.
1. **Managing layout updates inside tiled raster rendering architectures** (04:45) — Dividing vast drawing areas into invisible caching zones prevents expensive recalculations during minor interface actions.
1. **Translating memory states via binary formats to Skia** (08:56) — Serializing color definitions into raw buffer chunks directly feeds open-source rendering libraries efficiently.
1. **Balancing design layer granularity and visual color definitions** (12:06) — Parsing multi-layered design attributes into specific JSON representations preserves color accuracy across component hierarchies.
1. **Generating WebGL shaders manually for complex multiple shape strokes** (15:51) — Overlaying identical text paths via algorithmic blending tricks effectively simulates unsupported multi-border stylistic effects.
1. **Calculating text boundaries and glyph intersections across interactive canvases** (21:10) — Decoding raw typography metrics precisely identifies dynamic selection ranges across varying paragraph configurations.
1. **Synchronizing native emoji fallback behaviors utilizing custom font stacks** (25:31) — Resolving platform discrepancies between visual characters requires overriding default browser behaviors during PDF exports.
1. **Replicating trigonometry logic for complex vector and path differences** (29:16) — Supporting obscure interior rounding geometries requires matching deeply rooted pathing math found naturally in traditional SVGs.
1. **Opening ongoing Clojure and Rust system developments to contributors** (32:20) — Encouraging early public oversight exposes evolving repository layouts to valuable external testing architectures before stable releases.
1. **Accelerating specialized framework syntax learning via generative AI** (37:47) — Deploying artificial intelligence alongside highly specific library bindings expedites complex boilerplate coding patterns.
1. **Scaling collaborative design canvases using decoupled database synchronizations** (41:01) — Offloading heavy incoming bitmaps directly to backend nodes prevents local layout lag during high-concurrency editor interactions.
1. **Expanding browser profiling utilities for advanced layout regression architectures** (45:12) — Simplifying native inspection features deeply empowers software maintainers executing strict memory optimizations against volatile graphic specifications.

## Related Moments

- [Managing open source community technical contributions and architectures](https://www.wearedevelopers.com/videos/1345-building-collaborative-open-source-tools-for-developers-and-designers-pablo-ruiz-muzquiz-from-penpot) (from "Building Collaborative Open Source tools for Developers and Designers - Pablo Ruiz-Muzquiz from Penpot")
- [Transitioning native desktop graphics implementations to the web](https://www.wearedevelopers.com/videos/1794-wearedevelopers-live-from-javascript-to-webassembly-high-performance-charting-and-more) (from "WeAreDevelopers LIVE – From JavaScript to WebAssembly, High-Performance Charting and More")
- [Evaluating AI tooling and design platforms for developers](https://www.wearedevelopers.com/videos/1340-wearedevelopers-live-performance-and-ai-social-media-decline-developer-events-and-more) (from "WeAreDevelopers LIVE - Performance and AI?, Social Media decline, Developer Events and more")
- [Overcoming technical challenges of browser-based design environments](https://www.wearedevelopers.com/videos/982-fireside-chat-with-kris-rasmussen-cto-at-figma) (from "Fireside Chat with Kris Rasmussen, CTO at Figma")
- [Advancing design tools for modern frontend development requirements](https://www.wearedevelopers.com/videos/982-fireside-chat-with-kris-rasmussen-cto-at-figma) (from "Fireside Chat with Kris Rasmussen, CTO at Figma")
- [Boosting Figma rendering performance by targeting direct WebAssembly execution](https://www.wearedevelopers.com/videos/1149-webassembly-revolution-elevating-javascript-s-reach-and-performance) (from "WebAssembly Revolution: Elevating JavaScript's Reach and Performance")

## Related Articles

- [Declarative Design and a fresh take on collaboration with developers](https://www.wearedevelopers.com/magazine/595-declarative-design-and-a-fresh-take-on-collaboration-with-developers)
- [Dev Digest 129 - Now that's what I call private data!](https://www.wearedevelopers.com/magazine/468-dev-digest-129-now-that-s-what-i-call-private-data)
- [Dev Digest 118 - not a total recall](https://www.wearedevelopers.com/magazine/452-dev-digest-118-not-a-total-recall)
- [Dev Digest 133 - Back to Front](https://www.wearedevelopers.com/magazine/474-dev-digest-133-back-to-front)

## Related Jobs

- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/646086-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/639235-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/356601-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/679408-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/644637-remote-senior-full-stack-engineer) at **Edge Impulse**
- [Remote Senior Full-Stack Engineer](https://www.wearedevelopers.com/jobs/ext/683045-remote-senior-full-stack-engineer) at **Edge Impulse**