Svelte Radio

Kevin Åberg Kultalahti
  • 4.9 (16)
  • TECHNOLOGY
  • UPDATED MONTHLY

Things about Svelte. Sometimes weekly, sometimes not.

  1. DEC 11

    Custom Renderers for Svelte with Paolo Ricciuti

    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. Guest Paolo Ricciuti — Svelte maintainer and ambassador, Senior Software Developer at MainmatterNew Host Jeppe joins as a permanent co-host!Topics Discussed Custom Renderers Overview Svelte 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 Approach How Svelte 5 uses the 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 Integration Lynx.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 & Discussions Threlte — 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 Source Mainmatter'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 Svelte onChange callback for $state (PR in progress)from action utilityCSP-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 SvelteSvelteKitMainmatter — Paolo's employer, specializing in Svelte and Rust consultingInk (React CLI)React NativeRemotionLynx.jsThrelteReact Three FiberScreen StudioTMCPAdvent of SvelteFollow Paolo Ricciuti: GitHub | BlueskySvelte Radio: svelteradio.com

    1h 1m

  2. DEC 6

    One Man Svelte for NGOs with Ilja

    GuestIlja - Berlin-based developer specializing in building websites and data visualizations for NGOs. Svelte Ambassador. Topics Discussed Working with NGOs vs. traditional businessesBudget constraints and project-based fundingThe AfroZensus projectSvelte 5 migrationBerlin Svelte Meetup announcementBerlin Svelte Meetup Date: December 9th (Tuesday)Venue: Datawrapper's office in BerlinTalks: Peter from XYFlow presenting SvelteFlow, plus moreRegistration: https://svelte-berlin.de/Links Mentioned Tools & Libraries svelte-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 & Organizations Datawrapper: https://www.datawrapper.de/GitButler: https://gitbutler.com/XYFlow: https://xyflow.com/Projects Academic Freedom Index: https://academic-freedom-index.net/AfroZensus: https://afrozensus.de/AfroZensus Dashboard: https://data.afrozensus.de/Courses Practical Accessibility by Sara Soueidan: https://practical-accessibility.today/Unpopular Opinions Kevin: More people should self-hostBrittney: Lost free Copilot accessAntony: Store states, not effectsIlya: JSDoc is superior to TypeScriptPicks Kevin: 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

    1h 14m

  3. OCT 30

    Benchmarking AI with Stanislav Khromov

    In this episode, Stanislav Khromov joins the Svelte Radio team to discuss his work on Svelte Bench, a benchmarking 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 official Svelte MCP (Model Context Protocol) that provides LLMs with documentation and auto-fixing capabilities, and the surprising performance differences between major AI providers. Stanislav also shares insights on working with AI tools, the future of local models, and the economics of AI coding assistants. Notes Stanislav KhromovSvelte BenchGitHubSvelte MCPAnthropic Spending VC MoneyUnpopular Opinions Kevin: Serverless is overratedStanislav: OpenAI has the worst models of the big threeAntony: Heat Pumps are badTechnology ConnectionsTech IngredientsPicks Kevin: Kasai Hibachi Grill (now tested, and can confirm, it is PENG!)Stanislav: Ball x PitAntony: Saunas By the Sea

    1h 14m

  4. OCT 23

    Macrodata Refinement with Ken Kunz

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

    1h 5m

  5. OCT 16

    Storybook is actually good now, with Jeppe Reinhold

    Summary In this episode of Svelt Radio, the hosts welcome Jeppe Reinhold from Chromatic to discuss the dramatic improvements in Storybook's Svelte integration. Jeppe shares how a critical video by Brittany struggling with Storybook setup sparked a complete overhaul of the Svelte experience, leading to better collaboration with the Svelte core team and significant enhancements in functionality.  The conversation covers new features like Svelte CSF for writing stories in native Svelte syntax, improved testing capabilities, support for async components, and upcoming features in Storybook 10. The team also discusses the philosophy behind component-driven development, the challenges of integrating with remote functions, and Storybook's future direction including AI support and better theming capabilities. Links StorybookStorybook Svelte Guideaddon-svelte-csfUnpopular Opinions Antony: Svelte is an independent project! Don’t throw it in the binJeppe: I like GANTT chartsPicks Antony: Castles!Brittney: Spain!Jeppe: Tuple

    42 min

  6. OCT 9

    Remote Functions with Simon Holthausen

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

    1h 2m

  7. SEP 26

    We're putting the band back together.

    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 Notes Introducing SvelteKit Remote Functions, by Simon HolthausenSvelteKit Remote Functions tips: Auth guards, managing asynchronous, query.batchSvelte BenchTemboHot takes Kevin: AI generates a lot of Workslop if you're not careful.Antony: Find something common and differentiateBrittney: Cats are better than dogs.Picks Kevin: Slow HorsesBrittney: Cate CafésAntony: Gary's Economics

    40 min

  8. JAN 20

    Timothy Cohen Talks SampleKit

    SummaryIn this episode we sit down with Timothy Cohen and talk about his project SampleKit and Svelte 5. 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. BackgroundWes Bos & Scott TolinskiHow svelte works under the hoodOdin Project - https://www.theodinproject.comMOOC - CS50 Harvard XSampleKit - https://www.samplekit.dev3 different thingsPreprocessor (mdsvex)melt-uialternative to mdsvexDemoscaprovercoolifydokkushopifySasa JuricArticlesTypeSafe Fetch Handler - https://www.samplekit.dev/articles/typesafe-fetch-handlerSvelteKit Search Params - https://github.com/paoloricciuti/sveltekit-search-paramsWhat do you think about Svelte 5?Reactive StatementsSnippetsPicksTimothy: Crafting Interpreters by Robert something (look up)Kevin: New YorkEmail: contact@timcohen.devGitHub: timothycohen

    56 min
See All (88)

4.9
out of 5
16 Ratings

About

Things about Svelte. Sometimes weekly, sometimes not.

Information

  • Creator
    Kevin Åberg Kultalahti
  • Years Active
    2020 - 2025
  • Episodes
    88
  • Rating
    Clean
  • Copyright
    © Kevin Åberg Kultalahti
  • Show Website
    Svelte Radio

You Might Also Like