Penpot's new rendering system
🔗 **Source:** [Penpot's new rendering system](https://penpot.app/blog/penpots-new-rendering-system/)
> [!note]+ Document Notes
> tags: [rendering, performance, tile-rendering]
> author: Aitor Moreno Melcón
> source: penpot.app
> reference: [https://penpot.app/blog/penpots-new-rendering-system/]
> date created: 2025-11-20 00:00
>
> # 🏷️ Title: Penpot's new rendering system
>
<!-- deep-read:sections start -->
## 🧭 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
- What happened: Penpot introduced a new rendering system centered on tile rendering to improve performance on large, complex designs.
- Why it matters: Keeps the canvas feeling “limitless” by respecting practical limits (CPU/GPU/memory) and rendering only what’s needed.
- Key stakeholders: Penpot users, open-source contributors, frontend/rendering engineers.
- Risks and tradeoffs: Cache eviction heuristics, memory budget tuning, potential artifacts at tile boundaries if not handled carefully.
- Bottom line: Tiled rendering + smart caching enables smooth panning/zooming and scalability on diverse hardware.
## 📖 Main Content
- Core idea: Use tile rendering to draw only visible and potentially-visible regions, caching nearby tiles and evicting distant ones when memory is full.
- Context/definitions:
- Tile rendering: Break the canvas into fixed-size tiles; render and cache tiles intersecting the viewport or near it.
- Viewport vs. potentially-visible area: Immediate view versus a margin area likely to be needed next.
- Cache budget: Fixed memory reserved for tile surfaces; evict far-away tiles first.
- Uncertainties:
- Exact tile size, cache eviction policy details, and GPU/CPU balancing aren’t fully specified.
- Integration details with Penpot’s overall rendering pipeline beyond tiles are not elaborated here.
### 🗒️ Notes
- “One of the hardest challenges… is rendering performance.”
- Designs feel limitless, but computation isn’t; memory/CPU/GPU impose hard limits.
- Tile rendering is “a very old concept” from games and used by browsers/GPUs.
- Penpot renders:
- Bright tiles = intersect viewport.
- Slightly bright = potentially visible.
- Dark = cached but currently not visible.
- Fixed cache budget; evict farthest tiles first to keep likely-needed tiles warm.
- Visualizations: viewport (magenta), shapes (yellow), tiles (cyan) to illustrate categories and caching.
- Source dive: render-wasm/src/tiles.rs.
- Community thread discusses moving away from heavy DOM dependence.
## 📚 References
- Penpot’s new rendering system (article): https://penpot.app/blog/penpots-new-rendering-system/
- Tile renderer source (tiles.rs): https://github.com/penpot/penpot/blob/develop/render-wasm/src/tiles.rs
- Community discussion on the new render engine: https://community.penpot.app/t/its-time-for-penpot-to-almost-move-away-from-the-dom/6437/37
## 🗣️ Paraphrase
- Paragraph A: Rendering complex documents smoothly is hard; tile rendering helps by focusing work on what’s visible and nearby.
- Paragraph B: A fixed cache of tiles is maintained; when full, tiles farthest from the viewport are discarded first.
## 📰 Newsletter
Penpot shipped a smarter renderer that makes massive canvases feel snappy. The trick? Tile rendering—an old game-dev staple now powering design workflows in the browser. If you care about performance budgets and rendering paths in design tooling, this is a crisp, practical read. For WordPress builders: apply the same mindset to admin UIs and block previews—render incrementally, cache aggressively, and prefetch the “next” view. Links: Penpot’s post, the tiles.rs source, and a community thread on moving beyond the DOM.
## ✅ Action Items
#### DevRel
- Talks/demos: Live perf demo comparing tiled vs. full-canvas renders; flamegraphs.
- Education: Workshop on viewport-driven rendering and cache eviction heuristics.
- DX: Example projects with togglable tile sizes and budgets; profiling guides.
- Marketing: Case study on low-end devices; before/after metrics.
- Community: Feedback survey on perceived smoothness; beta flags.
#### OSPO
- Governance: Document rendering module ownership and review paths.
- Compliance: Third-party deps audit in render-wasm.
- Security: Sandbox policies for WASM; supply-chain checks.
- Inventory: SBOM for renderer components; freshness SLOs.
- Support: Office hours for contributors; perf tooling standardization.
- Engagement: Upstream contributions to browser/WASM perf tooling.
#### Community
- Maintainers: Perf budget definitions; regression gates.
- Contributors: First-issue tasks around telemetry and tests.
- Sponsors: Fund low-end hardware test lab; perf bounties.
- Ecosystem: Cross-project perf drills and shared benchmarks.
#### WordPress
- Core: Perf budgets for block preview rendering.
- Core Performance: Dashboard of p95/p99 interactions; CI perf gates.
- Core AI: Guardrails for model-in-the-loop previews and caching.
- Core Program Team: Perf retros per release; cross-team sync.
- Mobile: Lazy previews; offline tile caches.
- Playground: Repro perf labs; traces export.
- Community: Meetup kits on perf-first UI.
- Training: Lessons on incremental rendering patterns.
- Marketing: Stories on “smooth by default.”
- Support: Perf troubleshooting runbooks.
- Design: Visual diff tools for tile artifacts.
- Documentation: Examples-first perf patterns.
- Photos: Guidance on responsive caching.
- TV: Short explainers on rendering strategies.
- Polyglots: Perf tests on non-Latin fonts.
- Accessibility: Perf doesn’t break a11y; test heatmap.
- Meta: API latency SLOs for preview endpoints.
- CLI: Commands to profile plugin UIs.
- Hosting: Telemetry for real-user perf.
- Tide: Signal for UI perf hygiene.
- Openverse: Incremental search result rendering.
- Themes: Perf lint rules; test matrices.
- Plugins: Perf checks; provenance for WASM assets.
#### The WPOCC
- Programs: Maintainer stipends for perf triage.
- Projects: Documentation sprints on perf patterns.
- Funding: Milestone payouts tied to p95 wins.
### FAIR
- Technical independence: Signed WASM, local provenance.
- Policies: Transparent funding and sunset clauses.
- Governance artifacts: Renderer module charters and scorecards.
## 🧪 Hypotheses
- Tiled rendering reduces average frame render time versus full-canvas redraws.
- Adding a prefetch margin lowers perceived jank during fast pans.
- Evicting farthest tiles minimizes cache misses versus LRU-only.
- Fixed memory budgets prevent GC thrash and improve tail latency.
- Low-end GPUs benefit disproportionately from tile caches.
### 📊 Methodology
- A/B builds: tiled vs. non-tiled; vary tile size and cache budget.
- Metrics: FPS, p95/p99 frame time, cache hit rate, memory, time-to-first-paint after pan/zoom.
- Datasets: Synthetic scenes (shapes/effects/images) and real user docs.
- Devices: Low/mid/high-end CPUs/GPUs; mobile/desktop.
- Analysis: Regression with interaction terms (device class × tile size).
### ❓ Questions
- Optimal tile size by device class?
- Best prefetch margin for mixed zoom/pan behaviors?
- How to balance CPU vs. GPU work in WASM/browsers?
- Artifact handling at tile boundaries with effects/compositing?
### 🔮 Future Research
- Adaptive tile sizing based on scene complexity.
- ML-guided prefetch from user navigation patterns.
- Cross-worker parallel tile pipelines.
- GPU-driven tile binning via WebGPU.
### 💡 Implications
- Practice: Design tools can scale on modest hardware.
- Policy: Set explicit perf budgets and CI gates.
- Security: Harden WASM supply chain and sandboxing.
- Education: Teach incremental rendering fundamentals.
- Funding: Prioritize perf work with measurable user impact.
### 🧠 Learning Styles Assessment
- Reading level: Flesch-Kincaid ~ ninth-grade; short, concrete concepts.
#### 👀 Visual learners
- Present: Illustrations of viewport/tiles/cache.
- Improve: Architecture diagram of render pipeline.
#### 🔊 Aural learners
- Present: Talk reference (Penpot Fest 2025).
- Improve: 3–5 minute narrated summary.
#### 🗣️ Verbal learners
- Present: Clear definitions and analogies.
- Improve: Glossary for GPU/CPU/cache terms.
#### 🧩 Kinesthetic learners
- Present: Code link to tiles.rs.
- Improve: Interactive sandbox to tweak tile size/cache.
#### 🧠 Logical learners
- Present: Cause-effect of cache eviction.
- Improve: Decision trees for eviction/prefetch policies.
#### 🧑🤝🧑 Social learners
- Present: Community thread for discussion.
- Improve: Moderated Q&A session.
#### 🧘♀️ Solitary learners
- Present: Self-paced article.
- Improve: Reflection prompts and mini-quizzes.
#### 🌿 Naturalistic learners
- Present: N/A.
- Improve: Resource/energy analogies for budgets.
### 📊 Accessibility Assessment
#### Screen reader semantics
- Present: Standard headings.
- Improve: Descriptive alt text for visuals.
#### Keyboard navigation
- Present: Typical blog structure.
- Improve: Skip links and clear focus styles.
#### Contrast and readability
- Present: Likely adequate; verify 4.5:1.
- Improve: Check line-height and link contrast.
#### Text resizing and reflow
- Present: Responsive layout expected.
- Improve: Validate at 200% zoom; reduced motion.
#### Media and captions
- Present: Static images.
- Improve: Text alternatives; downloadable assets.
#### Forms and interactions
- Present: Minimal.
- Improve: N/A.
#### Standards reference
- Map to WCAG 2.2 AA: 1.1.1, 1.4.x, 2.4.x, 2.5.5, 3.3.x.
### 🌍 DEIB Assessment
#### Cultural breadth
- Present: Global OSS audience.
- Improve: Links to translations/localization.
#### Inclusive language
- Present: Neutral, accessible tone.
- Improve: Plain-language summary block.
#### Neurodiversity support
- Present: Chunked sections, visuals.
- Improve: Consistent icon+text labels.
#### Representation
- Present: OSS community references.
- Improve: Inclusive imagery and alt text.
#### Psychological safety
- Present: Respectful framing.
- Improve: Clear community guidelines in thread.
### ✅ Logical Validity
#### Strong reasoning
- Inductive: From established tile rendering in games/browsers to Penpot’s canvas—credible analogical transfer.
- Causal: Cache budget → predictable performance; viewport focus → reduced work.
#### Fallacies
- None evident; some claims lack quantified evidence—add benchmarks.
#### Tone of voice
- Pragmatic and explanatory; quotes like “Tile rendering is a very old concept…” set context.
### 🛡️ DARVO Analysis
- No denial, attack, or role reversal present; neutral technical exposition.
## 🎯 Conclusion
- Bottom line: Penpot’s tiled renderer prioritizes visible work, caches nearby tiles, and evicts distant ones to keep complex designs smooth on diverse hardware.
- Next steps: Publish benchmarks, expose tunables (tile size/margin), add telemetry, and iterate on eviction heuristics.
## 🧱 Refactor Appendix (append after 🎯 Conclusion)
```text
### 📚 Literature Split Pad
- Purpose: Stage Konik CEE units that become per-source Literature notes.
- Split level: H3.
- Include verbatim quotes under 25 words and a [view highlight] link.
### [H1] 5–10-word present-tense claim
> [!quote] [Penpot’s new rendering system](https://penpot.app/blog/penpots-new-rendering-system/) by [[Aitor Moreno Melcón]] via [[penpot.app]]. Published 2025-11-19. Accessed .
> “Tile rendering is a very old concept.”
Two lines: context and use. Cite data if relevant.
[view highlight](https://penpot.app/blog/penpots-new-rendering-system/#H1) #xref #articleseed ID:rw_[MISSING]
### [H2] 5–10-word present-tense claim
> [!quote] [Penpot’s new rendering system](https://penpot.app/blog/penpots-new-rendering-system/)
> “A fixed amount of memory is reserved for tiles.”
Two lines: context and use.
[view highlight](https://penpot.app/blog/penpots-new-rendering-system/#H2) #xref ID:rw_[MISSING]
---
### 🔖 Atomic Split Pad (Zettel Candidates)
- Purpose: Promote reusable claims into Atomic notes.
- Split level: H4.
- Each item: one idea, present tense, specific, testable.
#### [Z1] Tile cache eviction favors distant tiles
- Scope: Large canvases; fixed memory budget.
- Pointer: tiles.rs.
- Links: [[Rendering-Performance]] [[Cache-Policies]]
#### [Z2] Prefetch margins reduce perceived jank
- Scope: Fast pan/zoom interactions.
- Pointer: Article visuals.
- Links: [[UX-Performance]] [[Viewport-Strategies]]
---
### ✏️ Fleeting Queue (Extract by Selection)
- [F1] Compare LRU vs. distance-based eviction — context/tiles.rs #fleeting #inbox
- [F2] Prototype adaptive tile sizes based on zoom — context/article #fleeting #inbox
- [F3] Add p95 frame-time CI gate — context/repo #fleeting #inbox
---
<!-- deep-read:sections end -->