Episodios

  • Custom Renderers for Svelte with Paolo Ricciuti

    Custom Renderers for Svelte with Paolo Ricciuti
    Dec 11 2025
    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 Main Matter, 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 Main MatterNew HostJeppe joins as a permanent co-host!Topics DiscussedCustom Renderers OverviewWhat 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 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 SourceMain Matter'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)LinksSvelteSvelteKitMain Matter — 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
    Más Menos
    1 h y 1 m
  • One Man Svelte for NGOs with Ilja

    One Man Svelte for NGOs with Ilja
    Dec 6 2025

    Guest
    Ilja - Berlin-based developer specializing in building websites and data visualizations for NGOs. Svelte Ambassador.


    Topics Discussed

    • Working with NGOs vs. traditional businesses
    • Budget constraints and project-based funding
    • The AfroZensus project
    • Svelte 5 migration
    • Berlin Svelte Meetup announcement


    Berlin Svelte Meetup

    • Date: December 9th (Tuesday)
    • Venue: Datawrapper's office in Berlin
    • Talks: Peter from XYFlow presenting SvelteFlow, plus more
    • Registration: https://svelte-berlin.de/


    Links Mentioned


    Tools & Libraries

    • svelte-render-scan (Visual debugging tool by Stanislav Khromov): https://github.com/khromov/svelte-render-scan
    • svelte-inspect-value (Value inspector component): https://github.com/ampled/svelte-inspect-value
    • SvelteFlow (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-markup


    Companies & 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-host
    • Brittney: Lost free Copilot access
    • Antony: Store states, not effects
    • Ilya: JSDoc is superior to TypeScript


    Picks

    • Kevin: SparklePost, "You can just do things", The Hierarchy book series by James Islington
    • Brittney: @component documentation
    • Antony: Friendly Captcha
    • Ilya: svelte-render-scan, svelte-inspect-value, Practical Accessibility course
    Más Menos
    1 h y 14 m
  • Benchmarking AI with Stanislav Khromov

    Benchmarking AI with Stanislav Khromov
    Oct 30 2025

    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 Khromov
    • Svelte Bench
      • GitHub
    • Svelte MCP
    • Anthropic Spending VC Money

    Unpopular Opinions

    • Kevin: Serverless is overrated
    • Stanislav: OpenAI has the worst models of the big three
    • Antony: Heat Pumps are bad
      • Technology Connections
      • Tech Ingredients

    Picks

    • Kevin: Kasai Hibachi Grill (now tested, and can confirm, it is PENG!)
      Stanislav: Ball x Pit
      Antony: Saunas By the Sea
    Más Menos
    1 h y 14 m
  • Macrodata Refinement with Ken Kunz

    Macrodata Refinement with Ken Kunz
    Oct 23 2025

    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 Strategy
    • LayerChart
    • TradingView Lightweight Chart
    • xstate
    • svelte-fsm
      • Talk
    • Runed
    • Macrodata Refinement Talk
      • GitHub Repo
      • Website
    • Bert B's Svelte Summit Talk
    • Svelte Chicago

    Picks

    • Kevin: Zen Browser
      • Zed
      • Zod
    • Antony: n8n
      • Active Pieces
    • Brittney: Tab Groups!
    • Ken: Rock Climbing!
      • Brene Brown
    Más Menos
    1 h y 5 m
  • Storybook is actually good now, with Jeppe Reinhold

    Storybook is actually good now, with Jeppe Reinhold
    Oct 16 2025

    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

    • Storybook
      • Storybook Svelte Guide
    • addon-svelte-csf

    Unpopular Opinions

    • Antony: Svelte is an independent project! Don’t throw it in the bin
    • Jeppe: I like GANTT charts


    Picks

    • Antony: Castles!
    • Brittney: Spain!
    • Jeppe: Tuple
    Más Menos
    42 m
  • Remote Functions with Simon Holthausen

    Remote Functions with Simon Holthausen
    Oct 9 2025

    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 Documentation
    • Remote Functions Video by Simon
    • Follow-up Video by Simon


    Picks

    • Simon: Elgato Wave Microphone
    • Kevin: CalDigit Thunderbolt 5 Dock TS5 Plus
    Más Menos
    1 h y 2 m
  • We're putting the band back together.

    We're putting the band back together.
    Sep 26 2025

    Summary
    We'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 Holthausen
    • SvelteKit Remote Functions tips: Auth guards, managing asynchronous, query.batch
    • Svelte Bench
    • Tembo

    Hot takes

    • Kevin: AI generates a lot of Workslop if you're not careful.
    • Antony: Find something common and differentiate
    • Brittney: Cats are better than dogs.

    Picks

    • Kevin: Slow Horses
    • Brittney: Cate Cafés
    • Antony: Gary's Economics
    Más Menos
    40 m
  • Timothy Cohen Talks SampleKit

    Timothy Cohen Talks SampleKit
    Jan 20 2025

    Summary
    In this episode we sit down with Timothy Cohen and talk about his project SampleKit and Svelte 5.

    Sponsored by Svelte Summit
    Svelte 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.

    • Background
      • Wes Bos & Scott Tolinski
      • How svelte works under the hood
      • Odin Project - https://www.theodinproject.com
      • MOOC - CS50 Harvard X
    • SampleKit - https://www.samplekit.dev
      • 3 different things
        • Preprocessor (mdsvex)
        • melt-ui
        • alternative to mdsvex
      • Demos
        • caprover
        • coolify
        • dokku
        • shopify
        • Sasa Juric
      • Articles
        • TypeSafe Fetch Handler - https://www.samplekit.dev/articles/typesafe-fetch-handler
        • SvelteKit Search Params - https://github.com/paoloricciuti/sveltekit-search-params
    • What do you think about Svelte 5?
      • Reactive Statements
      • Snippets
    • Picks
      • Timothy: Crafting Interpreters by Robert something (look up)
      • Kevin: New York
    • Email: contact@timcohen.dev
    • GitHub: timothycohen
    Más Menos
    56 m
adbl_web_global_use_to_activate_DT_webcro_1694_expandible_banner_T1