{"type":"rich","version":"1.0","provider_name":"Transistor","provider_url":"https://transistor.fm","author_name":"Svelte Radio","title":"Custom Renderers for Svelte with Paolo Ricciuti ","html":"<iframe width=\"100%\" height=\"180\" frameborder=\"no\" scrolling=\"no\" seamless src=\"https://share.transistor.fm/e/09be0140\"></iframe>","width":"100%","height":180,"duration":3659,"description":"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 Mainmatter, 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.\n\nGuest\nPaolo Ricciuti — Svelte maintainer and ambassador, Senior Software Developer at Mainmatter\n\nNew Host\nJeppe joins as a permanent co-host!\n\nTopics Discussed\n\nCustom Renderers Overview\nSvelte Custom Renderers website\nWhat custom renderers are and why they matter\nHow React separates React (the diffing library) from React DOM (the renderer)\nExamples of React custom renderers: Ink — React for terminal/CLI applications\nReact Native — React for iOS/Android native apps\nRemotion — React for programmatic video creation\nReact PDF renderer for generating documents\n\nSvelte's Technical Approach\nHow Svelte 5 uses the <template> element and innerHTML for fast rendering\nThe CSP (Content Security Policy) challenges with innerHTML\nPaolo's compiler option contribution to enable programmatic element creation\nThe custom renderer API: defining operations like createElement, setText, setAttribute, appendChild, etc.\nSeparating the Svelte runtime from DOM-specific code\n\nLynx.js Integration\nLynx.js — ByteDance's cross-platform framework (powers parts of TikTok)\nWhy Lynx was the catalyst for custom renderer work\nCSS support in Lynx including Flexbox, Grid, and even Tailwind...","thumbnail_url":"https://img.transistorcdn.com/a2spDmSxrcyX_1C736Fgx-G-l9_nFz2rxgwLVukFl-A/rs:fill:0:0:1/w:400/h:400/q:60/mb:500000/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS9zaG93/LzEyODk5LzE1OTc2/Nzg5NDYtYXJ0d29y/ay5qcGc.webp","thumbnail_width":300,"thumbnail_height":300}