Svelte 4 is out and folks have been building! There's a bunch of new showcases, libraries and tutorials to share. So let's get right into it...
What's new in Svelte
The big news this month was the release of Svelte 4.0! You can read all about it in the Announcing Svelte 4 post. From performance fixes and developer experience improvements to a brand new site, docs and tutorial... this new release sets the stage for Svelte 5 with minimal breaking changes.
If you're already on Node.js 16, it's possible you won't see any breaking changes in your project. But be sure to read the migration guide for all the details.
For a full list of all the changes to the Svelte compiler, including unreleased changes, check out the CHANGELOG.
What's new in SvelteKit
This month there were lots of awesome bug fixes, so be sure to upgrade to the latest version! There are also a few new features to mention:
The new
event.isSubRequest
boolean indicates whether this is a same-origin fetch request to one of the app's own APIs during a server request (1.21.0, Docs, #10170)A new config option,
config.kit.env.privatePrefix
will set a private prefix on environment variables. This defaults to''
(1.21.0, Docs, #9996)VERSION
is now exported and accessible via@sveltejs/kit
. This can be used for feature detection or anything else that requires knowledge of the current version of SvelteKit (1.21.0, Docs, #9969)
For adapter-specific changes, check out the CHANGELOGs in each of the adapter
directories.
Community Showcase
Apps & Sites built with Svelte
Heerdle is a remake of Spotify's now-defunct Heardle - the daily music guessing game
Meoweler is a travel site filled with cats and helpful facts about popular destinations
A tech lead from IKEA gave a few more details on the way they build pages (and page template) using Svelte
The Quest to Replace Passwords features an interactive comparison visualization for all the popular password management tools
audiogest lets you turn speech to text & summarize any audio in one click
heroify generates 3D graphics for your website with AI
Diesel Legacy: The Brazen Age is a fighting game whose leaderboard and profile pages were all built in Svelte
markmyimages is a watermarking tool with bulk image resize, rename, effects, and more
md.robino.dev is a web based markdown editor
YABin is Yet Another Pastebin with some very specific features
Learning Resources
Featuring Svelte Contributors and Ambassadors
Dev Vlog: June 2023 - Svelte 4.0 with Rich Harris
PodRocket: Svelte 4 with Geoff
This Dot Media: Svelte 4 Launch Party with Simon, Ben, Geoff, and Puru
Exposing Svelte: Between Two Nerds is a comedic conversation between Rich Harris and Dax Raad
Community Tutorial: Self-hosting SvelteKit with a VPS, Docker, CapRover and GitHub Actions with Stanislav Khromov
SvelteKit and Storybook with Jeppe Reinhold
This Week in Svelte:
2023 June 2 - SvelteKit 1.20.1, Svelte 4 pre-release, Headless UI libraries
2023 June 9 - Updates, Self-hosting SvelteKit, Passing styles to children
2023 June 16 - Svelte 4 next.1, how to create a hamburger menu, group layouts
2023 June 23 - Svelte 4, Popovers and hover, Real Time requests with SvelteKit
Svelte Radio
SvelteLab - a Svelte REPL for SvelteKit with Antonio and Paolo
Svelte Radio Live - Svelte 4 Summer Special with Simon and Puru
Using The Svelte Context API With Stores, Impossible FLIP Layout Animations With Svelte And GSAP and Create Beautiful Presentations With Svelte by Joy of Code
To Watch
Server-side filtered, paginated and sorted Table in SvelteKit by hartenfellerdev
Best Icon Library for Svelte and SvelteKit in 2023 by SvelteRust
To Read
From Zero to Production with SvelteKit by Justin Ahinon
Thoughts on Svelte(Kit), one year and 3 billion requests later by Claudio Holanda
How I published a gratitude journaling app for iOS and Android using SvelteKit and Capacitor by Stanislav Khromov
Learning by doing - Vue devs build a Svelte Single Page App by Black Spike
Generate Breadcrumb and Navigation in SvelteKit, SvelteKit Authentication using SvelteKitAuth and OAuth providers: A Comprehensive Guide and SvelteKitAuth with Salesforce OAuth provider by Aakash Goplani
Instantly find and remove Svelte component orphans by Jeremy Zaborowski
Migration Guide from Routify to SvelteKit Router by Aakash Goplani
Creating 3D data visualization using Threlte and D3 by DataViz Cubed
Svelte Real‑time Multiplayer Game: User Presence and SvelteKit PostCSS Tutorial: use Future CSS Today by Rodney Lab
SvelteKit’s World of Routing: Unleash power of your app using Dynamic Routes and Parameters by Igor Nowosad
Libraries, Tools & Components
The Vercel AI SDK is an interoperable, streaming-enabled, edge-ready software development kit for AI apps built with React and Svelte
Superforms 1.0 has been released. Check out the migration guide and new feature list for more details
Panda CSS is CSS-in-JS with build time generated styles, RSC compatibility and multi-variant support
svelte-section-list is a headless Svelte npm package that provides drag-and-drop functionality for managing items and sections
WebStorm is starting to use the Svelte Language Server in its IDE tooling
shadcn-svelte is an unofficial port of shadcn/ui to Svelte that makes it easy to build your component library from common base components
sveltekit-multibuild is a starter repo to create Android apps, web sites, desktop apps, and Chrome extensions automatically
SvelteKit AI Chatbot is an open-source AI chatbot app template built with SvelteKit, the Vercel AI SDK, OpenAI, and Vercel KV.
KitAI provides batteries-included AI templates for SvelteKit and Next.js
Svelte Form Builder is a no-code drag&drop form builder for Svelte
Thanks for reading! As always, feel free to let us know if we missed anything on Reddit or Discord.
Until next time 👋