|
| 1 | +--- |
| 2 | +title: "What's new in Svelte: June 2025" |
| 3 | +description: 'Attachments are the new actions, plus better snippets and classes' |
| 4 | +author: Dani Sandoval |
| 5 | +authorURL: https://dreamindani.com |
| 6 | +--- |
| 7 | + |
| 8 | +In addition to advancing the work on Async Svelte, the maintainers have been hard at work introducing long requested features like Attachments. |
| 9 | + |
| 10 | +This month, we'll share a bit about the new API along with a huge showcase of apps/sites built with Svelte... |
| 11 | + |
| 12 | +Let's dive in! |
| 13 | + |
| 14 | +## What's new in Svelte and SvelteKit |
| 15 | + |
| 16 | +- Attachments are essentially a more flexible and modern version of actions. Read more about their use-cases and improvements over actions in the PR ([#1500](https://github.com/sveltejs/svelte/pull/15000)) or in the [Svelte docs](https://svelte.dev/docs/svelte/@attach) (**svelte@5.29.0**, **language-tools@109.7.0**) |
| 17 | +- Do you have actions you love and want to use them as attachments? The `fromAction` utility lets you convert actions into attachments (**svelte@5.32.0**, [#15933](https://github.com/sveltejs/svelte/pull/15933)) |
| 18 | +- Generics are now allowed on snippets - improving typing and type hints (**svelte@5.30.0**, **language-tools@109.8.0**, [#15915](https://github.com/sveltejs/svelte/pull/15915)) |
| 19 | +- The Svelte extension will now allow you to add missing imports on save (**language-tools@109.6.0**, [#2744](https://github.com/sveltejs/language-tools/pull/2744)) |
| 20 | +- State fields can now be declared inside class constructors (**svelte@5.31.0**, [#15820](https://github.com/sveltejs/svelte/pull/15820)) |
| 21 | +- Svelte is now XHTML compliant and the new `fragments: 'html' | 'tree'` option adds wider CSP compliance (**svelte@5.33.0**, [#15538](https://github.com/sveltejs/svelte/pull/15538)) |
| 22 | +- Client-side code is now allowed to run at the top-level of universal pages/layouts when SSR is disabled and page options are only boolean or string literals (**kit@2.21.0**, [#13684](https://github.com/sveltejs/kit/pull/13684)) |
| 23 | + |
| 24 | +For a full list of bug fixes in Svelte, SvelteKit and its adapters, check out their CHANGELOGs [here](https://github.com/sveltejs/svelte/blob/main/packages/svelte/CHANGELOG.md) and [here](https://github.com/sveltejs/kit/tree/main/packages). |
| 25 | + |
| 26 | +--- |
| 27 | + |
| 28 | +## Community Showcase |
| 29 | + |
| 30 | +### Apps & Sites built with Svelte |
| 31 | + |
| 32 | +- [Whimsy](https://whimsy.rocks/) is a small game engine and a fantasy console for making interactive stories |
| 33 | +- [DASHBOT](https://dashbot.jianong.me/) is a 1v1 Space Robot Sprint Battle game for two players - with local and online modes |
| 34 | +- [Kraa](https://kraa.io/) is a web-based markdown editor that does things a little differently |
| 35 | +- [Shovel AI](https://www.shovel-ai.com/) is a batch tool for interacting with large amounts of a text data with AI models |
| 36 | +- [md.uy](https://md.uy/) is a collaborative, local-first, peer-to-peer markdown editor |
| 37 | +- [BringYourAI](https://bringyourai.com/) is a browser extension that provides instant codebase context on any AI chat website |
| 38 | +- [Joe Malatesta](https://www.joemmalatesta.com/film) figured out a way to present his film photos in a digital environment |
| 39 | +- [Notion Avatar](https://notion-avatar-svelte.vercel.app/) is a Notion-style avatar editor with Svelte 5 Runes |
| 40 | +- [ORBITS](https://www.orbits.so/) is your second brain for who you know and who you meet |
| 41 | + |
| 42 | +### Learning Resources |
| 43 | + |
| 44 | +_Featuring Svelte Contributors and Ambassadors_ |
| 45 | + |
| 46 | +- In case you missed it, [all the videos from Svelte Summit](https://www.youtube.com/playlist?list=PL8bMgX1kyZThKy_B41FQHk_xsHMQouV1Z) are released over the course of the next few days on Svelte Society YouTube. More on how that happened in last month's [blog post](https://svelte.dev/blog/svelte-summit-videos) |
| 47 | +- [Svelte Attachments Are Here And They're Awesome](https://www.youtube.com/watch?v=9PREEREiPAE) by Joy of Code |
| 48 | +- [SvelteBench](https://khromov.github.io/svelte-bench/benchmark-results-merged.html) (from Stanislav Khromov) shows how different AI models perform out of the box on Svelte 5 syntax - now updated with Anthropic's new Claude 4 models |
| 49 | +- [First look at GitHub Copilot Coding Agent - The $40/month AI developer that actually works!](https://www.youtube.com/watch?v=FRcOen6JuJc) by Stanislav Khromov (video) |
| 50 | +- [Truly Native Apps with Svelte?](https://mainmatter.com/blog/2025/05/22/native-apps-with-svelte/) by Paolo Ricciuti |
| 51 | + |
| 52 | +_This Week in Svelte_ |
| 53 | + |
| 54 | +- [Ep. 102](https://www.youtube.com/watch?v=frp8BXlBAZY) — Svelte+Lynx and Async Svelte |
| 55 | +- [Ep. 103](https://www.youtube.com/watch?v=P3Ldkuksqu0) — Attachments |
| 56 | +- [Ep. 104](https://www.youtube.com/watch?v=txM-BCrZcbc) — Skeleton v3.0 |
| 57 | +- [Ep. 105](https://www.youtube.com/watch?v=Tiq0wivUNAE) — Changelog |
| 58 | + |
| 59 | +_To Watch/Read_ |
| 60 | + |
| 61 | +- [Svelte's Next Big Change? (server components soon?)](https://www.youtube.com/watch?v=nQB9iRijqBY) by Better Stack |
| 62 | +- [I spent some time using Better-Auth and Polar with SvelteKit and this is what I think](https://www.reddit.com/r/sveltejs/comments/1kaiwkk/i_spent_some_time_using_betterauth_and_polar_with/) by elansx |
| 63 | +- [Building md.uy - Peer-to-Peer Markdown Editor](https://mr19.xyz/blog/md-uy/) by mateor |
| 64 | + |
| 65 | +### Libraries, Tools & Components |
| 66 | + |
| 67 | +- [Bits UI v2 released](https://www.bits-ui.com) - with support for attachments, `$props.id()`, Shadow DOM, and more |
| 68 | +- [Composably](https://github.com/kompismoln/composably) is a content processing plugin for Vite and SvelteKit with typed content + dynamic Svelte components at build time |
| 69 | +- [Svelte Flow is now 1.0](https://svelteflow.dev/) - with Svelte 5 support, TSDoc and a bunch of new features to make interactive flow charts even better |
| 70 | +- [fox ui](https://flo-bit.dev/ui-kit/) is a collection UI components built with Tailwind 4 and Svelte 5 - now with a [rich text editor](https://www.reddit.com/r/sveltejs/comments/1kjwuci/currently_building_a_svelte_rich_text_editor_on/) |
| 71 | +- [fluid-dnd](https://github.com/carlosjorger/fluid-dnd) is a drag and drop library for Vue, React and Svelte |
| 72 | +- [sveltekit-password-protect](https://github.com/humanshield-sidepack/sveltekit-password-protect) is a simple utility to add a layer of protection to your websites |
| 73 | +- [sveltekit-image-optimize](https://github.com/humanshield-sidepack/sveltekit-image-optimize) is a simple utility that helps you create an endpoint of your svelte app that optimizes your images |
| 74 | +- [svelte-inspect-value@0.7.0 introduces Panels](https://inspect.eirik.space/reference/panel) - a fixed-position resizable panel / drawer that separates the debugging UI from flow of your website |
| 75 | +- [nuqs-svelte](https://github.com/rtrampox/nuqs-svelte) is an unnoficial Svelte port of nuqs library - a type-safe search params state manager |
| 76 | +- [sv-router](https://sv-router.vercel.app/) is a type-safe SPA router with file-based or code-based routing |
| 77 | +- [svelte-textcircle](https://github.com/LoStis-World/svelte-textcircle) displays text in a circular layout with customizable animations and styling |
| 78 | + |
| 79 | +That's it for this month! Let us know if we missed anything on [Reddit](https://www.reddit.com/r/sveltejs/) or [Discord](https://discord.gg/svelte). |
| 80 | + |
| 81 | +Until next time 👋🏼! |
0 commit comments