# Advent of Svelte

DevFeed: [Advent of Svelte](<https://devfeed.tech/articles/advent-of-svelte-3027.md>)

Original publisher: [Read original article](<https://svelte.dev/blog/advent-of-svelte>)

Author: The Svelte team

Published: 2024-12-01T00:00:00Z

Content type: article

Language: en

Sources: [Svelte blog](<https://devfeed.tech/sources/svelte-blog.md>)

Topics: [Svelte](<https://devfeed.tech/topics/svelte.md>), [Advent of Code](<https://devfeed.tech/topics/advent-of-code.md>), [Code](<https://devfeed.tech/topics/code.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [reactive](<https://devfeed.tech/topics/reactive.md>), [Tutorial](<https://devfeed.tech/topics/tutorial.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [browser](<https://devfeed.tech/tags/browser.md>), [code](<https://devfeed.tech/tags/code.md>), [compiler](<https://devfeed.tech/tags/compiler.md>), [new-feature](<https://devfeed.tech/tags/new-feature.md>), [reactive](<https://devfeed.tech/tags/reactive.md>), [svelte](<https://devfeed.tech/tags/svelte.md>), [tutorial](<https://devfeed.tech/tags/tutorial.md>)

## AI overview

Svelte Society's Advent of Svelte presents a daily series of Svelte, SvelteKit, and website improvements released through Christmas. The documented updates include error boundaries, simpler each blocks, exported snippets, configurable form default values, reactive media-query helpers, modern Spring and Tween state alternatives, an accessible hierarchical tutorial menu, binding transformations, documentation links for warnings and errors, and awaited asynchronous SvelteKit startup setup.

## Source excerpt

Last December, Svelte Society presented an advent calendar's worth of festive Svelte-themed code challenges. This year, we're turning it around: you get to relax while we take on a challenge. We've set ourselves a goal of releasing one thing a day from here until Christmas, whether it's a new feature in Svelte or SvelteKit or an improvement to the website. Follow @svelte.dev and @sveltesociety.dev and check back every day to see what we've been cooking up. Day 1: error boundaries This is a long-awaited and much-requested feature, that allows you to isolate and recover from errors that occur during rendering. docs tutorial Day 2: each without as If you just want to render something in an {#each ...} block n times, and don't care about the value, you can now omit the as part. docs demo Day 3: exported snippets You can now export snippets from a component's <script module>, for use in other components, as long as those snippets don't reference anything belonging to the component instance. docs demo Day 4: form control default values When you reset a form, the value of each <input> element reverts to its defaultValue. This is normally the empty string, but you can now control it directly in your template. docs demo Day 5: MediaQuery, prefersReducedMotion and createSubscriber It's a three-in-one kind of day. new MediaQuery(...) gives you an object with a reactive current property that's true when the media query matches. prefersReducedMotion is an instance of MediaQuery that matches if the user has expressed a preference for reduced motion, helping you build accessible apps. Under the hood, both are using the createSubscriber mechanism, which gives you an easy way to set up event listeners when a value is read inside an effect. createSubscriber docs MediaQuery docs prefersReducedMotion docs demo Day 6: Spring and Tween We now have modern state-based alternatives to the spring and tweened stores of old. Smooth! Tween tutorial Spring tutorial docs demo Day 7: better tutori