svelte.dev
Web development for the rest of us. See also:
- community: @sveltesociety.dev
- starter pack: https://bsky.app/starter-pack/did:plc:nlvjelw3dy3pddq7qoglleko/3l6ucetngs423
- feed: https://bsky.app/profile/paolo.ricciuti.me/feed/svelte-feed
42 posts
6,516 followers
1 following
Regular Contributor
Active Commenter
comment in response to
post
....and that's a wrap for this year. Thanks for following along, everyone! There's a bunch of stuff that we didn't quite manage to squeeze in this month, so keep an eye out in 2025 for more good things.
Merry Christmas to all who celebrate!
comment in response to
post
Day 24 — Svelte now handles `class` attributes with github.com/lukeed/clsx. Much more powerful than the `class:` directive, but since this is Svelte you still get dead code elimination of unused styles!
🎁 docs svelte.dev/docs/svelte/...
🎁 demo svelte.dev/playground/6...
comment in response to
post
for scripts, yes. i forgot to account for styles though — good catch! opened github.com/sveltejs/kit...
comment in response to
post
Day 23 — you can now download your playground creations as SvelteKit apps! It'll even include any dependencies you've imported
🎁 svelte.dev/playground
comment in response to
post
okay, kinda fixed mobile — you can tap the edges of the screen to control the snek. it'll do for now! going to go and do some christmas shopping
comment in response to
post
Day 22 — you can now use the `bundleStrategy: 'inline'` option to build an entire SvelteKit app — code, styles, fonts, images, audio, and so on — into a single `.html` file that you can share on a floppy disk
🎁 docs svelte.dev/docs/kit/con...
🎁 demo svelte-snek.vercel.app (needs keyboard for now!)
comment in response to
post
Day 21 — hash-based routing for SvelteKit apps, for when you don't need (or can't run) a server. You can't use any server-side logic (including SSR), but other than, it's just like any other SvelteKit app
🎁 docs svelte.dev/docs/kit/con...
🎁 demo hash-based-routing.vercel.app
comment in response to
post
Day 20 — Vim mode! You can enable it in the playground and tutorial and it will remember your preference between visits. Don't worry, you can always quit by turning it off again (or closing the tab)
🎁 svelte.dev/playground
comment in response to
post
👀
comment in response to
post
Day 19 — single-file bundles for SvelteKit. By default, your apps use code-splitting to ensure that you only load the code for the current page. But sometimes you need a single bundle for the whole app, and you can now do that with the new `bundleStrategy` option
🎁 docs svelte.dev/docs/kit/con...
comment in response to
post
Day 18 — we've upgraded the playground so you can better understand how the compiler transforms your code. We plan to use this tool ourselves to improve the sourcemaps that Svelte generates
🎁 svelte.dev/playground
comment in response to
post
Day 17 — until today, intellisense would often fail when you were in the middle of writing components, because Svelte's parser crashed on syntax errors.
We just fixed that. Install svelte@latest, make sure your extensions are up to date, and feel the wind in your hair as you write your components
comment in response to
post
note: you can migrate automatically using the following command
npx sv migrate app-state
comment in response to
post
Day 16 — `$app/state`, a modern Svelte 5 state-based replacement for SvelteKit's `$app/stores` module. No more clunky `$` prefix when reading values, just fine-grained state that works everywhere, even outside component files!
🎁 docs svelte.dev/docs/kit/$ap...
🎁 tutorial svelte.dev/tutorial/kit...
comment in response to
post
Day 15 — the new `$inspect.trace(...)` rune gives you debugging superpowers. Add it to a function that runs inside a derived or effect, and you'll see detailed information about what caused it to re-run
🎁 docs svelte.dev/docs/svelte/...
🎁 demo svelte.dev/playground/d...
comment in response to
post
Day 14 — if you need to programmatically mount and unmount a component, you can now pass an `outro: true` option to `unmount` to play transitions before it is removed from the DOM
🎁 docs svelte.dev/docs/svelte/...
🎁 demo svelte.dev/playground/a...
comment in response to
post
Day 13 — a gift for the robot friend in your life. We now publish llms.txt files containing up-to-the-minute documentation for Svelte, SvelteKit and the CLI in AI-digestible form
🎁 docs svelte.dev/docs/llms
🎁 demo (a snake game made by Sonnet 3.5) svelte.dev/playground/0...
comment in response to
post
because you're not serializing (aka turning something into a string of bytes). SvelteKit is doing that part. you're just giving it something it _can_ serialize.
also, encode/decode are shorter
comment in response to
post
Day 12 — send custom types across the network boundary in SvelteKit, whether it's a class containing reactive state, a class used by your database ORM library, or whatever. Just export a `transport` object from your `hooks.js`
🎁 docs svelte.dev/docs/kit/hoo...
🎁 demo stackblitz.com/edit/sveltej...
comment in response to
post
Day 11 — a whole new module, for getting reactive views of window properties like innerWidth, innerHeight, scrollX, scrollY and so on. Like the bindings on <svelte:window> but with less boilerplate
🎁 docs svelte.dev/docs/svelte/...
🎁 demo svelte.dev/playground/8...
comment in response to
post
Day 10 — a lot of you wanted a place to put asynchronous setup work that happens before your SvelteKit app starts up. You can now export an `init` function from `hooks.server.js` and `hooks.client.js` that will be awaited before any other stuff happens
🎁 docs svelte.dev/docs/kit/hoo...
comment in response to
post
Day 9 — warnings and errors emitted by the compiler, or while your app is running, are now accompanied by links to the docs. Over time, we'll flesh out these docs with more details about what caused the error in question
🎁 demo svelte.dev/playground/8...
comment in response to
post
Day 8 — we're calling this 'function bindings'. You know how you can do `bind:value={value}`? You can now do this...
bind:value={getValue, setValue}
...which lets you transform and validate data
🎁 docs svelte.dev/docs/svelte/...
🎁 demo svelte.dev/playground/1...
comment in response to
post
Day 7 — the first of a few planned improvements to the site. A lot of you (rightly!) disliked the tutorial dropdown navigation, so we fixed it. You can even navigate the tutorial with JS disabled, if you're so inclined
🎁 svelte.dev/tutorial
comment in response to
post
Day 6 — we now have modern state-based Spring and Tween classes for adding motion to your UI, replacing the `spring`/`tweened` stores of old. Smooth!
🎁 tutorial svelte.dev/tutorial/sve...
🎁 docs svelte.dev/docs/svelte/...
🎁 demo svelte.dev/playground/8...
comment in response to
post
Day 5, part two — the MediaQuery stuff is powered by createSubscriber, which is an advanced feature mainly for library authors. It makes it easy for you to build your own reactive classes that set up event listeners when something is read inside an effect.
- docs svelte.dev/docs/svelte/...
comment in response to
post
Day 5 — it's a three-in-one kind of day! `new MediaQuery(...)` lets you use media queries reactively. prefersReducedMotion is an instance of MediaQuery that makes it easier to respect users' accessibility preferences
- docs svelte.dev/docs/svelte/...
- demo svelte.dev/playground/8...
there's more!
comment in response to
post
Day 4 — specify a `defaultValue` on form inputs, and it will be used when the form is reset
- docs svelte.dev/docs/svelte/...
- demo svelte.dev/playground/b...
comment in response to
post
Day 3 — you can now export snippets from a <script module> (terms and conditions apply)
- docs svelte.dev/docs/svelte/...
- demo svelte.dev/playground/1...
comment in response to
post
Day 2 — `each` without `as`, for when you just want lots of one thing
- docs svelte.dev/docs/svelte/...
- demo svelte.dev/playground/e...
comment in response to
post
Day 1 — error boundaries! Wrap your code in a <svelte:boundary> and you can isolate and recover from unexpected errors.
🎁 docs svelte.dev/docs/svelte/...
🎁 tutorial svelte.dev/tutorial/sve...