Skip to main content

What's new in Svelte: July 2023

Svelte 4.0, new website and a tour around the community

Dani Sandoval

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

To Watch

To Read

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 👋