Svelte Is Sweet
How Svelte makes modern web development easy "for the rest of us"
Written by Mukesh Aryal
Written on 24th Nov, 2025
The image taken from svelte.dev depicts the Svelte machinery
that uses a compiler to transform Svelte components into HTML, CSS and JavaScript.
There are only two ways in which any new web developer starts their web development journey: either they go down
the React rabbit hole or they are forever juggling a million frameworks to do the very same thing.
You can't really blame them though. There are a million React courses on Udemy and five more million on YouTube.
When you ask an LLM to give frontend code, it almost always gives some React code. When you assess the frontend
developer market (in case it hasn't been deprecated by AI, of course 😉), most of the listings are for a React
developer.
While you can't undermine the massive impact React has had on all of web development, there are other ways to do
it. And more importantly, there are other better ways to do some things on the web. And Svelte shines
when you want to do just that.
Reactivity Is Sweet
Reactivity has been bread and butter since the advent of modern JavaScript frameworks. Svelte makes it so much
easier. We would always love reactive variables that just work: no getters and setters, and no
worrying about the "correct" way to change them. A reactive variable should just "react" to the changes and
sometimes even make the developer forget that the variable was reactive!
That is just how Svelte reactive variables work. We create a reactive variable by using the $state() rune in Svelte. "And how do you change them?" you ask? Just like how you would change any other variable! That is
the simplicity of reactivity in Svelte. Change the value and see it reflected in the UI.
let count = $state(0);
// Change it just like that
count = ;
Transitions Are Sweet
You can't build a beautiful web app without some transitions and animations. While CSS itself can handle a lot of
it, it gets quite tricky for component life cycles. You want to animate a component coming into the DOM and when
it is unmounted.
You could do animation-fill-mode: forwards for the component coming into the DOM, but it is really
complicated and painful for the latter. It involves timers and too many state variables and a lot of headaches to
do it properly. You'll often see libraries being used for this. Luckily for us, Svelte has this covered elegantly.
In Svelte, we have transitions like draw, fade, scale and many others available
right out of the box. We can just apply draw transition on the mount and unmount of the component using transition:draw on the component. Play with the values to see it in action.
Stores Are Sweet
When an app grows large and reactive data is to be passed around components, Svelte provides the store feature
within the core library. With the store feature, you can create reactive variables which can be subscribed to for
changes from any component within the app.
According to the Svelte docs, even though you
can always use reactivity through $state() rune, store comes in handy when the data management is
complex or that you require more manual control over the variables. You can use writable to create
store variables that can be modified or readable to only have the components subscribe to the changes
without the ability to change them.
Stores make it easier and less error prone
to have state management in large applications, where you'd again have to look for external libraries to do the job in
other frameworks.
Bundle Size Is Sweet
Another sweet thing about Svelte is the bundle size. As Svelte components are compiled, the actual "Svelte
footprint" in the final JavaScript is very little, which is present for the reactivity in applications. The
extra baggage for a Svelte app would be around 3-4 KB (gzipped) but no hardcoded numbers are present online.
This allows for apps built with Svelte to be much leaner and thus less harsh on the browser. As a result, for
small applets that need some reactivity without including the baggage that comes with a JavaScript framework,
Svelte is the go-to choice. That said, it can always handle day-to-day applications with ease.
SvelteKit Is Sweet
The Svelte experience is not limited to the frontend and you can use SvelteKit, the Svelte framework created
and maintained by the same community, to build full stack web applications. It adds full stack capabilities to
the already sweet features that Svelte provides for us.
Some of the sweet features of SvelteKit include filesystem-based routing which makes routing simpler and consistent
throughout the app, server-side rendering to allow for rendering components on the server and passing them as
HTML to the client, and remote functions for effortless type-safe communication between the client and the server.