What’s new in Svelte: November 2023

Mark your calendars! Svelte Summit Fall is on November 11th. Join us on YouTube and in the Discord for hours of Svelte-focused fun 🎥

Every month, maintainers within the Svelte ecosystem fix bugs, improve performance and bring new features to Svelte, SvelteKit and the tooling around them. This month’s releases brings an improved developer experience with better block folding, inferred types and configuration for use:enhance.

Let’s take a closer look 👀...

What’s new in Svelte & Language Tools

• Svelte 4.2.2 cleans up a few element-specific features (Release Notes)
• Extensions 107.12.0 improves block folding for functions, if statements and more (Release Notes, PR)

What’s new in SvelteKit

• Route parameter types will now be inferred from the applicable matcher’s guard check (kit@1.26.0, Docs, #10755)
• The new invalidateAll boolean option lets you turn on and off the invalidateAll() form function within the enhance callback (kit@1.27.0, Docs, #9476)
• The output of the project creation wizard will now reflect which package manager you’re using (create-svelte@5.1.1, #10811)

For a complete list of bug fixes and performance updates, 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

• 4THSEX is a creative website for the producer / creative director with the same name
• Syntax.fm has been redesigned from the ground up with SvelteKit
• GitContext is an early-access tool to improve the process of reviewing code
• Lunier is a site to browse and buy handbags (site is in French)
• Feldman Architecture is a portfolio set for the architects of the same name
• Formulator is a faster way to iterate, experiment, & build user interfaces
• Dwarf is a relaxed domain name marketplace for domain hoarders
• Teek is a simple, free time tracker for developers with an hourly rate
• Sessionic is a web extension to easily save browser sessions and manage them
• Pilink is a “suckless” link shortener

Learning Resources

Featuring Svelte Contributors and Ambassadors

• Wolfensvelte 3D and the Svelte Language Server in the Browser with Jason Bradnick by Svelte Radio
• This Is How You Sveltify Any JavaScript Library, Svelte Actions Make Svelte The Best JavaScript Framework and How Svelte Stores Make State Management Easy by Joy of Code
• Svelte Society Talks
  • Svelte Society - San Diego October 2023
  • Daniils Petrovs - SvelteKit: From landing page to offline PWAs
  • Lukas Stracke - State of Sentry for Svelte 2023
• This Week in Svelte:
  • 2023 September 29 - Svelte 4.2.1, SvelteKit 1.25.1, Runes FAQ, data mocking
  • 2023 October 6 - Ordering attribs, client hints, async custom store with runes
  • 2023 October 13 - SvelteKit 1.25.2, How Melt UI works
  • 2023 October 20 - Kit 1.26.0, Svelte 4.2.2, dynamically-loaded components

To Watch

• SvelteKit & TailwindCSS Tutorial – Build & Deploy a Web Portfolio by freeCodeCamp.org
• Why SvelteKit? [Intro to SvelteKit 1.0, part 1] by Jeffrey Codes Javascript
• Build an AI Chatbot - it’s that easy?! by Simon Prammer
• Introduction to SvelteKit | FREE 5 HOUR SVELTE WORKSHOP 2023 | Lessons + Coding Exercises by This Dot Media

To Read

• What we learned from migrating our web app to SvelteKit by Marten Sigwart
• SvelteKit Tutorial: Build a Website From Scratch by Prismic has been updated based on the latest SvelteKit features
• Svelte by Example is a succinct, gentle introduction to Svelte & SvelteKit
• The Comprehensive Guide to Locals in SvelteKit by Stanislav Khromov
• How to build a blog, the hard way by Curtis Parfitt-Ford
• How to make a full-content RSS feed for your SvelteKit blog by Kyle Nazario
• A simple hash-routed dialog system with Svelte by Jamie Perkins
• When and Where to Render and One Less Reason to Build a Native App by Ross Robino
• Open Neovim From Your Browser - Integrating nvim with Svelte’s Inspector by Theo Steiner

Libraries, Tools & Components

• Work to support SvelteKit in Deno is ongoing and Deno now supports creating SvelteKit projects out-of-the-box!
• Purplix is an open-source collection of tools dedicated to user privacy and creating trust with your audience
• Obra Icons is a simple, consistent set of icons, perfect for user interfaces
• svelte-chat-langchain is a minimal version of “Chat LangChain” implemented with SvelteKit, Vercel AI SDK and of course Langchain
• Cloudinary just released an official Svelte SDK (GitHub)

That’s it for this month! Feel free to let us know if we missed anything on Reddit or Discord.

Until next time 👋