Skip to main content

What's new in Svelte: December 2023

Svelte 5 preview announced at Svelte Summit Fall 2023

Dani Sandoval

Svelte Summit Fall 2023 was epic! Featuring talks from across the ecosystem and the launches from the core team of new Svelte Dev Tools, image optimization, and a preview version of Svelte 5.0! The whole talk can be found here (timestamps below):

  • 0:00 Hype music!
  • 18:20 Exploring Svelte DevTools - Ignatius B (4 minutes)
  • 25:27 How does SvelteKit fare as a SPA Framework - Henry Lie (25 minutes)
  • 53:00 enhanced:img - Ben McCann (6 minutes)
  • 1:03:44 inlang-paraglide JS for SvelteKit i18n - Samuel Stroschein (10 minutes)
  • 1:17:32 How Svelte & GraphQL plays well together - Jean-Yves Couet (31 minutes)
  • 1:53:10 svelte-ecosystem-ci - Dominik G (10 minutes)
  • 2:23:06 Svelte for Creative Development - Steven Stavrakis (10 minutes)
  • 2:35:33 Translating the docs - Romain I'Ourson (11 minutes)
  • 2:49:48 ENHANCE! - Paolo Ricciuti (25 minutes)
  • 3:18:25 Accessibility tips with Svelte solutions - Enrico Sacchetti (25 minutes)
  • 3:49:11 svelte@next - Rich Harris (18 minutes)

Today is also the first day of Advent of Svelte: A Svelte challenge for each day of December. Join the festivities and participate in a daily frontend challenge using Svelte!

Now let's dive into the updates...

What's new in Svelte (5.0 Preview!)

Svelte 5 preview is now available at svelte@next while Svelte 4's current version (@latest) is 4.2.7. All the changes below are from the preview's branch:

  • TypeScript is now supported natively via acorn-typescript (5.0.0-next.9, #9482)
  • The new $effect.active rune returns a boolean to indicate if an effect is active. This lets you set up subscriptions when a value is read (in an effect, or in the template) but also read values without creating subscriptions (5.0.0-next.10, Docs, #9591)
  • The new $effect.root rune creates a non-tracked scope that doesn't auto-cleanup. This is useful for nested effects that you want to manually control (5.0.0-next.14, Docs, #9638)

For all the release notes going forward, check out the CHANGELOG on main. For the highlights, take a look below!

What's new in SvelteKit

  • Creating a new SvelteKit project will now ask if you want to try the Svelte 5 beta (#11026)
  • Prettier 3 and prettier-plugin-svelte 3 are now the default versions when creating new SvelteKit projects (#10410)
  • nodejs20.x is now supported via the Vercel adapter (#11067)
  • @sveltejs/enhanced-img makes serving different sizes of images easy, thanks to pre-processing (Docs, #10788)

For a complete list of bug fixes and performance updates, check out the SvelteKit CHANGELOG. You can also find adapter-specific CHANGELOGs in each of the adapter directories.

What's new in Language Tools

  • The latest version of language tools adds best-effort fallback typings to $props() rune (extensions-108.1.0)
  • Language tools better supports the @render tag by using the Snippet type (extensions-108.0.0)
  • The Svelte ESLint plugin has been updated to support the Svelte 5 preview (v2.36.0-next.2)

Community Showcase

Apps & Sites built with Svelte

  • MobileView is a Chrome Extension for real-time, cross-device website simulation
  • ClassroomIO is an Open Source Platform for Tech Bootcamps
  • sshx is a secure web-based, collaborative terminal
  • ToneShift lets you clone any voice, create music, and join a community of voices
  • CanvasGPT is Autonomous Mind Maps. Powered by AI
  • Wordplay is a new educational, accessible, and language-inclusive programming language for creating playful, interactive typography (Blog Post)
  • CodeFlow is a roadmap for programmers to learn, think and code better
  • Teller is a comprehensive Minecraft backup solution designed to facilitate both local backups and interfacing with the ChunkVault Backend
  • Sudoku is a board created with SvelteKit, Typescript and Tailwind

Learning Resources

Featuring Svelte Contributors and Ambassadors

To Watch/Hear

To Read

Libraries, Tools & Components

  • sveltekit-view-transition provides a simplified view-transition-api for Sveltekit
  • T18S aims to provide the best internationalization experience for SvelteKit, delivering typesafety, performance, and ease of use
  • Svelte Flow is a customizable Svelte component for building node-based editors and interactive diagrams
  • Super Sitemap is a SvelteKit sitemap focused on ease of use and making it impossible to forget to add your paths
  • Svelte UX is a Tailwind-based component library to simplify creating highly interactive and visual applications
  • CanIKit provides a simple way to add authorization to your SvelteKit application
  • Svelte Toggles manages light & dark mode interactions and preference storage
  • Baselime now supports SvelteKit for the edge-logger package

That's it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

Until next time 👋