984: How to Make a DOM Library Render Anything w/ Paolo Ricciuti

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.