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” (https://www.youtube.com/live/gkJ09joGBZ4?si=O5HR0PF-TDvNdVNf&t=8898).

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 (#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 (https://www.youtube.com/live/gkJ09joGBZ4?si=ha0iruRIXv2Mql1w&t=894)

• Building a SaaS module for SvelteKit (https://www.youtube.com/live/gkJ09joGBZ4?si=bqRe0Fbykm9sUqZS&t=1517)

• Intro To LayerChart (https://www.youtube.com/live/gkJ09joGBZ4?si=o3rn0WqGBBQckF_2&t=2680)

• Spatial Programming with Threlte Studio (https://www.youtube.com/live/gkJ09joGBZ4?si=dBL-EfWTLtu4fYSt&t=4026)

• Convex (Sponsored talk) (https://www.youtube.com/live/gkJ09joGBZ4?si=5KKpLYXi0fLQqwZZ&t=4891)

• Kitbook: Easily Build, Document, Inspect & Test Svelte Components (https://www.youtube.com/live/gkJ09joGBZ4?si=NMhjp5rBWgf3lV76&t=5903)

• Fullstack Testing (https://www.youtube.com/live/gkJ09joGBZ4?si=8p5CRD9z-LADsMtO&t=6749)

• What You Can Do For Your Framework (https://www.youtube.com/live/gkJ09joGBZ4?si=h4LKM12I_vJBBLZ-&t=8515) - 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 (https://www.youtube.com/@SvelteSociety/featured) to keep up to date.

What’s new in Svelte (#What’s-new-in-Svelte)Svelte 5 is officially in the Release Candidate stage (https://svelte-5-preview.vercel.app/docs/introduction) and gets closer to release every day. Below, you’ll find some highlights from its pre-release changelog (https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md):

• Hot module reloading is now supported in Svelte 5 (5.0.0-next.97 and 101, #11106 (https://github.com/sveltejs/svelte/pull/11106), #11132 (https://github.com/sveltejs/svelte/pull/11132))

• It is now possible to define global (or child global) styles in a block (5.0.0-next.111, #11276 (https://github.com/sveltejs/svelte/pull/11276))

• Compiled code is even more efficient for if blocks, each blocks and attribute updates (5.0.0-next.83-85, #10906 (https://github.com/sveltejs/svelte/pull/10906), #10937 (https://github.com/sveltejs/svelte/pull/10937) and #10917 (https://github.com/sveltejs/svelte/pull/10917))

• The built-ins from svelte/reactivity are now re-exported to be available on the server (5.0.0-next.88, Docs (https://svelte-5-preview.vercel.app/docs/imports#svelte-reactivity), #10973 (https://github.com/sveltejs/svelte/pull/10973))

• A new reactive URL object is now available in svelte/reactivity (5.0.0-next.103, Docs (https://svelte-5-preview.vercel.app/docs/imports#svelte-reactivity), #11157 (https://github.com/sveltejs/svelte/pull/11157))

• HTML tags are now faster with more efficient hydration markers (5.0.0-next.90-91, #10986 (https://github.com/sveltejs/svelte/pull/10986) and #11019 (https://github.com/sveltejs/svelte/pull/11019))

• The new $host rune retrieves the this reference of the custom element that contains a component - removing the need for createEventDispatcher (5.0.0-next.96, Docs (https://svelte-5-preview.vercel.app/docs/runes#host), #11059 (https://github.com/sveltejs/svelte/pull/11059))

Community Showcase (#Community-Showcase)Apps & Sites built with Svelte (#Community-Showcase-Apps-Sites-built-with-Svelte)

• Collabwriting (https://www.reddit.com/r/sveltejs/comments/1c6zylc/weve_just_raised_12m_launched_new_product_2year/) just raised $1.2M and launched a new product - Collabwriting for Teams (https://www.producthunt.com/posts/collabwriting-for-teams). Congrats!

• Skypix (https://github.com/GhostWalker562/css475-music-library) is a music library that allows users to create playlists, add songs to their library, and share their music with friends

• Jonze (https://github.com/Pelps12/jonze) is an open-source but managed tool for managing member information. It features attendance tracking and membership plans

• midi-note-trainer (https://github.com/TeemuKoivisto/midi-note-trainer) is a music notation trainer app built with Web MIDI

• Easy-Rd (https://easyrd.dev/) is a free tool for coding-based ER diagram creation

• Gamera (https://gamera.app/) is a simple site analytics tool for a privacy-first world

• Collecta (https://collecta.space/) lets you collect your internet in a single space - organize images, bookmarks, inspiration, and share your vibe with friends

• ColdCraft (https://coldcraft.ai/) writes for you by turning bullet points and LinkedIn profiles into effective cold emails

• Fourplay (https://github.com/kilroyjones/fourplay) is a multiplayer word game written with Rust and Svelte

• how-long-is-a-click (https://www.how-long-is-a-click.com/) is a site that measures how long exactly a click is on the web

Learning Resources (#Community-Showcase-Learning-Resources)Featuring Svelte Contributors and Ambassadors

• Preprocessors Are The Most Powerful Svelte Feature No One Talks About (https://www.youtube.com/watch?v=FNIwqQx7mOo), How To Make A Custom Markdoc Renderer (https://www.youtube.com/watch?v=mWt7jsgZIWw) and Responsive CSS Grid Layout In One Line Of Code (https://www.youtube.com/watch?v=b9N1qLTVhvs) by JoyOfCode

• Phoenix LiveView and Svelte with Wout De Puysseleir (https://www.svelteradio.com/episodes/phoenix-liveview-and-svelte-with-wout-de-puysseleir) by Svelte Radio

• Svelte London - April 2024:

• Auth in SvelteKit, the hard & easy ways (https://www.youtube.com/live/IJh7w6DtOIs?si=Y7f0U3y8FUGtdU_X&t=191) by Ajit Krishna

• 3 stories of walking in the fire with my SvelteKit project (https://www.youtube.com/live/IJh7w6DtOIs?si=uOoqnEa1MWUZsHJp&t=1993) by Rowan Aldean

• This Week in Svelte:

• 29 Mar (https://www.youtube.com/watch?v=OqwVuE2I5lM) - Superforms

• 5 Apr (https://www.youtube.com/watch?v=MmiBRw8aoXI) - When to go serverless?

• 12 Apr (https://www.youtube.com/watch?v=WQFjaM1-Hm0) - svelte-api-keys with Captain Codeman

• 19 Apr (https://www.youtube.com/watch?v=r_snb9XDX6Q) - Multiple Action Forms

• 26 Apr (https://www.youtube.com/watch?v=TbZpK-LtCME) - Service Workers

To Read

• LiveView is best with Svelte (https://blog.sequin.io/liveview-is-best-with-svelte/) by Anthony Accomazzo

• Optimizing My SvelteKit Blog (https://www.refact0r.dev/blog/optimizing-sveltekit) by refac0r

• Why Lucia might be the best authentication library for SvelteKit (https://omrecipes.dev/blog/lucia-best-auth-library-sveltekit) by Justin Ahinon

• Deploying a Svelte App with Docker and Node.js: A Developer’s Guide (https://www.klevertopee.com/post?id=d85fccb0-ed24-4175-8165-b601e661a37d) by Klevert Opee

• SvelteKit Todo App with Firebase Admin (https://code.build/p/sveltekit-todo-app-with-firebase-admin-tqdc5j) by Jonathan Gamble

• Dependency injection in Svelte for fun and profit (https://kylenazario.com/blog/dependency-injection-in-svelte) by Kyle Nazario

• Don’t Lazy-Load Translations (https://inlang.com/g/mqlyfa7l/guide-lorissigrist-dontlazyload) by Loris Sigrist

• View Transitions in SvelteKit (https://thnee.se/sveltekit-view-transitions) by Mattias Tomas Bobo Lindvall

• Why is Svelte better? (https://www.zackwebster.com/blogs/why-is-svelte-better) by Zack Webster

• Mocking SvelteKit Stores in Storybook (https://tylergaw.com/blog/mocking-sveltekit-stores-in-storybook/) by Tyler Gaw

• Deploy SvelteKit to AWS Amplify: A Step-by-Step Guide (https://www.launchfa.st/blog/deploy-sveltekit-aws-amplify) by Rishi Raj Jain

• SvelteKit and Stripe demo (https://www.thespatula.io/projects/sveltekit-stripe-demo/demo/) by the spatula

• SvelteKit Turso Fly.io App Guide (https://scottspence.com/posts/sveltekit-turso-flyio-app-guide) by Scott Spence

To Watch

• Build a Animated Website with SvelteKit, GSAP & Prismic (https://www.youtube.com/watch?v=v5Ncz5AcXjI) by Prismic

• Svelte 5: What’s New (https://www.youtube.com/watch?v=kvFqpaTP0a0) by Simon Holthausen

• Build the Ultimate Learning Platform with SvelteKit, PocketBase & TailwindCSS! (https://www.youtube.com/watch?v=b2ftRSX1iZ0&t=47s) and Lets Build A Filtering System with Svelte 5 , Sveltekit 2, Tailwind, Upstash (https://www.youtube.com/watch?v=5urk4ui_l5o) by Lawal Adebola

• Porting a vanilla JavaScript library to Svelte 5 (https://www.youtube.com/watch?v=apIJlWJ3HgQ) by Stanislav Khromov

Libraries, Tools & Components (#Community-Showcase-Libraries-Tools-Components)

• sk-seo (https://github.com/TheDahoom/Sveltekit-seo/) is a dead simple, no dependencies, svelte component that automates a lot of the annoying SEO parts for you

• Svelte Lib Helpers (https://github.com/shinokada/svelte-lib-helpers) is a utility package designed to streamline various tasks when developing Svelte libraries

• skitsa (https://github.com/michaelcuneo/sveltekit-sst-auth) is a simple yet fully fledged operational demonstration of SvelteKit Magic Links using SST, hosted on AWS, as a Lambda application

• svelte-zoomable-circles (https://www.npmjs.com/package/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 (https://www.reddit.com/r/sveltejs/) or Discord (https://discord.gg/svelte).

Until next month 👋