What's new in Svelte: July 2023

Svelte 4.0, new website and a tour around the community

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

• Announcing Svelte 4 post

• svelte.dev: A complete overhaul

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

• Svelte Society - London June 2023

• 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 👋