Svelte Radio

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.GuestPaolo Ricciuti — Svelte maintainer and ambassador, Senior Software Developer at MainmatterNew HostJeppe joins as a permanent co-host!Topics DiscussedCustom Renderers OverviewSvelte Custom Renderers websiteWhat custom renderers are and why they matterHow React separates React (the diffing library) from React DOM (the renderer)Examples of React custom renderers: Ink — React for terminal/CLI applicationsReact Native — React for iOS/Android native appsRemotion — React for programmatic video creationReact PDF renderer for generating documentsSvelte's Technical ApproachHow Svelte 5 uses the <template> element and innerHTML for fast renderingThe CSP (Content Security Policy) challenges with innerHTMLPaolo's compiler option contribution to enable programmatic element creationThe custom renderer API: defining operations like createElement, setText, setAttribute, appendChild, etc.Separating the Svelte runtime from DOM-specific codeLynx.js IntegrationLynx.js — ByteDance's cross-platform framework (powers parts of TikTok)Why Lynx was the catalyst for custom renderer workCSS support in Lynx including Flexbox, Grid, and even TailwindThe difference between Lynx's element approach vs React Native's component importsRelated Projects & DiscussionsThrelte — Three.js for Svelte (created by Grisha)React Three Fiber — Three.js React rendererSvelte Native — Existing (but limited) Svelte native solutionLiveView Native (Elixir/Phoenix) as a comparison for multi-target templatingDiscussion with Grisha about mixing renderers in the same componentFunding & Open SourceMainmatter's sponsorship of Paolo's custom renderer workFirst external sponsor for this initiativeDiscussion about using Svelte Open Collective funds for this featureWhy custom renderers matter for Svelte adoption in enterprisePaolo's Recent Contributions to SvelteonChange callback for $state (PR in progress)from action utilityCSP-friendly compiler option (foundational for custom renderers)PicksScreen 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)LinksSvelteSvelteKitMainmatter — Paolo's employer, specializing in Svelte and Rust consultingInk (React CLI)React NativeRemotionLynx.jsThrelteReact Three FiberScreen StudioTMCPAdvent of SvelteFollowPaolo Ricciuti: GitHub | BlueskySvelte Radio: svelteradio.com

GuestIlja - Berlin-based developer specializing in building websites and data visualizations for NGOs. Svelte Ambassador.Topics DiscussedWorking with NGOs vs. traditional businessesBudget constraints and project-based fundingThe AfroZensus projectSvelte 5 migrationBerlin Svelte Meetup announcementBerlin Svelte MeetupDate: December 9th (Tuesday)Venue: Datawrapper's office in BerlinTalks: Peter from XYFlow presenting SvelteFlow, plus moreRegistration: https://svelte-berlin.de/Links MentionedTools & Librariessvelte-render-scan (Visual debugging tool by Stanislav Khromov): https://github.com/khromov/svelte-render-scansvelte-inspect-value (Value inspector component): https://github.com/ampled/svelte-inspect-valueSvelteFlow (Node-based UI library): https://svelteflow.dev/Friendly Captcha (GDPR-compliant captcha): https://friendlycaptcha.com/SparklePost (Native-feeling PWA demo): https://sparklepost.vercel.app/@component documentation: https://svelte.dev/docs/svelte/basic-markupCompanies & OrganizationsDatawrapper: https://www.datawrapper.de/GitButler: https://gitbutler.com/XYFlow: https://xyflow.com/ProjectsAcademic Freedom Index: https://academic-freedom-index.net/AfroZensus: https://afrozensus.de/AfroZensus Dashboard: https://data.afrozensus.de/CoursesPractical Accessibility by Sara Soueidan: https://practical-accessibility.today/Unpopular OpinionsKevin: More people should self-hostBrittney: Lost free Copilot accessAntony: Store states, not effectsIlya: JSDoc is superior to TypeScriptPicksKevin: SparklePost, "You can just do things", The Hierarchy book series by James IslingtonBrittney: @component documentationAntony: Friendly CaptchaIlya: svelte-render-scan, svelte-inspect-value, Practical Accessibility course

In this episode, Stanislav Khromov joins the Svelte Radio team to discuss his work on Svelte Bench, abenchmarking tool that scientifically measures how well different LLMs understand and write Svelte 5 code.The conversation explores the challenges of AI-assisted coding with Svelte 5, the development of the officialSvelte MCP (Model Context Protocol) that provides LLMs with documentation and auto-fixing capabilities, andthe surprising performance differences between major AI providers. Stanislav also shares insights on workingwith AI tools, the future of local models, and the economics of AI coding assistants.NotesStanislav KhromovSvelte BenchGitHubSvelte MCPAnthropic Spending VC MoneyUnpopular OpinionsKevin: Serverless is overratedStanislav: OpenAI has the worst models of the big threeAntony: Heat Pumps are badTechnology ConnectionsTech IngredientsPicksKevin: Kasai Hibachi Grill (now tested, and can confirm, it is PENG!)Stanislav: Ball x PitAntony: Saunas By the Sea

In this episode of Svelte Radio, Ken Kunz joins the hosts to discuss his journey with Svelte, from discovering itthrough Rich Harris's "Rethinking Reactivity" talk to building complex financial applications. Ken shares hisexperience working on Trading Strategy, a decentralized finance platform, and the challenges of implementingsophisticated charting solutions. The conversation also covers Ken's memorable Svelte Summit talk where herecreated the Macrodata Refinement interface from the TV show Severance, complete with props and staying incharacter throughout. The episode touches on testing philosophies, state management with his library Svelte-FSM, and the newly launched Svelte Society Chicago chapter.NotesTrading StrategyLayerChartTradingView Lightweight Chartxstatesvelte-fsmTalkRunedMacrodata Refinement TalkGitHub RepoWebsiteBert B's Svelte Summit TalkSvelte ChicagoPicksKevin: Zen BrowserZedZodAntony: n8nActive PiecesBrittney: Tab Groups!Ken: Rock Climbing!Brene Brown

SummaryIn this episode of Svelt Radio, the hosts welcome Jeppe Reinhold from Chromatic to discuss the dramaticimprovements in Storybook's Svelte integration. Jeppe shares how a critical video by Brittany struggling withStorybook setup sparked a complete overhaul of the Svelte experience, leading to better collaboration with theSvelte core team and significant enhancements in functionality. The conversation covers new features like SvelteCSF for writing stories in native Svelte syntax, improved testing capabilities, support for async components, andupcoming features in Storybook 10. The team also discusses the philosophy behind component-drivendevelopment, the challenges of integrating with remote functions, and Storybook's future direction including AIsupport and better theming capabilities.LinksStorybookStorybook Svelte Guideaddon-svelte-csfUnpopular OpinionsAntony: Svelte is an independent project! Don’t throw it in the binJeppe: I like GANTT chartsPicksAntony: Castles!Brittney: Spain!Jeppe: Tuple

SummaryIn this episode, Simon Holthausen from the Svelte team joins to discuss remote functions and async Svelte, twoexperimental features that are changing how developers interact with data in SvelteKit applications. Remotefunctions offer a new RPC-like approach that provides better type safety, more granular data loading, andimproved developer experience compared to traditional load functions and form actions. The conversationcovers the technical implementation, design decisions, and future possibilities including caching, streaming, andintegration with Svelte's upcoming resource API. Simon also explains how async Svelte enables top-level awaitin components with coordinated loading boundaries, making asynchronous work much easier to manage in bothSSR and SPA contexts.LinksRemote Functions DocumentationRemote Functions Video by SimonFollow-up Video by SimonPicksSimon: Elgato Wave MicrophoneKevin: CalDigit Thunderbolt 5 Dock TS5 Plus

SummaryWe're putting the band back together. Svelte Radio is officially back. This first episode is a bit of catch-up. Not a ton of Svelte chatter. Look forward to many fun and interesting episodes. Next week we talk with Simon about Remote Functions. Don't miss it!Show NotesIntroducing SvelteKit Remote Functions, by Simon HolthausenSvelteKit Remote Functions tips: Auth guards, managing asynchronous, query.batchSvelte BenchTemboHot takesKevin: AI generates a lot of Workslop if you're not careful.Antony: Find something common and differentiateBrittney: Cats are better than dogs.PicksKevin: Slow HorsesBrittney: Cate CafésAntony: Gary's Economics 

Timothy Cohen, a bespoke application developer from NYC and the creator of SampleKit, dives into the evolution of web development tools. He discusses his shift from React to Svelte, emphasizing Svelte’s simplicity and the benefits of using educational resources. Cohen shares insights on deploying personal projects and enhances SvelteKit’s functionalities through SampleKit. He also addresses the improvements and challenges posed by Svelte 5, including new coding features and integration with AI tools. Plus, enjoy some humorous tales about navigating New York's public transport!

In this discussion, Dominik G, a maintainer of Svelte and contributor to Vite, dives into the exciting developments in Svelte 5 and Vite 6. He discusses the new Environment API, the importance of ViteCI for ecosystem stability, and the potential blend of web and mobile technologies. Dominik shares insights on migrating from Svelte 4, addressing data management complexities, and innovative tools like Superforms. The conversation also highlights the fun project of rebuilding 'Return to Castle Wolfenstein' using Svelte, showcasing the creativity within the community.

SummaryIn this episode we sit down with Rich Harris — creator of Svelte — and talk about the recent development of Svelte and SvelteKit.Sponsored by Svelte SummitSvelte Summit is an event dedicated to Svelte and everything that is happening in the community. Don't miss it! It's going to be an absolute blast. It's happening on May 8 and 9, 2025 in Barcelona Spain.DiscussionRich Harris introductionSvelte 5 FeedbackSimon and Paolo shoutoutNew command line tool: npx sv migrate svelte-5Advent of SvelteSvelteerror boundaries bind: set/getActions Async stuffLoad in KitStores not scoped!!! WHY NOT?KitState based equivalents of the storesAsyncContext/AsyncLocalStorageError boundaries built-inPartial Pre-renderingJSNationHot takesRich: We need more hot takKevin: SQLite is the bestPIcksRich: BlueskyBook - Lifespan, David Sinclair