Advertise on podcast: Svelte Radio

Jeppe hosts with Brittany. Guests: Patak (Matias Capeletto, Vite core team) and Zeu Capua (zeu.dev, software engineer, Svelte ambassador). What is npmx? A fast, open-source browser for the npm registry. It consumes the npmjs REST API and adds a better UI and more useful data on top. Started by Daniel Roe (Nuxt lead) ~40 days before recording. Patak joined as co-steward after seeing a two-day prototype. Features beyond npmjs.com ESM vs CJS detection per packageBundle size and install sizeColor-coded dependency freshness (yellow = patch behind, red = major behind)e18e module replacement warnings when a lighter modern alternative existsPackage claiming via UI (available locally if you fork the repo)Planned: publishing and package management flowsSvelte is #1 Most liked package on npmx at time of recording: Svelte (173), Nuxt (101), Vite (96). Picks Zeu: Hypermedia Systems by Carson Gross. Free online at hypermedia.systems.Brittany: Starter Villain by John Scalzi. Comedy about inheriting a villain business.Patak: The community blog posts from the npmx launch. Read them if you need a reminder that open source can still be fun.Jeppe: Cordless hot glue guns. 10 seconds to heat up, fixes everything.Hot takes Zeu: Stop putting "blue" or "sky" in AT Proto app names. The protocol needs to grow beyond Blue Sky.Patak: He's stopped coding in open source. Focusing on people, calls, community. Open source needs more non-coders.Links npmx Alpha Launch Blog Postnpmx.devnpmx GitHubnpmx Discordnpmx Open CollectiveZeu Capua / @zeu.dev on Blue SkyEuroskyOpen Source PledgeHypermedia Systems

Kev and Jeppe, discuss the cold weather in Denmark and Sweden compared to Hawaii. They highlight that "Svelte Radio" has ranked number 13 (effectively number 12) in the podcast section of the State of JS 2025 survey, placing them among the "mainstream" podcasts and slightly increasing the pressure to produce relevant content. State of JS: FrameworksThe hosts analyze the survey results for JavaScript frameworks: Svelte: Usage increased slightly to 27% (up from 26%). It maintains the highest interest rating for the sixth consecutive year, though interest is slightly declining—a trend seen across most frameworks. Satisfaction remains high at number two (86%), just behind Solid.React: Continues to dominate with 70 million weekly downloads, but interest and satisfaction are declining. The hosts discuss the complexity of React Server Components (RSC) and the risks of framework developers losing touch with practical usage ("dogfooding").Solid: Rising in interest and taking the number one spot for satisfaction.HTMX: Saw a significant drop in interest, described as a "meme" that has cooled down.Web Components: Chatter is growing (e.g., Lit), but usage remains relatively low compared to the push from DevRel teams.State of JS: Meta-Frameworks Next.js: Leads usage significantly at 59% but has low satisfaction, barely beating out Gatsby.Astro: Growing rapidly (27% usage) and ranked number one in satisfaction. Its strength lies in supporting multiple frameworks (React, Vue, Svelte).SvelteKit: Ranked number two in satisfaction. Interest is declining, likely due to the framework maturing.TanStack Start: Noted as a popular write-in option and a strong new alternative to Next.js.Analog: Mentioned as an Angular meta-framework powered by Vite.Libraries & Developer Tools The hosts discuss various libraries and tools featured in the survey:Validation: Zod is the most used, but Valibot is recommended as a smaller, tree-shakable alternative. Both libraries support the new "Standard Schema" initiative.Linting: Oxlint is highlighted as a much faster, Rust-based alternative to ESLint.Package Management: The tool ni is recommended for running package manager commands (install, run scripts) agnostically without needing to remember if a project uses npm, yarn, or pnpm.Date Libraries: Day.js, date-fns, and Luxon remain popular. The hosts anticipate the upcoming JavaScript Temporal API may eventually replace these.jQuery: A new version was released that drops Internet Explorer 11 support and migrates to ES modules.Picks & Actionable ItemsThe hosts conclude with their picks for the week: Kev's Pick: The TV show "A Knight of the Seven Kingdoms" (Game of Thrones universe).Jeppes's Pick: npmx.dev, a modern, interactive interface for the NPM registry that includes vulnerability alerts and dependency graphs.Actionable Items: Try ni: Use the ni CLI tool to handle package manager commands automatically across different projects.Contribute to npmx.dev: The project is looking for contributors. It is described as a friendly community for those wanting to get into open source.Avoid AI Spam PRs: If contributing to npmx.dev or other projects, ensure contributions are genuine and not low-effort, AI-generated pull requests.

Sorry about Jeppe's audio in this one, he accidentally picked the wrong microphone during recording and there's not much we can do about it :( The gang kicks back for their first episode of the new year, catching up on holidays before diving into AI and vibe coding. Kevin talks bout a gym tracking app he built almost entirely with LLMs.  They cover updates to the Svelte Society website (job board, sponsorships, newsletter), debate whether Mozilla/Firefox can survive by pivoting to AI, and wrap with hot takes: Kevin warns devs to learn AI tools or risk obsolescence, Brittney shares Claude's take that TypeScript's type system has become its own technical debt, and Jeppe champions the glory of two ultra-wide curved monitors.

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

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

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

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

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

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

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

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: [email protected]: timothycohen

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. Discussion Rich 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

Summary:In this episode we sit down with Scott Tolinski — cohost of Syntax.fm — to talk about Svelte 5 and local first development. 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. Discussion Who is Scott?Check out Syntax on YTPrimeagen feud thingNorth StarAI RobotBuilding App in SvelteBrad frost design systemSvelte 5 beginners course vs other frameworksSvelte 5Local firstInstantDBZero SyncMeteorDrop in (project)Svelte Summit talk

Summary:In this episode we sit down with Julian Burgess to talk about what he does at Bloomberg, how he uses Svelte and some thoughts about Svelte 5 and other exciting tech. 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. Discussion Introduction and backgroundSvelte 5 thoughtsWhat does Bloomberg use Svelte for?Zed editorSide projectsUnpopular opinionsKevin: ORMs are shit, just use SQLJulian: CSS shouldn’t existCSS Zen Garden: https://csszengarden.comKevin: https://corset.devPicks  Kevin: London is great!  Julian: Gooey Svelte tweak pane: https://github.com/kitschpatrol/svelte-tweakpane-ui dat.gui: https://github.com/dataarts/dat.gui

Summary:In this episode we sit down with Matias (patakdev) and Pete (pngwn) to talk about how Vite evolved into a framework agnostic build tool and what it has planned for the future. Recorded on June 28th, 2024 Discussion: Building and maintaining ViteVite vs SnowpackSpeeding up Vite with RolldownVite's new Environment APIutilizing serverless APIs (Cloudflare D1, Key value etc.)Rich Harris: Electron/Taurinative mobile platforms?ViteConf 2024 on October 3Picks Kevin: Sugar (TV show on Apple TV),Pete (pngwn): Local first development storyMatias (patak): Svelte/Kit Tutorial, TutorialKit