What's new in Svelte: December 2023

Svelte 5 preview announced at Svelte Summit Fall 2023

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

• View Transitions in SvelteKit and beyond with Geoff Rich and Melting UIs with Thomas G. Lopes by Svelte Radio

• Making The Best Svelte SVG Animation Library, How To Publish Your JavaScript Code To Npm With SvelteKit, and What's New In Svelte 5? (Runes, Events, Snippets) by Joy of Code

• Svelte Society Talks

  • Svelte Society - San Diego November 2023

  • Building a SvelteKit Adapter for WinterJS with Willow and Kev

• This Week in Svelte:

  • 2023 October 27 - SvelteKit 1.27.1, the pillars of a component library

  • 2023 November 3 - SvelteKit 1.27.2, choosing a database, preprocessors

  • 2023 November 10 - SvelteKit 1.27.4, Svelte 4.2.3, closing modals

  • 2023 Nov 17 - SvelteKit 1.27.6, Svelte 4.2.5, new Svelte 5 features!

  • 2023 Nov 24 - Svelte 4.2.7, TypeScript in markup, websockets in SvelteKit

To Watch/Hear

• Why Stack Overflow is embracing Svelte by The Stack Overflow Podcast

• Building a Twitter Clone with Svelte, SvelteKit, ,Firebase, Tailwind Css, Shad-cn Svelte etc by Lawal Adebola

• SvelteKit Crash Course: Build a Full Website in 90 min! - 2023 Tutorial by Prismic

To Read

• Hands-On Experience: How to Build an eCommerce Store with SvelteKit? by Bård Farstad

• Productive Dark Mode with SvelteKit, PostCSS, and TailwindCSS (Behind the Screen) by Quang Phan

• Setting up OAuth with Auth.js in a SvelteKit Project by Andrey Mikhaylov

• SvelteKit 🤝 Storybook by Paolo Ricciuti

• Integrate Storybook in Svelte: Doing it the Svelte-way by Óscar Domínguez Celada

• Drizzle ORM with Sveltekit and Sveltekit — Streaming SSR by Mohammed Anas

• Svelte & WordPress Full Stack Course by Artneo Web Design on udemy

• Add a loading indicator to a Form Action in SvelteKit by Useful Snippets (Stanislav Khromov)

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 👋