What’s new in Svelte: May 2024
Svelte 5 Release Candidate and all the other highlights from Svelte Summit Spring
Svelte Summit was last week - featuring a number of fantastic talks from across the community. In the final talk, What You Can Do For Your Framework, Rich Harris (with a little help from PuruVJ’s neoconfetti library) announced that Svelte 5 is now in the “Release Candidate”.
Lots of pre-release changes to cover in this post and a host of community showcase items... so let’s dive in!
Highlights from Svelte Summit Spring 2024
Below, you’ll find links to all the talks in the livestream version of Svelte Summit.
- Simple and Sustainable web development in academic libraries with Svelte
- Building a SaaS module for SvelteKit
- Intro To LayerChart
- Spatial Programming with Threlte Studio
- Convex (Sponsored talk)
- Kitbook: Easily Build, Document, Inspect & Test Svelte Components
- Fullstack Testing
- What You Can Do For Your Framework - also covers a ton of the new features listed below
These will all get broken up into more sharable (and rewatchable) videos over time, so make sure you subscribe to the Svelte Society YouTube channel to keep up to date.
What’s new in Svelte
Svelte 5 is officially in the Release Candidate stage and gets closer to release every day. Below, you’ll find some highlights from its pre-release changelog:
- Hot module reloading is now supported in Svelte 5 (5.0.0-next.97 and 101, #11106, #11132)
- It is now possible to define global (or child global) styles in a block (5.0.0-next.111, #11276)
- Compiled code is even more efficient for
if
blocks,each
blocks and attribute updates (5.0.0-next.83-85, #10906, #10937 and #10917) - The built-ins from
svelte/reactivity
are now re-exported to be available on the server (5.0.0-next.88, Docs, #10973) - A new reactive URL object is now available in
svelte/reactivity
(5.0.0-next.103, Docs, #11157) - HTML tags are now faster with more efficient hydration markers (5.0.0-next.90-91, #10986 and #11019)
- The new
$host
rune retrieves thethis
reference of the custom element that contains a component - removing the need forcreateEventDispatcher
(5.0.0-next.96, Docs, #11059)
Community Showcase
Apps & Sites built with Svelte
- Collabwriting just raised $1.2M and launched a new product - Collabwriting for Teams. Congrats!
- Skypix is a music library that allows users to create playlists, add songs to their library, and share their music with friends
- Jonze is an open-source but managed tool for managing member information. It features attendance tracking and membership plans
- midi-note-trainer is a music notation trainer app built with Web MIDI
- Easy-Rd is a free tool for coding-based ER diagram creation
- Gamera is a simple site analytics tool for a privacy-first world
- Collecta lets you collect your internet in a single space - organize images, bookmarks, inspiration, and share your vibe with friends
- ColdCraft writes for you by turning bullet points and LinkedIn profiles into effective cold emails
- Fourplay is a multiplayer word game written with Rust and Svelte
- how-long-is-a-click is a site that measures how long exactly a click is on the web
Learning Resources
Featuring Svelte Contributors and Ambassadors
- Preprocessors Are The Most Powerful Svelte Feature No One Talks About, How To Make A Custom Markdoc Renderer and Responsive CSS Grid Layout In One Line Of Code by JoyOfCode
- Phoenix LiveView and Svelte with Wout De Puysseleir by Svelte Radio
- Svelte London - April 2024:
- Auth in SvelteKit, the hard & easy ways by Ajit Krishna
- 3 stories of walking in the fire with my SvelteKit project by Rowan Aldean
- This Week in Svelte:
To Read
- LiveView is best with Svelte by Anthony Accomazzo
- Optimizing My SvelteKit Blog by refac0r
- Why Lucia might be the best authentication library for SvelteKit by Justin Ahinon
- Deploying a Svelte App with Docker and Node.js: A Developer’s Guide by Klevert Opee
- SvelteKit Todo App with Firebase Admin by Jonathan Gamble
- Dependency injection in Svelte for fun and profit by Kyle Nazario
- Don’t Lazy-Load Translations by Loris Sigrist
- View Transitions in SvelteKit by Mattias Tomas Bobo Lindvall
- Why is Svelte better? by Zack Webster
- Mocking SvelteKit Stores in Storybook by Tyler Gaw
- Deploy SvelteKit to AWS Amplify: A Step-by-Step Guide by Rishi Raj Jain
- SvelteKit and Stripe demo by the spatula
- SvelteKit Turso Fly.io App Guide by Scott Spence
To Watch
- Build a Animated Website with SvelteKit, GSAP & Prismic by Prismic
- Svelte 5: What’s New by Simon Holthausen
- Build the Ultimate Learning Platform with SvelteKit, PocketBase & TailwindCSS! and Lets Build A Filtering System with Svelte 5 , Sveltekit 2, Tailwind, Upstash by Lawal Adebola
- Porting a vanilla JavaScript library to Svelte 5 by Stanislav Khromov
Libraries, Tools & Components
- sk-seo is a dead simple, no dependencies, svelte component that automates a lot of the annoying SEO parts for you
- Svelte Lib Helpers is a utility package designed to streamline various tasks when developing Svelte libraries
- skitsa is a simple yet fully fledged operational demonstration of SvelteKit Magic Links using SST, hosted on AWS, as a Lambda application
- svelte-zoomable-circles is a Svelte component for displaying and browsing hierarchical data using zoomable circles
That’s it for this month! Feel free to let us know if we missed anything on Reddit or Discord.
Until next month 👋