What's new in Svelte: April 2021

SvelteKit beta and new way to use slots

Two projects that have been months (even years) in the making have made their way out into the world. SvelteKit is now in public beta and slotted components are now available in Svelte!

What's up with SvelteKit?

SvelteKit - Svelte's versatile framework for building SSR, serverless applications, or SPAs - is now officially in public beta. Expect bugs! Lots more detail in the latest blog post. Want to know when 1.0 is close? Check out the milestone on github.

Want to learn more about how to get started, what's different compared to Sapper, new features and migration paths? Check out this week's episode of Svelte Radio for a deep dive with Antony, Kev and Swyx.

New in Svelte & Language Tools

  • Slotted components, including <svelte:fragment slot="..."> lets component consumers target specific slots with rich content (Svelte 3.35.0, Language Tools 104.5.0, check out the docs and the tutorial)
  • Linked editing now works for HTML in Svelte files (Language Tools, 104.6.0)
  • Type definitions svelte.d.ts are now resolved in order, allowing library authors to ship type definitions with their svelte components (Language Tools, 104.7.0)
  • vite-plugin-svelte is available for general use of Svelte in Vite. npm init @vitejs/app includes Svelte options using this plugin.

Community Showcase

Apps & Sites

  • Nagato is a task management tool that connects popular time tracking and to-do tools all in one place.
  • type-kana is a quiz app to help you learn ひらがな (hiragana) and カタカナ (katakana), the Japanese syllabaries.
  • Pittsburgh Steps is an interactive map of the more than 800 sets of public outdoor stairways in Pittsburgh, PA.
  • Music Mode Wheels is a website that displays music modes as interactive wheels.
  • Critical Notes helps game masters and players keep track of their roleplaying games campaigns and adventures.
  • Svelte Game of Life is an educational implementation of Conway's Game of Life in TypeScript + Svelte
  • foxql is a peer to peer full text search engine that runs on your browser.

Demos, Libraries, Tools & Components

  • svelte-nodegui is a way to build performant, native and cross-platform desktop applications with Node.js and Svelte
  • Svelte Story Format allows you to write your "stories" in Storybook using the Svelte syntax. More info in the Storybook blog
  • SelectMadu is a replacement for the select menu, with support for searching, multiple selections, async data loading and more.
  • Svelte Checklist is a customizable CheckList built with Svelte.
  • Suspense for Svelte is a Svelte component that implements the core idea of React's <Suspense>.
  • MiniRx is a RxJS Redux Store that works with Svelte and TypeScript
  • svelte-formly generates dynamic forms for Svelte and Sapper
  • 7ty is a static site generator that uses Svelte, supports partial hydration of components, and uses file based routing resembling Sapper and 11ty.

Want to contribute your own component? Submit a Component to the Svelte Society site by making a PR to this file.

Starters

Looking for a particular starter? Check out svelte-adders and a number of other integration examples at sveltejs/integrations

Learning Resources

See you next month!

Got something to add? Join us on Svelte Society, Reddit and Discord!