Svelte 5 has been very nice to work with over the past few months. Yes, runes require you to think more carefully about lifecycles and updates. And you may end up writing a little more code initially than with svelte 4. But it serves you better in the long run with complex apps. I found a process for gradually turning a simple app into a more complex one that works for me. I iteratively move $state() runes out of .svelte files and into .svelte.ts files where I build a more abstract data-oriented structure for my app from a series of mutually linked classes. Then those runes can be re-imported into the .svelte files, or used and updated wherever you need. If you plan it right, I think it avoids the need for heavy redux-like state management. (at least I think so. I haven't worked with redux much myself)
Do you know of any large OSS software built with Svelte? I'd like to see how it turns out in the long run, because I'm reticent of all frontend frameworks nowadays through what I perceive as gateways to uncontrollable accidental complexity and abstractions.
I can wholeheartedly recommend Svelte. As someone who can only do vanilla HTML/CSS/JS, it lets me build projects quickly and efficiently without having to learn something complex like React. Case in point this silly side project made in Svelte over a weekend: https://meoweler.com
That website is actually a great way to compare options, thanks for sharing! I did find that it gives a 500 error for Birmingham, AL specifically, if you’re still working on it.
Someone on Twitter claimed that Svelte 5's runes are basically a nicer (custom) syntax for Solid.js -- is that true? I find the way Solid.js decouples signals from components to be a huge step up from React's state management in terms of abstraction capability and composability.
- even better performance,
- a more granular reactivity system with runes,
- more expressive template syntax with snippets and event attributes,
- native TypeScript support,
- and backwards compatibility with the previous syntax!
I love Svelte and use it for all my personal projects and all company projects (except strictly static sites are still built with just 11ty but I hate it and want to move off it).
But I'm going to wait a bit on v5 for the company, scanning all the issue headlines, it looks like there are a still a lot of unresolved edge cases: https://github.com/sveltejs/svelte/issues
As for my latest personal project, upgrading right now so I can help find more of those edge cases :D
For what it's worth, I've upgraded three pretty beefy projects to v5 over the past 6 months or so (making sure to stay on top of latest releases), and I haven't seen any weirdness. That being said, I'm not using any of the transition APIs and only one of the projects uses the "runes outside of a Svelte file" thing (i.e. svelte.js files), so YMMV. I was so excited about runes that I couldn't wait. The only thing that bit me initially was `$state` runes converting objects into Proxy instances, so if you want to send data using `postMessage` or IPC in Electron, you need to serialize it first. I really love the new APIs. The Svelte team did an awesome job of addressing most of the gripes I had with v4.
Yes, yes and yes.
It kind of depends what your project uses under the hood and what it depends on, but Astro is quite flexible with the frameworks it supports and for many things there’s a first-class integration that lets you just install support for certain libraries and frameworks (for example Tailwind, React, Partytown, certain CMSes) with one command.
For DB and user logins, you might have to run in SSR mode to be able to do server-side stuff, but you can certainly build API routes, server middleware and interact with cookies for user token stuff.
Hope it starts to chip into React’s usershare and more companies adopt it, but I know that’s a slow process especially for the big companies.
I got out of front end development for most of the years Angular and React have dominated and it looked like a mess, but Svelte and even Astro make sense, maybe I’m just old school. I would totally go back to the frontend with these new frameworks.
What's the preffered way to make simple SPAs using Svelte now? I'm using this +layout.ts with sveltekit:
> export const ssr = false;
export const prerender = false;
But it feels awkward for real SPAs - internal applications that have no need for server side rendering.
I do have to ask - why don't you want to use SSR just because it's an internal application? For the new Svelte Society website we're SSR:ing everything (even the Admin dashboard). Being able to use form actions is a god send.
With that said, unfortunately when using Kit in "SPA mode" you're not getting the full experience, but it's still the best thing out there. You could try Routify as well.
There's a great talk from last years Svelte Summit that was about Svelte(Kit) in "SPA mode".
This really made my day. I decided to convert a pretty large project over to v5 a couple of months ago because the new APIs were so much nicer. I rolled the dice a bit because I wasn't sure if I was going to hit weird edge cases, but everything went smoothly. Congrats to the Svelte team and major kudos for coming up with runes!
Exciting, I love Svelte! Does anybody have experience with both Vue and Svelte? It's been a while since I used Vue but it seems like both frameworks have converged quite a bit over the years. With this release I'm particularly curious now: why would somebody pick one over the other?
I made my first website a few months ago (I'm an ML engineer). I tried in both Svelte and React.
I used Sonnet as a copilot the whole time and expected Svelte to be more difficult because there are orders of magnitude less training data on it.
To the contrary! The LLM tied itself in knots very quickly with React but mostly did ok with Svelte/Sveltekit. Also, the Svelte stuff it makes is usually snappier. However it does have a wider range of UI widgets it can grasp with React.
It seems that my opinion that React is horrendously and hideously overcomplicated is at least somewhat objective! Svelte has been quite pleasant.
To any devs out there that have to work with React, you have my sympathies. Compared to Svelte it's just flaming hot putrid garbage.
Strong words, I actually enjoy it quite a lot. For trivial stuff I can see how Svelte can seem simpler. But effects, JSX, and the React model tend to be incredible at composition at scale. And the close to the metal to JS nature is something I strongly prefer.
Now granted I’d never use a reducer, and imo a decent state library is the biggest win if you are using React.
Where would one even start learning more about front-end development in today's world? Ignoring the dizzying amount of frameworks, how could I become knowledgeable enough to connect my back-end experience to design the "full stack?"
I think truly full stack is probably too much to ask: just accessibility is a huge area of knowledge, for example. I can fiddle around with back-ends, but I want someone more experienced to check my work or just directly help out with e.g. scaling or observability.
Also, ignore the dizzying amount of frameworks. Learn web technologies, and then React. There are millions of back-end tools as well, but in practice, you only use a limited set. Front-end is the same.
Play around with some stuff and see what works for you best. Personally, I didn’t get frontend at all before React came by, and then switched to Svelte because it fits my mental model exactly.
If you don’t like anything – no worries! Classic SSR with templates and stuff is a thing too, as another commenter pointed out.
Edit: no matter what, make sure you write good HTML first and foremost. Use proper semantic tags, don’t add dozens of nested divs, use native controls when possible etc. Make sure to check accessibility, but it should be OK if you don’t do any weird stuff. MDN is a great starting point.
Pick a stack and dive into it. If you find yourself getting analysis paralysis, just pick one arbitrarily; you're not getting married, you're just getting started. Make things and get feedback on them.
At the end of that process you'll have the background to reevaluate your decisions.
The old way is a bit “magical” in a sense that it does some stuff under the hood to implement the intention behind your code, but it reads really straightforward:
let counter = 0;
// ...
<div>{counter}</div>
`let` in a .svelte compoment makes a variable reactive. If your state is outside a component, you use stores.
With the `$store` rune, the way you make reactive stores inside and outside components is the same, but it only works in .svelte.js/ts. The unification is great – but why not just use `let` in .svelte.js, too?
I understand it can be really tricky – e.g. you might want to use let for things that are not modified in runtime and do not need reactivity, but it should be possible to determine in compile time. (Actually after writing this all up I think I know why Svelte went with runes instead, haha!)
But again – really good work and I hope to try it out on my next project!
I don’t have a definite answer as I haven’t worked with Vue that much. Still, I like Svelte syntax a bit better (e.g. {#each x in xs} vs. v-for), and yeah, all the compile time reactivity stuff works out pretty well in terms of performance.
The runes are still optional, I think, and you can still use the old syntax. Not sure if that will be true in Svelte 6 though!
Do they still operate with very little backwards compatibility policy? They killed the sapper project and replaced it with sveltekit. Is sveltekit still alive?
can I do async derived stores by default yet? It was kinda tricky to get working in svelte 4 and even Square/svelte-store wasn't super ergonomic. Would be super nice if it was built in
From listening to webdev podcast #1, Syntax.fm, the gist I get is that a lot of what used to be invisible compiler magic is now more visible & explicit.
The compiler user to rewrite property access to make reactivity happen. Now you can kind of see yourself updating & reading/reacting as you sprinkle runes in. Implicit to explicit magic, with Runes as the headline demonstration of that. Other examples very welcome!
I learned Svelte 3 over a year ago and I found it very pleasant. Unlike React, Svelte is an integrated framework, no "pick your router" nonsense, I don't want to be picking a router.
I like the direction Svelte going in, the old syntax was ok but not great.
I wonder how this new Svelte compares with some of the other new kids on the block like solid.js and alpine.js.
Svelte 5 has been very nice to work with over the past few months. Yes, runes require you to think more carefully about lifecycles and updates. And you may end up writing a little more code initially than with svelte 4. But it serves you better in the long run with complex apps. I found a process for gradually turning a simple app into a more complex one that works for me. I iteratively move $state() runes out of .svelte files and into .svelte.ts files where I build a more abstract data-oriented structure for my app from a series of mutually linked classes. Then those runes can be re-imported into the .svelte files, or used and updated wherever you need. If you plan it right, I think it avoids the need for heavy redux-like state management. (at least I think so. I haven't worked with redux much myself)
Do you know of any large OSS software built with Svelte? I'd like to see how it turns out in the long run, because I'm reticent of all frontend frameworks nowadays through what I perceive as gateways to uncontrollable accidental complexity and abstractions.
[delayed]
I can wholeheartedly recommend Svelte. As someone who can only do vanilla HTML/CSS/JS, it lets me build projects quickly and efficiently without having to learn something complex like React. Case in point this silly side project made in Svelte over a weekend: https://meoweler.com
That website is actually a great way to compare options, thanks for sharing! I did find that it gives a 500 error for Birmingham, AL specifically, if you’re still working on it.
Someone on Twitter claimed that Svelte 5's runes are basically a nicer (custom) syntax for Solid.js -- is that true? I find the way Solid.js decouples signals from components to be a huge step up from React's state management in terms of abstraction capability and composability.
From the changlog on Github:
The new version brings:
Here’s the release on GitHub: https://github.com/sveltejs/svelte/releases/tag/svelte%405.0...
Probably a better link for this post?
I love Svelte and use it for all my personal projects and all company projects (except strictly static sites are still built with just 11ty but I hate it and want to move off it).
But I'm going to wait a bit on v5 for the company, scanning all the issue headlines, it looks like there are a still a lot of unresolved edge cases: https://github.com/sveltejs/svelte/issues
As for my latest personal project, upgrading right now so I can help find more of those edge cases :D
For what it's worth, I've upgraded three pretty beefy projects to v5 over the past 6 months or so (making sure to stay on top of latest releases), and I haven't seen any weirdness. That being said, I'm not using any of the transition APIs and only one of the projects uses the "runes outside of a Svelte file" thing (i.e. svelte.js files), so YMMV. I was so excited about runes that I couldn't wait. The only thing that bit me initially was `$state` runes converting objects into Proxy instances, so if you want to send data using `postMessage` or IPC in Electron, you need to serialize it first. I really love the new APIs. The Svelte team did an awesome job of addressing most of the gripes I had with v4.
Definitely try Astro for static sites, I'm loving it!
I've started using Astro for static sites, but also as a lightweight Sveltekit replacement.
I saw they have Svelte 5 support, and maybe this would make runes a killer app if we can inject the runes into Astro, (or even React) components?!
Do you think Astro would be good for a site with tons of data (graphs, tables etc)? Can it be used with db, user logins?
Yes, yes and yes. It kind of depends what your project uses under the hood and what it depends on, but Astro is quite flexible with the frameworks it supports and for many things there’s a first-class integration that lets you just install support for certain libraries and frameworks (for example Tailwind, React, Partytown, certain CMSes) with one command.
For DB and user logins, you might have to run in SSR mode to be able to do server-side stuff, but you can certainly build API routes, server middleware and interact with cookies for user token stuff.
offtop, but could you share a bit on why you hate 11ty? I was considering it for a static site.
Hope it starts to chip into React’s usershare and more companies adopt it, but I know that’s a slow process especially for the big companies.
I got out of front end development for most of the years Angular and React have dominated and it looked like a mess, but Svelte and even Astro make sense, maybe I’m just old school. I would totally go back to the frontend with these new frameworks.
What's the preffered way to make simple SPAs using Svelte now? I'm using this +layout.ts with sveltekit: > export const ssr = false; export const prerender = false;
But it feels awkward for real SPAs - internal applications that have no need for server side rendering.
I would probably just go with the Vite template: https://vite.new/svelte-ts
What's the goal of disabling SSR though?
I get that hydrations value is mainly in SEO and a tiny improvement in initial draw speed, but why would you want it disabled, specifically?
It's pretty much what you already wrote though.
https://kit.svelte.dev/docs/single-page-apps
The most obvious reason for me would be running something other than Node on the backend, i.e. only using Svelte for the frontend.
Sometimes you don't want to develop a full-stack application.
Ah, if that's the goal then you should be fine with the static adapter instead. Is linked in the previous link - and here
You'll only need the fallback page and can omit the +layout prerender configuration. It's documented on that page
https://kit.svelte.dev/docs/adapter-static
SSR always yields surprises! If you don't _need_ it, don't enable it; everything is simpler.
wouldn’t not running a server be a reason to disable SSR?
I do have to ask - why don't you want to use SSR just because it's an internal application? For the new Svelte Society website we're SSR:ing everything (even the Admin dashboard). Being able to use form actions is a god send.
With that said, unfortunately when using Kit in "SPA mode" you're not getting the full experience, but it's still the best thing out there. You could try Routify as well.
There's a great talk from last years Svelte Summit that was about Svelte(Kit) in "SPA mode".
https://www.youtube.com/watch?v=uIZOeBS-3cI
TL;DR: Lean into load functions and monkey-patch fetch (if possible)
SvelteKit is great in SPA mode as well. Other reason would be for example embedding it under wails/tauri with no backend required.
We use Svelte 4.0 in production and it performs beautifully; it rarely is the cause of our frustrations. Excited to try the new version.
Lately I’ve also been wondering about the relationship and correlation between software writing skills and writing skills.
Besides a mathematical inclination, an exceptionally good mastery of one's native tongue is the most vital asset of a competent programmer.
-- Edsger W.Dijkstra https://www.cs.utexas.edu/~EWD/transcriptions/EWD04xx/EWD498...
What makes you think about a possible correlation?
Is there are Svelte 5 Runes tutorial for those who are familiar with previous Svelte and Sveltekit?
Svelte is getting a new website soon too. It's in preview mode here: https://svelte-omnisite.vercel.app/. Tutorial is not completely converted yet.
(edit) Sorry, for previous users the preview site might be better: https://svelte-5-preview.vercel.app/docs/introduction
This really made my day. I decided to convert a pretty large project over to v5 a couple of months ago because the new APIs were so much nicer. I rolled the dice a bit because I wasn't sure if I was going to hit weird edge cases, but everything went smoothly. Congrats to the Svelte team and major kudos for coming up with runes!
Exciting, I love Svelte! Does anybody have experience with both Vue and Svelte? It's been a while since I used Vue but it seems like both frameworks have converged quite a bit over the years. With this release I'm particularly curious now: why would somebody pick one over the other?
Full v5.x changelog: https://github.com/sveltejs/svelte/blob/main/packages/svelte...
An interesting datapoint:
I made my first website a few months ago (I'm an ML engineer). I tried in both Svelte and React.
I used Sonnet as a copilot the whole time and expected Svelte to be more difficult because there are orders of magnitude less training data on it.
To the contrary! The LLM tied itself in knots very quickly with React but mostly did ok with Svelte/Sveltekit. Also, the Svelte stuff it makes is usually snappier. However it does have a wider range of UI widgets it can grasp with React.
It seems that my opinion that React is horrendously and hideously overcomplicated is at least somewhat objective! Svelte has been quite pleasant.
To any devs out there that have to work with React, you have my sympathies. Compared to Svelte it's just flaming hot putrid garbage.
Strong words, I actually enjoy it quite a lot. For trivial stuff I can see how Svelte can seem simpler. But effects, JSX, and the React model tend to be incredible at composition at scale. And the close to the metal to JS nature is something I strongly prefer.
Now granted I’d never use a reducer, and imo a decent state library is the biggest win if you are using React.
Where would one even start learning more about front-end development in today's world? Ignoring the dizzying amount of frameworks, how could I become knowledgeable enough to connect my back-end experience to design the "full stack?"
I think truly full stack is probably too much to ask: just accessibility is a huge area of knowledge, for example. I can fiddle around with back-ends, but I want someone more experienced to check my work or just directly help out with e.g. scaling or observability.
That said, if you truly want to learn, MDN is the reference, and they have a pretty good curriculum too: https://developer.mozilla.org/en-US/curriculum/
Also, ignore the dizzying amount of frameworks. Learn web technologies, and then React. There are millions of back-end tools as well, but in practice, you only use a limited set. Front-end is the same.
Play around with some stuff and see what works for you best. Personally, I didn’t get frontend at all before React came by, and then switched to Svelte because it fits my mental model exactly.
If you don’t like anything – no worries! Classic SSR with templates and stuff is a thing too, as another commenter pointed out.
Edit: no matter what, make sure you write good HTML first and foremost. Use proper semantic tags, don’t add dozens of nested divs, use native controls when possible etc. Make sure to check accessibility, but it should be OK if you don’t do any weird stuff. MDN is a great starting point.
Pick a stack and dive into it. If you find yourself getting analysis paralysis, just pick one arbitrarily; you're not getting married, you're just getting started. Make things and get feedback on them.
At the end of that process you'll have the background to reevaluate your decisions.
I just ignore the whole “frontend stack”. I would suggest to stick with traditional server side rendering and for interactivity use htmx/alpinejs.
Just choose one.
Is there any svelte components or better a full boilerplate/template to save the time building front-ends?
Good work! I’m not really sold on the runes stuff though (tldr: https://svelte.dev/blog/runes)
The old way is a bit “magical” in a sense that it does some stuff under the hood to implement the intention behind your code, but it reads really straightforward:
`let` in a .svelte compoment makes a variable reactive. If your state is outside a component, you use stores.With the `$store` rune, the way you make reactive stores inside and outside components is the same, but it only works in .svelte.js/ts. The unification is great – but why not just use `let` in .svelte.js, too?
I understand it can be really tricky – e.g. you might want to use let for things that are not modified in runtime and do not need reactivity, but it should be possible to determine in compile time. (Actually after writing this all up I think I know why Svelte went with runes instead, haha!)But again – really good work and I hope to try it out on my next project!
My only problem with this is because now is more verbose, why I should use Svelte over Vue? Arguably a more stablish framework.
No shadow dom and a better template directives? Maybe, not sure.
I don’t have a definite answer as I haven’t worked with Vue that much. Still, I like Svelte syntax a bit better (e.g. {#each x in xs} vs. v-for), and yeah, all the compile time reactivity stuff works out pretty well in terms of performance.
The runes are still optional, I think, and you can still use the old syntax. Not sure if that will be true in Svelte 6 though!
Finally.
Runes are a pretty slick addition, as someone who comes from React, this feels like home.
Do they still operate with very little backwards compatibility policy? They killed the sapper project and replaced it with sveltekit. Is sveltekit still alive?
They still support svelte 4 syntax and announced today as well a new migrate CLI to help moving from svelte 4 to svelte 5.
CLI tool: https://github.com/sveltejs/cli
Edit: added the link to the CLI tool
Sapper was a looong time ago in terms of web dev chronology. I even forgot.
Why makes you think SvelteKit could be dead? What a weird a pessimistic phrasing.
can I do async derived stores by default yet? It was kinda tricky to get working in svelte 4 and even Square/svelte-store wasn't super ergonomic. Would be super nice if it was built in
Blog post will be published on Monday:
https://x.com/Rich_Harris/status/1847682508822913359
What's the latest on building PWA's with Svelte/Kit 5?
From listening to webdev podcast #1, Syntax.fm, the gist I get is that a lot of what used to be invisible compiler magic is now more visible & explicit.
The compiler user to rewrite property access to make reactivity happen. Now you can kind of see yourself updating & reading/reacting as you sprinkle runes in. Implicit to explicit magic, with Runes as the headline demonstration of that. Other examples very welcome!
I learned Svelte 3 over a year ago and I found it very pleasant. Unlike React, Svelte is an integrated framework, no "pick your router" nonsense, I don't want to be picking a router.
I like the direction Svelte going in, the old syntax was ok but not great.
I wonder how this new Svelte compares with some of the other new kids on the block like solid.js and alpine.js.
nit: >React, Svelte is an integrated framework
You're talking about SvelteKit. Svelte does not have a router.
Good point.
[delayed]