New Penpot Render Engine  ## Metadata - Author: [[Penpot]] - Full Title: New Penpot Render Engine - Category: #articles - Document Note: --- tags: [Penpot, Render engine, WebAssembly] author: [MISSING] source: [Merlin AI] reference: [https://www.youtube.com/watch?v=ciG0U5jJtHY] date created: {{date:YYYY-MM-DD}} {{time:HH:mm}} --- # 🏷️ Title: New Penpot render engine ## 🧰 Action Inbox - [H1] Confirm Skia adoption with commit link — forum thread. [oai_citation:0‡Penpot Community](https://community.penpot.app/t/its-time-for-penpot-to-almost-move-away-from-the-dom/6437?page=2&utm_source=chatgpt.com) - [H2] Note WASM constraints for plugins — MDN overview. [oai_citation:1‡MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Fundamentals?utm_source=chatgpt.com) - [H3] Request tile-system dev notes — forum performance post. [oai_citation:2‡Penpot Community](https://community.penpot.app/t/background-blur-effect-please/4891?utm_source=chatgpt.com) - [H4] Track bug-fix migration policy — forum thread. [oai_citation:3‡Penpot Community](https://community.penpot.app/t/its-time-for-penpot-to-almost-move-away-from-the-dom/6437?page=2&utm_source=chatgpt.com) - [H5] Document font fallback behavior — prepare test matrix. (Video link inaccessible to tool; based on provided transcript.) - [H7] Watch background blur rollout — subscribe to renderer update thread. (Video link inaccessible to tool; based on provided transcript.) - [H8] Plan for public beta testing — create feedback form. [oai_citation:4‡Penpot Community](https://community.penpot.app/t/background-blur-effect-please/4891?utm_source=chatgpt.com) - [H2] Educate devs on WASM security model — MDN reading task. [oai_citation:5‡MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Fundamentals?utm_source=chatgpt.com) ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - Include links cited in or relevant to the article. ## 📝 Summary - Penpot is shipping a new render engine. It replaces DOM/SVG bottlenecks with Skia and WebAssembly. [oai_citation:6‡Penpot Community](https://community.penpot.app/t/its-time-for-penpot-to-almost-move-away-from-the-dom/6437?page=2&utm_source=chatgpt.com) - Skia underpins Chrome and Flutter, which signals maturity. [oai_citation:7‡Android Git Repositories](https://android.googlesource.com/platform/external/skia/%2B/fb4b77f/site/index.md?utm_source=chatgpt.com) - WebAssembly brings near-native speed in browsers. This changes performance ceilings. [oai_citation:8‡MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Fundamentals?utm_source=chatgpt.com) - The team adds a tile system, font fallback, and export improvements. They aim for quality and consistency. (Video link inaccessible to tool; based on provided transcript.) - Bottom line: Expect smoother rendering, better exports, and a public beta soon. [oai_citation:9‡Penpot Community](https://community.penpot.app/t/background-blur-effect-please/4891?utm_source=chatgpt.com) ## 📖 Main Content - Penpot moves past DOM/SVG limits toward a canvas+Skia path. Forum posts describe an experimental WASM engine and performance goals. [oai_citation:10‡Penpot Community](https://community.penpot.app/t/its-time-for-penpot-to-almost-move-away-from-the-dom/6437?page=2&utm_source=chatgpt.com) - Skia is a battle-tested 2D library. It powers Chrome, Android, and Firefox derivatives, and sits inside Flutter. This reduces risk. [oai_citation:11‡Android Git Repositories](https://android.googlesource.com/platform/external/skia/%2B/fb4b77f/site/index.md?utm_source=chatgpt.com) - WebAssembly executes sandboxed binaries in browsers. MDN notes near-native or native performance in some contexts. This justifies the switch. [oai_citation:12‡MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Fundamentals?utm_source=chatgpt.com) - A tile system avoids heavy image caching. The forum focus on canvas engine speed aligns with this approach. [oai_citation:13‡Penpot Community](https://community.penpot.app/t/background-blur-effect-please/4891?utm_source=chatgpt.com) - Planned UX wins include reliable font fallback and consistent exports. That removes OS and headless-browser variability. (Video link inaccessible to tool; based on provided transcript.) - A public beta and iterative bug-fix migration are expected. Opt-in testing is hinted in forum updates. [oai_citation:14‡Penpot Community](https://community.penpot.app/t/background-blur-effect-please/4891?utm_source=chatgpt.com) ### 🗒️ Notes #### ⏱️ [00:14](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=14) Context and rationale - The speaker frames SVG performance limits and the need to evolve. ### [H1] Penpot adopts Skia for rendering > [!quote] [New Penpot render engine](https://www.youtube.com/watch?v=ciG0U5jJtHY) by an unnamed author via [[Merlin AI]]. Published [MISSING]. Accessed {{date:YYYY-MM-DD}}. > “We decided to use the Skia library which is a 2D graphics open source library…” Skia offers broad feature coverage and maturity. Flutter and Chrome use Skia. [oai_citation:15‡Android Git Repositories](https://android.googlesource.com/platform/external/skia/%2B/fb4b77f/site/index.md?utm_source=chatgpt.com) [view highlight](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=61) #xref #articleseed ID:rw_[MISSING] #### ⏱️ [01:01](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=61) Technology choices ### [H2] Engine uses WebAssembly for speed > [!quote] [New Penpot render engine](https://www.youtube.com/watch?v=ciG0U5jJtHY) by an unnamed author via [[Merlin AI]]. Published [MISSING]. Accessed {{date:YYYY-MM-DD}}. > “and we are also using web assembly which is like a lowlevel like assembly language and it runs let's say like near native performance directly on the browser.” WASM can achieve near-native performance in browsers. See MDN guidance. [oai_citation:16‡MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/Fundamentals?utm_source=chatgpt.com) [view highlight](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=95) #xref ID:rw_[MISSING] #### ⏱️ [01:50](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=110) Rendering pipeline changes ### [H3] Tile system replaces cached images > [!quote] [New Penpot render engine](https://www.youtube.com/watch?v=ciG0U5jJtHY) by an unnamed author via [[Merlin AI]]. Published [MISSING]. Accessed {{date:YYYY-MM-DD}}. > “we have built our own tile system which um is developed directly in within the render.” Tiles reduce redraw cost and memory churn. Forum posts target canvas speed. [oai_citation:17‡Penpot Community](https://community.penpot.app/t/background-blur-effect-please/4891?utm_source=chatgpt.com) [view highlight](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=120) #xref #articleseed ID:rw_[MISSING] #### ⏱️ [02:44](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=164) Quality and frame rate ### [H4] Team fixes bugs in new renderer > [!quote] [New Penpot render engine](https://www.youtube.com/watch?v=ciG0U5jJtHY) by an unnamed author via [[Merlin AI]]. Published [MISSING]. Accessed {{date:YYYY-MM-DD}}. > “what we are doing is to fix them directly in the new render.” This avoids patch debt in the legacy path. It accelerates convergence. [oai_citation:18‡Penpot Community](https://community.penpot.app/t/its-time-for-penpot-to-almost-move-away-from-the-dom/6437?page=2&utm_source=chatgpt.com) [view highlight](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=211) #xref ID:rw_[MISSING] #### ⏱️ [03:31](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=211) Shadows, clipping, and text ### [H5] Penpot implements its own font fallback > [!quote] [New Penpot render engin - Summary: During Penpot Fest 2025, Elena Torró, Software Engineer at Penpot, explained why we are building a new Render Engine and offered technical tips into how we are approaching this ambitious project. She also revealed that the engine is just around the corner and announced an open beta, giving the community an opportunity to provide feedback and help shape its development. Penpot Fest 2025 | Better, together: Refining the designer-developer workflow. -- Penpot is the free open-source design tool for Design & Code collaboration. https://design.penpot.app​​ Penpot is ideal for product design: UI designs, prototypes, wireframes, mockups, webs, apps, and much more. Penpot allows a true collaboration and no handoff drama between designers and developers thanks to features like CSS Grid Layout, Flex Layout and Code Inspect. Designers get a professional, intuitive, powerful design tool with ground-breaking responsive layouts, design systems at scale. While developers get a design tool that expresses as code and provides ready-to-use code to develop faster. Penpot is the only one that can be web-based or self-hosted. The app works with open standards (SVG and CSS) avoiding vendor lock-in. Also, it enables teams the flexibility and control in their designs, thanks to the API and webhooks available. Penpot Community: https://community.penpot.app App: https://design.penpot.app​​ Help: https://help.penpot.app​ Contribute: https://github.com/penpot Penpot Fest: https://penpotfest.org Follow us: *Mastodon: https://fosstodon.org/@penpot/​ *Bluesky: https://bsky.app/profile/penpot.app *X: https://x.com/penpotapp *LinkedIn: https://www.linkedin.com/company/penpotdesign *Instagram: https://www.instagram.com/penpot.app/ *Github: https://github.com/penpot Penpot: Design as code. - URL: https://www.youtube.com/watch?v=ciG0U5jJtHY Okay. Did you listen to me well? My voice is a little bit off because yesterday I was having so much fun talking to all of you, so I'm sorry for that. Yeah, I'm Elena, and I'm working on the team that is building the new render engine, and I'm going to be talking about it today. So one year ago, we published this blog post, and we said that it's time for PEMPUK to move away almost from the DOM. And long story short, right now, our render is an SVE render, right, which is a standard, it works great, but in terms of performance, it doesn't scale that well. So that's why we needed to think of a different solution that works faster. So I'm going to get a little bit techy on this. I'm going to talk to you about the technologies that we are using. We decided to use the Skia library, which is a 2D graphics open source library that is widely used for, well, in many projects such as Chrome, Android, Flutter, and LibreOffice as well, if I remember correctly. So that's why we chose it, because it had, like, anything that we needed, so we didn't have to reinvent the wheel. And yeah, and the project is very mature. And we are also using WebAssembly, which is like a low-level assembly language, and it runs, let's say, near native performance directly on the browser. So it works like this. We can use directly the Skia functions that we are using for rendering different shapes directly from the browser through WebAssembly super fast. Okay, so what has this helped us to do? Well, basically, right now, our rendering system relies on, let's say, cached images when it comes to fixed performance bottlenecks. So we are not going to need that anymore because we have built our own tile system, which is developed directly within the render. So we don't have to, like, rely on external stuff for caching and for improving performance. And it has unlocked many things. So we have a couple of videos to compare, in this case, how the performance has improved. I don't know if we can, like, see the videos, but in any case, if we take a look, yeah, here it is. So this is the current render. So you can see that the quality of the image is not, like, super great. The frames per second are, like, a bit bumpy. So with the current one, if we take a look at it, we are going to see that it is not only, like, you know, you can see that it has a better quality. It's way smoother. It works faster as well. So, yeah, that's it. Okay. Okay. Of course, a lot of you have been asked about bugs or issues that we had. So what we are doing is to fix them directly in the new render. So, like, I don't know, shadows clipping and some stuff that we can, like, it makes no sense to fix it in the current render since we are developing a new one. So we are including them directly there. And I'm quite proud of this one because, you know, I love emoji. I think that most of us love emoji. And, you know, text rendering, it's hard. So if you see those images, we can see that the font that we are using is different. That is because our current render relies on the font fallback from the browser directly. So when you use PMPOT on different operating systems, what happens is that you are gonna see probably different stuff. And we wanted to identify that. So that's why we have implemented our own font fallback. And it also means that although we are now using a default emoji font, you can upload your own font and use it directly, which is kind of cool. And it also means that this is not longer going to happen because if you have tried to export files with emoji or with other symbols, that might happens because right now we are using a headless browser to render in those kinds of exports, which is also like a common way right now to do that kind of things. But now, since we are already using ASCIA, which exports also different image formats and so on, we can use that for exporting images. So you're not gonna see that anymore and you will always be exporting the same. And this means that we can also start adding more features to what we have. So we have a little video as well because one of the demanded features that we had was text to path. So you can like directly build your own icons on PMPOT. So yeah, I can see some excitement here. Yeah, and we will bring also the so demanded background blur filter as well. So, well, does it mean that there's anything that is gonna change? Well, actually, no, because we are keeping our core values, right? So you will be able to export your code just like we are doing right now. So the new render, it only affects visuals and the way you work with the application, nothing else. Everything is gonna be the same. You can still export into SVG. So we are being consistent. We are going to use the same data model. It doesn't affect our APIs or whatever. So yeah, don't worry about that. And you may be wondering, okay, so what's next? So the team is working hard on a lot of stuff, like, for example, integrating the text editor within the new render. But we can announce to you that in the upcoming weeks, we are going to publish a public video version. So you can all test it out. Yeah, and that's it. Thank you very much., New Penpot Render Engine, Penpot, 01k88j6wkeqe2nszj7kvp19vcc.