YouTube Video ciG0U5jJtHY 🔗 **Source:** [YouTube Video ciG0U5jJtHY](https://www.youtube.com/watch?v=ciG0U5jJtHY&embeds_referring_euri=https%3A%2F%2Fpenpot.app%2F&source_ve_path=MjM4NTE&themeRefresh=1) > [!note]+ Document Notes > tags: [penpot, render-engine, skia, web-assembly] > author: Elena > source: Penpot > reference: https://www.youtube.com/watch?v=ciG0U5jJtHY > date created: 2024-12-19 14:30 > > # 🏷️ Title: Penpot's New Render Engine: Moving from DOM to Skia with WebAssembly > <!-- deep-read:sections start --> ## 🧰 Action Inbox - [H1] Test public beta when released — upcoming weeks announcement #testing - [H2] Explore text-to-path feature for icon creation — new capability demo #design - [H3] Prepare for emoji/font consistency improvements — export reliability #workflow ## 🧭 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 - [Penpot Blog Post](https://penpot.app) - [Skia Graphics Library](https://skia.org) ## 📝 Summary - Penpot is replacing its SVG-based DOM renderer with a new Skia/WebAssembly engine for better performance - The new system eliminates reliance on cached images and implements custom tiling for speed improvements - Key benefits include unified font rendering across platforms, better emoji support, and new features like text-to-path - A public beta will be released in upcoming weeks with no breaking changes to APIs or export functionality - The transition addresses current performance bottlenecks while maintaining core design tool values ## 📖 Main Content Penpot announced a major architectural shift from DOM-based SVG rendering to a custom engine built on Skia graphics library and WebAssembly. The current SVG renderer, while standards-compliant, doesn't scale well performance-wise, necessitating this technical evolution. The new system leverages Skia, the same 2D graphics library used by Chrome, Android, Flutter, and LibreOffice. Through WebAssembly, Skia functions run at near-native performance directly in browsers, eliminating previous performance bottlenecks. Key improvements include a custom tile system that removes dependence on cached images, unified font fallback across operating systems, consistent emoji rendering, and reliable export functionality. The team is also introducing demanded features like text-to-path conversion and background blur filters. Importantly, this change affects only visual rendering and application performance - the data model, APIs, and SVG export capabilities remain unchanged, preserving workflow compatibility. ## 🗒️ Notes #### ⏱️ [00:00](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=0) — [H1] Introduction and Voice Acknowledgment - Key idea: Elena introduces herself as part of the new render engine team - Evidence: "My voice is a little bit off because yesterday I was having so much fun talking to all of you" #### ⏱️ [00:30](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=30) — [H1] Moving Away from DOM Rendering - Key idea: Penpot published plans one year ago to transition from DOM-based rendering - Evidence: "One year ago, we published this blog post and we said that it's time for PMPOP to move away from the DOM" #### ⏱️ [01:00](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=60) — [H2] Current SVG Renderer Limitations - Key idea: Current SVG renderer works but doesn't scale well performance-wise - Evidence: "Right now our render is an SVG render, which is a standard. It works great, but in terms of performance, it doesn't scale that well" #### ⏱️ [01:30](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=90) — [H1] Skia Library Selection - Key idea: Team chose Skia graphics library for its maturity and widespread adoption - Evidence: "We decided to use the Skia library which is a 2D graphics open source library that is widely used in many projects such as Chrome, Android, Flutter and LibreOffice" #### ⏱️ [02:00](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=120) — [H2] WebAssembly Integration - Key idea: WebAssembly provides near-native performance for browser-based graphics rendering - Evidence: "Web assembly which is like a low-level assembly language and it runs near native performance directly on the browser" #### ⏱️ [02:30](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=150) — [H2] Custom Tile System Implementation - Key idea: New renderer includes built-in tile system, eliminating external caching dependencies - Evidence: "We have built our own tile system which is developed directly within the render. So we don't have to rely on external stuff for caching" #### ⏱️ [03:00](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=180) — [H1] Performance Comparison Demo - Key idea: Video demonstrations show significant quality and smoothness improvements - Evidence: "You can see that the quality of the image is not super great. The frames per second are bumpy... with the current one, it has better quality. It's way smoother" #### ⏱️ [04:00](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=240) — [H2] Bug Fixes in New Renderer - Key idea: Known issues like shadows and clipping are being fixed directly in the new system - Evidence: "What we are doing is to fix them directly in the new render... it makes no sense to fix it in the current render since we are developing a new one" #### ⏱️ [04:30](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=270) — [H1] Unified Font Fallback System - Key idea: Custom font fallback eliminates cross-platform rendering inconsistencies - Evidence: "Our current render relies on the font fallback from the browser directly... we wanted to unify that. So that's why we have implemented our own font fallback" #### ⏱️ [05:00](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=300) — [H2] Emoji Support Improvements - Key idea: Users can now upload custom emoji fonts for consistent rendering - Evidence: "Although we are now using a default emoji font you can upload your own font and use it directly which is kind of cool" #### ⏱️ [05:30](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=330) — [H2] Export Consistency - Key idea: Skia-based exports eliminate headless browser inconsistencies - Evidence: "Right now we are using headless browser to rendering those exports... now since we are using Skia which exports different image formats, we can use that" #### ⏱️ [06:00](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=360) — [H1] Text-to-Path Feature - Key idea: New renderer enables text-to-path conversion for direct icon creation - Evidence: "One of the demanded features that we had was text to path. So you can directly build your own icons on Penpot" #### ⏱️ [06:30](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=390) — [H2] Background Blur Filter - Key idea: Long-requested background blur filter will be available - Evidence: "We will bring also the so demanded background blur filter as well" #### ⏱️ [07:00](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=420) — [H1] API and Export Compatibility - Key idea: Core functionality remains unchanged - only visual rendering is affected - Evidence: "The new render only affects visuals and the way you work with the application. Nothing else. Everything is going to be the same" #### ⏱️ [07:30](https://www.youtube.com/watch?v=ciG0U5jJtHY&t=450) — [H1] Public Beta Announcement - Key idea: Public beta version will be released in upcoming weeks - Evidence: "In the upcoming weeks we are going to publish a public beta version so you can all test it out" ## 📚 References - [Penpot Website](https://penpot.app/) - [Skia Graphics Library](https://skia.org/) - [WebAssembly Documentation](https://webassembly.org/) ## 🗣️ Paraphrase - Penpot is upgrading from SVG/DOM rendering to Skia graphics with WebAssembly for better performance and consistency - The new system eliminates caching dependencies and cross-platform font inconsistencies while adding requested features - Users will see visual improvements and new capabilities without losing current functionality or needing workflow changes ## 📰 Newsletter **Penpot Unveils Major Render Engine Upgrade with Skia and WebAssembly** The open-source design tool Penpot is making a significant leap forward with a new render engine that promises dramatically improved performance and consistency. Moving away from DOM-based SVG rendering to the powerful Skia graphics library (used by Chrome and Android), this upgrade addresses long-standing performance bottlenecks while maintaining full compatibility with existing workflows. **Key Benefits for Designers:** - Smoother, higher-quality rendering with better frame rates - Consistent font and emoji display across all operating systems - Reliable exports without platform-specific variations - New features: text-to-path conversion and background blur filters **What This Means:** Your existing projects, APIs, and SVG exports remain completely unchanged - you'll just experience a faster, more reliable design environment. A public beta is launching within weeks, giving the community early access to test these improvements. This technical evolution demonstrates Penpot's commitment to performance while preserving the open-source values that make it a compelling alternative to proprietary design tools. Resources: [Penpot](https://penpot.app/), [Skia Graphics](https://skia.org/), [WebAssembly](https://webassembly.org/) ## ✅ Action Items #### DevRel - Developer advocacy: Create technical blog posts explaining Skia/WebAssembly implementation - Education: Develop workshops comparing old vs new render engine performance - Developer experience: Update API documentation to clarify unchanged functionality - Community management: Gather beta feedback and address performance concerns #### Community - Contributors: Coordinate testing of public beta across different platforms - Maintainers: Document migration path and compatibility guarantees - Sponsors: Communicate performance improvements and new feature roadmap ## 🧪 Hypotheses - Skia-based rendering will provide measurably better performance than SVG/DOM rendering for complex designs - Custom font fallback will eliminate cross-platform rendering inconsistencies that currently plague design tools - WebAssembly implementation will achieve near-native performance without sacrificing browser compatibility - Text-to-path and background blur features will increase designer adoption and workflow efficiency ### 📊 Methodology - Performance benchmarking: Frame rate analysis comparing old vs new renderer across device types - Cross-platform testing: Font rendering consistency validation across Windows/Mac/Linux - User experience studies: Beta user feedback on workflow improvements and feature adoption ### ❓ Questions - How will the WebAssembly bundle size affect initial load times for new users? - What fallback mechanisms exist if Skia/WebAssembly isn't supported in older browsers? - How will plugin developers need to adapt to the new rendering architecture? ### 🔮 Future Research - Performance optimization opportunities in tile system implementation - Additional Skia features that could benefit design workflows - Integration possibilities with other graphics-intensive web applications ### 💡 Implications - Practice: Designers can work with more complex files without performance degradation - Policy: Open-source design tools can compete technically with proprietary alternatives - Security: WebAssembly implementation requires careful consideration of browser security models - Education: Technical implementation serves as case study for graphics performance in web applications ### 🧠 Learning Styles Assessment Reading level estimate: 10th grade #### 👀 Visual learners - Present: Performance comparison videos, before/after rendering examples - Improve: Architecture diagrams showing Skia/WebAssembly integration flow #### 🔊 Aural learners - Present: Conference presentation with verbal explanations - Improve: Podcast-style technical deep dive with developer interviews #### 🗣️ Verbal learners - Present: Clear analogies (comparing to Chrome/Android implementations) - Improve: Glossary of technical terms, step-by-step explanations #### 🧩 Kinesthetic learners - Present: Public beta for hands-on testing - Improve: Interactive performance benchmarks, feature playground #### 🧠 Logical learners - Present: Technical architecture explanation, performance metrics - Improve: Detailed benchmarking data, decision tree for implementation choices #### 🧑‍🤝‍🧑 Social learners - Present: Community announcement, beta testing program - Improve: Developer forums, collaborative testing initiatives #### 🧘‍♀️ Solitary learners - Present: Technical blog posts, self-guided beta exploration - Improve: Documentation for independent evaluation and testing #### 🌿 Naturalistic learners - Present: Evolution metaphor (renderer "growing" to meet demands) - Improve: Ecosystem thinking about open-source design tool landscape ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Standard presentation structure with clear headings - Improve: Alt text for performance comparison videos, technical diagrams #### Keyboard navigation - Present: Standard web navigation patterns - Improve: Keyboard shortcuts documentation for new features #### Contrast and readability - Present: Standard presentation contrast ratios - Improve: High contrast mode testing for new render engine #### Text resizing and reflow - Present: Responsive design principles - Improve: Font scaling testing with custom font fallback system #### Media and captions - Present: Video demonstrations of features - Improve: Captions for technical videos, audio descriptions for visual comparisons #### Standards reference - WCAG 2.2 AA compliance verification needed for new render engine UI elements ### 🌍 DEIB Assessment #### Cultural breadth - Present: Technical focus with universal applicability - Improve: Examples from diverse design contexts and use cases #### Inclusive language - Present: Technical terminology with explanations - Improve: Plain language summaries for non-technical users #### Neurodiversity support - Present: Clear structure with logical progression - Improve: Performance improvements may help users with attention challenges #### Representation - Present: Female technical presenter in leadership role - Improve: Diverse user testimonials and use case examples #### Psychological safety - Present: Emphasis on maintaining compatibility and user workflows - Improve: Clear migration guidance to reduce user anxiety ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Skia's proven performance in major applications supports Penpot adoption - Inductive strength: Performance issues identified lead to logical solution choice - Causal reasoning: DOM limitations directly cause performance bottlenecks being addressed - Analogical strength: Chrome/Android success with Skia suggests similar benefits for Penpot #### Fallacies - Appeal to authority: Heavy reliance on Skia's reputation without specific performance data - False dichotomy: Limited discussion of alternative solutions beyond Skia/WebAssembly #### Tone of voice - Overall tone: Enthusiastic and technical, with confidence in solution choice and timeline commitments ### 🛡️ DARVO Analysis - Deny: No problematic patterns detected - Attack: No attacks on critics or alternative approaches - Reverse victim/ <!-- deep-read:sections end -->