Skip to main content

What’s new in Svelte: August 2023

Extending Custom Element Classes and new +server exports

Dani Sandoval

Some sweet new features have dropped in both Svelte and SvelteKit, this month. It’s also great to see how many products and side projects have launched using Svelte as their core technology!

More on all that down below...

What’s new in Svelte & Language Tools

There’s been a bunch of minor bugfixes since the Svelte 4 release. You can find them in the CHANGELOG.

The 4.1.0 release added the ability to further customize the custom element class that wraps the underlying Svelte component. Check out the Custom Elements API docs or the PR for more info!

In addition to supporting SvelteKit’s new HEAD server method, Svelte’s language tools now support Prettier v3 (extensions-107.9.0) and workspace trust settings are now used to support all settings in workspace (extensions-107.8.0).

What’s new in SvelteKit

  • The HEAD server method is now available in API routes (1.22.0, Docs, #9753)
  • Responses with Vary headers are now cached, too (except for Vary: *) (1.22.0, Docs, #9993)
  • There’s now a more helpful error for preview if SvelteKit’s build output doesn’t exist (1.22.2, #10337)

For all the patches and performance updates from this month, check out the SvelteKit CHANGELOG. You can also find adapter-specific CHANGELOGs in each of the adapter directories.

Community Showcase

Apps & Sites built with Svelte

  • GitLight brings GitHub & GitLab notifications to your desktop
  • Days is paprikka’s life in days, inspired by Buster Benson’s Life in Weeks
  • Mofi is a content-aware fill and trim for music
  • JSON Bucket stores your JSON data so you can access it anywhere through generated API routes
  • Soggy Planet is an interactive map of Earth where sea levels rise and fall and the lights of civilization shine through the night (Source)
  • PaperClip is a Chrome extension that makes it easy to memorize details from papers in machine learning, computer vision, and natural language processing.
  • Maktaba is a bookmark manager that “you will actually use”
  • Whispering is a Chrome extension that lets you access OpenAI’s Whisper API for fast transcription in the browser (including ChatGPT)
  • DocuTalk is an AI Customer Support chatbot for your website
  • Krello is a Trello clone built with Svelte, Appwrite and Flowbite
  • Been is a map builder with travel stats like visited countries, extreme visited points, etc.
  • image-to-social-media-thumbnail lets you convert any image to a social media thumbnail
  • Svelte Capacitor Store is a persistent store that uses capacitor (preferences) storage on native devices, and localStorage otherwise, making it ideal for multi-platform projects

Learning Resources

Featuring Svelte Contributors and Ambassadors

To Watch/Hear

To Read

Libraries, Tools & Components

  • Melt UI is a set of headless, accessible component builders for Svelte
  • MDsveX has been updated to work with Svelte 4
  • Svelte Sonner is an opinionated toast component for Svelte
  • WebExtensionTemplate lets you skip the boilerplate and write a Web Extension with TypeScript and Svelte or React
  • svelte-rust lets you run Rust code in your Svelte app
  • SvelteKit SSE provides an easy way to produce and consume server sent events
  • better-svelte-writable provides a type-safe writable which gives you more control over the container
  • Svetch.ts is a client/types/schema/docs generator for your API endpoints
  • sveltekit-localize-url handles URL localization and routing
  • elegua is a small, reactive PWA router for Svelte
  • Molly is a bash script and npm module that helps you clean up unused Svelte components in your project
  • sveltekit-bot is a Telegram bot made with SvelteKit and Vercel

Thanks for reading! As always, feel free to let us know if we missed anything on Reddit or Discord.

Until next time 👋