984: How to Make a DOM Library Render Anything w/ Paolo Ricciuti
Episode
49 min
Read time
2 min
Topics
Software Development, Crypto & Web3, Economics & Policy
AI-Generated Summary
Key Takeaways
- ✓Svelte compiler output: Developers can inspect exactly what Svelte compiles their components into by opening the JS output tab in the Svelte playground, or using the "show compiled code" command in the VS Code extension. Hovering over code with the JS output tab open uses source maps to show which Svelte code maps to which compiled JavaScript line.
- ✓CSP-safe compilation via fragments: Svelte's compiler now accepts a `fragments: true` option that replaces the default `innerHTML` template approach with explicit `document.createElement` and `document.setAttribute` calls. This resolves Content Security Policy violations that blocked Svelte for teams with strict CSP rules preventing any form of innerHTML usage.
- ✓Custom renderer architecture: Building a Svelte custom renderer requires defining a module that exports functions telling Svelte how to create, update, and delete elements in a target environment. Svelte calls these functions without knowing the target, making the renderer a translation layer — a `p` tag call becomes whatever the target platform's equivalent element is.
- ✓Single runtime over dual runtime: An earlier approach split Svelte into two separate runtimes — one for the DOM, one for custom renderers — but this created unsustainable code duplication where bug fixes required identical changes in two files. The current approach uses one runtime with conditional branching: if a custom renderer exists, invoke it; otherwise, use the optimized DOM shortcut.
- ✓Sponsorship-driven development: The custom renderer project at svelte-custom-renderers.com is actively seeking company sponsors to fund continued development. Main Matter funded three months of full-time work previously. Companies building native apps, WebGL tools, or terminal UIs with Svelte are the target sponsors, and a community member has already extended the existing POC to run on Hermes, React Native's JavaScript engine.
What It Covers
Paolo Ricciuti, Svelte maintainer at Main Matter, explains how Svelte's DOM-coupled architecture makes custom renderers difficult to build, and details the technical work underway to enable Svelte to render to native mobile apps, terminals, WebGL, and other non-browser targets via a new custom renderer API.
Key Questions Answered
- •Svelte compiler output: Developers can inspect exactly what Svelte compiles their components into by opening the JS output tab in the Svelte playground, or using the "show compiled code" command in the VS Code extension. Hovering over code with the JS output tab open uses source maps to show which Svelte code maps to which compiled JavaScript line.
- •CSP-safe compilation via fragments: Svelte's compiler now accepts a `fragments: true` option that replaces the default `innerHTML` template approach with explicit `document.createElement` and `document.setAttribute` calls. This resolves Content Security Policy violations that blocked Svelte for teams with strict CSP rules preventing any form of innerHTML usage.
- •Custom renderer architecture: Building a Svelte custom renderer requires defining a module that exports functions telling Svelte how to create, update, and delete elements in a target environment. Svelte calls these functions without knowing the target, making the renderer a translation layer — a `p` tag call becomes whatever the target platform's equivalent element is.
- •Single runtime over dual runtime: An earlier approach split Svelte into two separate runtimes — one for the DOM, one for custom renderers — but this created unsustainable code duplication where bug fixes required identical changes in two files. The current approach uses one runtime with conditional branching: if a custom renderer exists, invoke it; otherwise, use the optimized DOM shortcut.
- •Sponsorship-driven development: The custom renderer project at svelte-custom-renderers.com is actively seeking company sponsors to fund continued development. Main Matter funded three months of full-time work previously. Companies building native apps, WebGL tools, or terminal UIs with Svelte are the target sponsors, and a community member has already extended the existing POC to run on Hermes, React Native's JavaScript engine.
Notable Moment
Paolo described building a working to-do app rendered inside a Lynx native application using a minimal Svelte custom renderer POC — a Svelte component with standard tags producing a fully functional native UI, with no browser or DOM involved anywhere in the rendering pipeline.
Episode Transcript
Real quick before we get going, we are launching a new video series called March Mad CSS. It's a CSS battle tournament with 16 of the world's best developers. Josh Komu, Chris Coyer, Adam Wathan of Tailwind, Cassidy Williams, even Scott and I. Now we have a ton of prizes to give away. And if you want to win, go to madcss.com, and you're gonna fill out the bracket. So madcss.com, log in with your GitHub, and you're gonna pick who you think is going to win each of these. And whoever gets the highest score is going to win this amazing prize pack. Like this sick CSS jacket. You can also order this from the website as well. We got some pretty cool merch, some tees, stickers, and now Jean, first, second, third prize. Go to mad CSS. Make your picks. You can share them with your friends. You'll probably win. Please. Welcome to Syntax Today. We have a really awesome guest on. Paolo Ricciutti is going to be talking about Svelte custom renderers and how how the Svelte team is basically going to be taking a library that is entirely focused on the DOM and really putting it into a a universe where, well, you can, like, render anything with it. So there's a lot that comes from that both in strategy, but also in what that enables for developers who might be considering using this tool. And, yeah. I'm really excited about this. So welcome to Syntax, Apollo. Hi. Welcome. I mean, not welcome. Thank you for the welcome. Of course. Yeah. Yeah. Do we first meet in Barcelona? That's where we met, somewhat recently. Right? Yeah. We met in Barcelona personally. Yeah. The Svelte Sunday was a a great hang there. You're at a a company called Main Matter. What what is it that you're you're doing, and and what's your relationship to this Svelte project overall? I lead the Svelte team at Main Matter. Main Matter is a consultancy. We do a lot of Svelte. We do Rust. We do Amber. Like, it's it's it's basically a sort of top tier, consultancy. Like, we we we're not just, executors. Like, we actually help you architect your your solution. We help you hire even, I guess, more, like, on a high level. But we also do feature development and stuff like that. And, basically, I am the Svelte expert there. And the reason why I am the Svelte expert there is because I'm very tied to this Svelte project. I'm one of the maintainer of this wealth project. I also I started as a wealth ambassador as Scott, which is basically, like, people that won't shut up about wealth. And so Yeah. Yeah. That's me. Right? That defines me, I think. Yeah. Sometimes we have to shut them up about it, but, it's all all good stuff here. How did you find yourself in Svelte specifically? Did you do other frameworks before then? Like and you …
Get the full transcript (8,067 words) + summary by email — free
One-time email with the complete transcript and AI summary of this episode. No account needed.
One email, no spam. We’ll also show you what SignalCast does.
You just read a 3-minute summary of a 46-minute episode.
Get Syntax summarized like this every Monday — plus up to 2 more podcasts, free.
Pick Your Podcasts — FreeKeep Reading
More from Syntax
1037: WebMCP is here (and you should care)
Sep 9 · 56 min
Software Engineering Daily
Cilium, eBPF, and Modern Kubernetes Networking with Bill Mulligan
Mar 26
More from Syntax
1036: Cursor & OpenAI Break Up
Sep 7 · 72 min
WorkLife with Adam Grant
ReThinking: Searching for life on other planets with astrophysicist Sara Seager
Feb 17
Books, tools, and gear mentioned in this episode
SignalCast may earn commission on purchases via these links.
Tools
“Developers can inspect exactly what Svelte compiles their components into by opening the JS output tab in the Svelte playground”
“The custom renderer project at svelte-custom-renderers.com is actively seeking company sponsors to fund continued development.”
“Sponsors: Sentry (https://sentry.io/syntax)”
“using the 'show compiled code' command in the VS Code extension”
“a community member has already extended the existing POC to run on Hermes, React Native's JavaScript engine”
“Paolo described building a working to-do app rendered inside a Lynx native application using a minimal Svelte custom renderer POC”
More from Syntax
We summarize every new episode. Want them in your inbox?
Similar Episodes
Related episodes from other podcasts
Software Engineering Daily
Mar 26
Cilium, eBPF, and Modern Kubernetes Networking with Bill Mulligan
WorkLife with Adam Grant
Feb 17
ReThinking: Searching for life on other planets with astrophysicist Sara Seager
Odd Lots
Sep 7
Why Money Launderers Love $100 Bills
Odd Lots
Aug 31
Richmond Fed’s Tom Barkin on the Surprisingly Resilient Real Economy
How I AI
Aug 24
I spent $20,000 on Devin in a month. Here’s what I learned | Ryan Carson (solo founder)
Explore Related Topics
This podcast is featured in Best Cybersecurity Podcasts (2026) — ranked and reviewed with AI summaries.
Read this week's Software Engineering Podcast Insights — cross-podcast analysis updated weekly.
You're clearly into Syntax.
Every Monday, we deliver AI summaries of the latest episodes from Syntax and 192+ other podcasts. Free for one show.
Start My Monday DigestNo credit card · Unsubscribe anytime