What's new in Svelte: August 2023

Extending Custom Elements with CSS and new +server customizations

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

• Exploring Svelte 4 w/ Kevin AK: Performance, Compatibility, & Web Component Support | Modern Web Pod by This Dot Media

• Svelte Sirens Stream Design Systems: Lessons Learned featuring Eric Liu creator of Carbon Components Svelte and Svelde the docgen library

• This Week in Svelte:

  • 2023 June 30 - Svelte 4.0.1, SK 1.21, lists, screen readers, loading

  • 2023 July 7 - Svelte 4.0.5, Kit 1.22.1, Svelte 5, local storage and markdown

  • 2023 July 21 - Svelte 4.1.1, SvelteKit 1.22.3, Progressive enhancement

To Watch/Hear

• What is The Transitional Web? with Chris Ferdinandi by Smashing Podcast

• SvelteKit in 100 seconds by Fireship

• Primo V2 Introduction by Primo (a visual CMS based on Svelte)

• Understanding Svelte (vs React) by Kodaps Academy

• Is it thàt simple? - Mastering SvelteKit by Threeveloper

• Markdown in SvelteKit with custom Components: mdsvex by hartenfellerdev

• How To Add Confetti for Svelte and Sveltekit 🎉 and Make Your SvelteKit Code 10x Faster With Rust and WebAssembly by SvelteRust

To Read

• SvelteJS: My ecosystem is bigger than yours by roguegpu

• Avoid shared state on the server in SvelteKit by Aakash Goplani

• SvelteKit Fontaine: Reduce Custom Font CLS by Rodney Lab

• A Simple Guide to Redirects in Svelte Kit by Justin Golden

• React vs Svelte (Q3 2023) by Gee

• SvelteKit Page Reaction Component with Upstash Redis by Scott Spence

• Building a privacy-friendly, self-hosted application architecture with SvelteKit and Building a privacy-friendly, self-hosted application architecture with SvelteKit by Stanislav Khromov

• Deploying Sveltekit on IIS by Nutchapon Makelai

• Streamlined Authentication and Secrets Management by Eman

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 👋