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
Kitbook: Easily Build, Document, Inspect & Test Svelte Components
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 👋