1. Introduction
Svelte isn’t just another JavaScript framework — it’s a fresh, compiler-first approach to building UIs that eliminates the traditional runtime overhead. With less boilerplate and better performance, Svelte 5 brings reactivity to the next level with a new syntax called Runes. In this blog, we’ll explore:
- What makes Svelte unique
- Key concepts in Svelte 5 (with the new Runes syntax)
- How reactivity really works
- Component structure, logic, and events
- When you should (or shouldn’t) use Svelte
2. What is Svelte?
Svelte is a compiler that turns declarative components into efficient, vanilla JavaScript at build time. Unlike frameworks like React or Vue that run in the browser, Svelte compiles away its abstractions — no virtual DOM, no heavy runtime.
You write components using .svelte files that look like this:
<script>/* JavaScript */</script>
<style>/* Scoped CSS */</style>
<!-- HTML -->At build time, Svelte turns this into fast, minimal JavaScript without needing a virtual DOM.
This build-first model is what makes Svelte incredibly fast and lightweight.
3. Under the Hood: How Svelte Works
Most frameworks like React or Vue work at runtime:
- You write components
- The browser loads a framework runtime
- The browser needs a virtual DOM to detect changes and update the real DOM
Svelte does things differently:
- You write components
- Svelte is a compiler, not a runtime. When you build your app, Svelte turns your components into plain JavaScript
- The compiled code knows exactly what to update and when — no virtual DOM needed
4. Why I Chose Svelte (And Why You Might Too)
After working extensively with React and Vue, what surprised me about Svelte was how little code I needed to write. No hooks, no class bindings, no useEffect mental gymnastics. Just straightforward logic and instant reactivity.
Svelte’s key benefits:
- Simple, readable syntax
- No virtual DOM — direct DOM updates
- Tiny bundle size, fast performance
- Fully reactive by default
- Great developer experience
It feels like writing plain JavaScript — but with superpowers.
5. Runes: Svelte 5’s New Reactivity Model
Svelte 5 introduces Runes — special functions (like $state, $derived, $effect) that make reactivity more explicit, predictable, and flexible.
Let me walk you through the core runes I found most useful — and why they matter.
5.1. $state() – Declaring reactive state
This declares count as a reactive variable.
The UI updates automatically when its value changes — no hooks, no re-renders, just clean updates.
<script>
let count = $state(0);
</script>
<p>Count is {count}</p>5.2. $derived() – Creating computed values
Whenever count changes, double is re-computed.
No dependencies to track manually — Svelte figures it out for you.
<script>
let count = $state(2);
let double = $derived(() => count * 2);
</script>
<p>Double: {double}</p>5.3. $effect() – Running side effects
This runs whenever any reactive value inside it changes.
It’s like useEffect, but smarter — no dependency arrays, no stale closures. You can even return a cleanup function, just like in React.
<script>
let count = $state(0);
$effect(() => {
console.log("Count is now:", count);
});
</script>5.4. $props() – Receiving props in components
Use destructuring to extract props passed from the parent.
$props()gives you an object of props passed from the parent component — destructure them however you like
<!-- Child.svelte -->
<script>
let { name = "Guest" } = $props();
</script>
<p>Hello {name}!</p><Child name="Tri" />You can also spread props:
<Child {...user} />5.5. Logic Blocks – Conditionals, loops, async
Svelte allows you to use control flow directly in your templates. These logic blocks make your UI dynamic in a clean and readable way.
5.5.1. {#if} / {:else if} / {:else}
Show or hide content based on conditions.
{#if loggedIn}
<p>Welcome!</p>
{:else}
<p>Please log in</p>
{/if}Only one block is rendered depending on the condition. It’s similar to
if/elsein JavaScript but works directly in your markup.
5.5.2. {#each} – Looping over arrays
Loops through the tasks array and renders each item. You can access the current item and its index.
{#each tasks as task, i}
<li>{i + 1}. {task}</li>
{/each}For better performance, add a unique key:
{#each users as user (user.id)}
<UserCard {...user} />
{/each}5.5.3. {#await} – Handling promises in markup
Useful for fetching data. Shows different UI for:
- Pending → Loading
- Success → Then
- Failure → Catch
{#await fetchUser()}
<p>Loading...</p>
{:then user}
<p>Name: {user.name}</p>
{:catch error}
<p>Error: {error.message}</p>
{/await}5.6. Event binding with on:eventName
Svelte makes it easy to attach event listeners with clear, HTML-like syntax.
Use on + event to bind events like click (onclick), input (oninput), keydown (onkeydown), etc.
<button onclick={() => count += 1}>
Clicked {count} times
</button>Or use a function handler:
<script>
function handleClick() {
alert('Button clicked!');
}
</script>
<button onclick={handleClick}>Click Me</button>5.7. $state.snapshot() – Get raw value for logging
Sometimes you’ll want to inspect the value of a $state() variable — maybe in console.log or debugging tools.
⚠️ If you log a
$statevariable directly, you’ll see a Proxy object, not the actual value.
To get the plain value, use:
console.log($state.snapshot(count)); // Outputs 0, 1, 2, ...Want to try Svelte right now? Head over to Svelte Tutorial and play with the examples — no setup required!
6. Svelte 5 Runes: Quick Reference
| Rune | Description |
|---|---|
$state() | Declare reactive state |
$derived() | Computed values from other reactive vars |
$effect() | Side effects when reactive values change |
$props() | Access props passed from parent |
$inspect() | Log state changes in dev mode |
$state.snapshot() | Get a non-reactive copy of state |
7. Pros and Cons
| Pros | Cons |
|---|---|
| Simpler and cleaner syntax | Smaller ecosystem than React/Vue |
| No runtime overhead → Faster performance | Tooling still maturing (e.g., SSR, adapters) |
| Ultra-fast and lightweight | Fewer available jobs in the market |
| Excellent DX and tooling | New Runes syntax might confuse older users |
| Compiles to efficient JS | Requires build step (can’t just link a .js file in HTML) |
8. When Should You Use Svelte?
Use Svelte if:
- You want minimal bundles and fast performance
- You’re building a small to medium-sized project
- You prefer simplicity over configuration
- You enjoy working close to “vanilla” web standards
Maybe reconsider if:
- Your team heavily depends on React/Vue libraries
- You need a mature plugin ecosystem or community support
- You’re building something very large and need battle-tested tooling
10. Final Thoughts
Svelte 5 is a fresh take on frontend development — one that emphasizes performance, simplicity, and joy. If you’re tired of bloated runtimes or repetitive boilerplate, it might be the tool you didn’t know you were waiting for.
Whether you’re building a side project, MVP, or exploring new tools — Svelte is absolutely worth your time.