Svelte Radio | Custom Renderers for Svelte with Paolo Ricciuti

Custom Renderers for Svelte with Paolo Ricciuti

December 11, 2025 / 01:00:59/E88

In this episode of Svelte Radio, we welcome Jeppe as a new permanent host and sit down with Paolo Ricciuti, Svelte maintainer and Senior Software Developer at Main Matter, to dive deep into Svelte custom renderers. Paolo walks us through how custom renderers work (using React's approach with React DOM, Ink, and React Native as context), explains the technical challenges of bringing this capability to Svelte 5—including the template element trick, CSP issues, and runtime modifications—and shares his proof-of-concept work enabling Svelte to render to non-DOM targets like terminals and native mobile apps via Lynx.js. The discussion touches on potential use cases like Threlte for 3D graphics, the importance of this feature for Svelte adoption, and wraps up with picks including Screen Studio, TMCP, and Advent of Svelte.

Guest

Paolo Ricciuti — Svelte maintainer and ambassador, Senior Software Developer at Main Matter

New Host

Jeppe joins as a permanent co-host!

Topics Discussed

Custom Renderers Overview

What custom renderers are and why they matter
How React separates React (the diffing library) from React DOM (the renderer)
Examples of React custom renderers:
- Ink — React for terminal/CLI applications
- React Native — React for iOS/Android native apps
- Remotion — React for programmatic video creation
- React PDF renderer for generating documents

Svelte's Technical Approach

How Svelte 5 uses the <template> element and innerHTML for fast rendering
The CSP (Content Security Policy) challenges with innerHTML
Paolo's compiler option contribution to enable programmatic element creation
The custom renderer API: defining operations like createElement, setText, setAttribute, appendChild, etc.
Separating the Svelte runtime from DOM-specific code

Lynx.js Integration

Lynx.js — ByteDance's cross-platform framework (powers parts of TikTok)
Why Lynx was the catalyst for custom renderer work
CSS support in Lynx including Flexbox, Grid, and even Tailwind
The difference between Lynx's element approach vs React Native's component imports

Related Projects & Discussions

Threlte — Three.js for Svelte (created by Grisha)
React Three Fiber — Three.js React renderer
Svelte Native — Existing (but limited) Svelte native solution
LiveView Native (Elixir/Phoenix) as a comparison for multi-target templating
Discussion with Grisha about mixing renderers in the same component

Funding & Open Source

Main Matter's sponsorship of Paolo's custom renderer work
First external sponsor for this initiative
Discussion about using Svelte Open Collective funds for this feature
Why custom renderers matter for Svelte adoption in enterprise

Paolo's Recent Contributions to Svelte

onChange callback for $state (PR in progress)
from action utility
CSP-friendly compiler option (foundational for custom renderers)

Picks

Screen Studio — screen.studio — Mac screen recording app with automatic zoom animations (Kevin's pick, used for Advent of Svelte recordings)
TMCP — github.com/paoloricciuti/tmcp — Paolo's TypeScript MCP (Model Context Protocol) framework, praised for being much better than the official SDK (Jeppe's pick)
Advent of Svelte — svelte.dev/blog/advent-of-svelte — 24 days of Svelte features and improvements (Brittany's pick)

Links