DEV Community

mpoiiii
mpoiiii

Posted on

Svelte 5: A Quick Guide from Basics to Deployment

#sveltekit #svelte #javascript #webdev

According to The State of JavaScript 2024 survey, Svelte's adoption has been steadily growing since 2020, gaining increasing attention in the developer community. While React and Vue remain the dominant choices, Svelte is moving from niche to mainstream, becoming a significant force in the frontend ecosystem.

If you haven't tried Svelte yet, this article will give you a quick overview of its core concepts, advantages, and how to get started.

What is Svelte? How is it Different from React/Vue?

Svelte is a frontend component framework for building user interfaces, just like React and Vue. But there's a fundamental difference: Svelte is a compile-time framework, while React and Vue are runtime frameworks.

What does this mean?

When you write code with React or Vue, the framework's runtime code (like the virtual DOM diffing algorithm) gets bundled into your project. When the browser loads your page, this runtime code executes on the user's device to handle reactive updates.

Svelte takes a different approach. It compiles your component code into efficient vanilla JavaScript during the build phase, directly manipulating the DOM. There's no "Svelte runtime" in the final bundle—just your business logic.

Here's an analogy:

  • React/Vue: You write a "recipe," and the framework "cooks the meal" in the user's browser
  • Svelte: The meal is already cooked on your machine; users get the "finished dish"
Comparison React / Vue Svelte
When it works Runtime (in browser) Compile time (build phase)
Virtual DOM Yes No
Framework runtime size Large (~40KB+) Nearly zero
Reactivity implementation Runtime dependency tracking Compile-time static analysis

Advantages and Use Cases

Now that you understand Svelte's "compile-time framework" design, you might wonder: what practical benefits does this bring? When should you use it?

Advantages

1. Smaller Bundle Size

No runtime means smaller bundles. A simple Svelte app might only be a few KB, while an equivalent React app needs 40KB+ just for the framework. For performance-sensitive scenarios, this difference is significant.

2. Better Performance

Without virtual DOM diffing overhead, Svelte directly manipulates the real DOM. In scenarios with many node updates, Svelte is typically faster than React/Vue. You might not notice this in everyday projects, but the difference exists.

3. Clean Syntax

This is probably my favorite thing about Svelte. Here's a counter component:

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  Clicked {count} times
</button>
Enter fullscreen mode Exit fullscreen mode

No useState, no ref. HTML, CSS, and JS live in a single .svelte file with a clear structure, close to vanilla web development.

4. Low Learning Curve

If you're familiar with HTML, CSS, and JavaScript, picking up Svelte is quick. There's no JSX mental overhead, and you don't need to understand rules like "why hooks can't be inside conditionals."

Good Use Cases

  • Personal projects / Small apps: Fast development, less code
  • Performance and size-sensitive scenarios: Embedded widgets, mobile H5, low-bandwidth environments
  • Teams wanting to try new tech: Svelte's developer experience is genuinely great
  • Static websites / Blogs: Combined with SvelteKit, you can easily generate static sites

Less Ideal Scenarios

  • Teams already deeply invested in React/Vue with heavy ecosystem dependencies
  • Projects requiring extensive third-party component libraries (Svelte's ecosystem is still smaller than React's)

Svelte 5: Runes Make Reactivity More Intuitive

In October 2024, Svelte 5 was officially released. If you're starting to learn Svelte now, just start with Svelte 5.

The biggest change in this version is the introduction of the Runes system, which fundamentally changes how reactive state is declared.

The Old "Implicit Magic"

In Svelte 4 and earlier, reactivity looked like this:

<script>
  let count = 0;           // Automatically becomes reactive
  $: doubled = count * 2;  // Automatically tracks dependencies
</script>
Enter fullscreen mode Exit fullscreen mode

Looks clean, right? But the problem is: you can't tell which variables are reactive and which are just regular variables. Variables declared with let at the component's top level automatically become reactive, but not inside functions. The $: syntax is also not intuitive and can confuse newcomers.

Svelte 5's Explicit Declarations

Svelte 5 introduces several Runes starting with $:

<script>
  let count = $state(0);             // Explicitly declare: this is reactive state
  let doubled = $derived(count * 2); // Explicitly declare: this is a derived value
</script>

<button onclick={() => count++}>
  {count} × 2 = {doubled}
</button>
Enter fullscreen mode Exit fullscreen mode

Now it's immediately clear:

  • $state() → This is a reactive variable
  • $derived() → This is a value computed from other state

Common Runes

Rune Purpose
$state Declare reactive state
$derived Declare derived state (like Vue's computed)
$effect Side effects, runs automatically when state changes (like React's useEffect)
$props Receive component props

Why is This More Beginner-Friendly?

  • No guessing: See $state and you know it's reactive—no hidden rules
  • More consistent: Same syntax whether at component top-level or inside functions
  • Easier debugging: When something breaks, it's easier to identify which state caused it

If you've learned React Hooks or Vue 3's Composition API, you'll find Runes follow a similar philosophy—using explicit function calls to declare reactive logic. But Svelte's syntax is cleaner with fewer rules to remember.

SvelteKit Overview

If Svelte is for writing components, SvelteKit is for building complete applications.

Its relationship to Svelte is like Next.js to React, or Nuxt to Vue. SvelteKit is Svelte's official application framework and the recommended way to start new projects.

What Does SvelteKit Provide?

1. File-based Routing

No manual route configuration needed. Create folders and files under src/routes, and routes are automatically generated:

src/routes/
├── +page.svelte          → /
├── about/
│   └── +page.svelte      → /about
└── blog/
    └── [slug]/
        └── +page.svelte  → /blog/:slug
Enter fullscreen mode Exit fullscreen mode

2. Multiple Rendering Modes

  • SSR (Server-Side Rendering): First screen rendered by server, SEO-friendly
  • CSR (Client-Side Rendering): Pure frontend rendering, suitable for admin dashboards
  • SSG (Static Site Generation): Generate HTML at build time, ideal for blogs and docs
  • Hybrid mode: Different pages can use different rendering strategies

3. Data Loading

Each route can have a +page.js (or +page.server.js) file to load data before rendering:

// src/routes/blog/+page.server.js
export async function load() {
  const posts = await db.getPosts();
  return { posts };
}
Enter fullscreen mode Exit fullscreen mode 
<!-- src/routes/blog/+page.svelte -->
<script>
  let { data } = $props();
</script>

{#each data.posts as post}
  <article>{post.title}</article>
{/each}
Enter fullscreen mode Exit fullscreen mode

4. Adapters

SvelteKit can deploy to various platforms. By switching adapters, the same codebase can deploy as:

  • Static website (adapter-static)
  • Node.js server (adapter-node)
  • Vercel / Netlify / EdgeOne Pages (each has its own adapter)

This design is very flexible—more on this in the deployment section.

Quick Project Setup 

npx sv create my-app
cd my-app
npm run dev
Enter fullscreen mode Exit fullscreen mode

A few commands and you have a complete project with routing and SSR support running.

How to Deploy Your SvelteKit App?

Project done—how do you let others access it? SvelteKit deployment depends on your project type. Simply put, there are two scenarios: static sites and full-stack projects requiring a server.

Scenario 1: Static Site Deployment

If your project doesn't need server-side logic (no +page.server.js, no API routes), you can generate static HTML files and deploy to any static hosting platform.

1. Install the Static Adapter 

npm install -D @sveltejs/adapter-static
Enter fullscreen mode Exit fullscreen mode

2. Update Configuration 

// svelte.config.js
import adapter from '@sveltejs/adapter-static';

const config = {
  kit: {
    adapter: adapter({
      pages: 'build',
      assets: 'build'
    })
  }
};

export default config;
Enter fullscreen mode Exit fullscreen mode

3. Enable Prerendering

Add to your root layout file:

// src/routes/+layout.js
export const prerender = true;
Enter fullscreen mode Exit fullscreen mode

4. Build 

npm run build
Enter fullscreen mode Exit fullscreen mode

After building, the build directory contains pure static files, deployable to:

Platform Features
Vercel Generous free tier, great deployment experience
Netlify Similar to Vercel, very convenient
GitHub Pages Free, great for personal and open-source projects
EdgeOne Pages Tencent Cloud's platform, fast if you have users in Asia

All these platforms support connecting to Git repositories for automatic deployment—much more convenient than manually uploading build files. Just connect your GitHub repo and it automatically handles building and deployment. Every push triggers an automatic update.

Scenario 2: Full-Stack Project Deployment

If your project uses server-side features (SSR, API routes, database operations), you need a platform that supports edge functions or serverless.

Here are some solid options with native SvelteKit support:

Vercel - The most popular choice, zero-config deployment:

npm install -D @sveltejs/adapter-vercel
Enter fullscreen mode Exit fullscreen mode

Netlify - Similar experience to Vercel:

npm install -D @sveltejs/adapter-netlify
Enter fullscreen mode Exit fullscreen mode

EdgeOne Pages - Worth considering if you have users in Asia-Pacific region, comes with its own adapter:

npm install -D @edgeone/sveltekit
Enter fullscreen mode Exit fullscreen mode

Configuration is similar for all platforms:

// svelte.config.js
import adapter from '@sveltejs/adapter-vercel'; 
// or '@sveltejs/adapter-netlify'
// or '@edgeone/sveltekit'

const config = {
  kit: {
    adapter: adapter()
  }
};

export default config;
Enter fullscreen mode Exit fullscreen mode

Then connect your Git repository in the platform's dashboard—deployment is automatic from there. Check each platform's docs for detailed setup instructions.

If you prefer not to use serverless platforms, you can use the official @sveltejs/adapter-node to generate a complete Node.js application and deploy to your own server with PM2 + Nginx.

Conclusion

Svelte's core advantage lies in its "compile-time framework" philosophy—doing the work during build time to produce smaller, faster output. The Runes system introduced in Svelte 5 makes reactive declarations more explicit and intuitive, lowering the learning curve.

Combined with SvelteKit, you can quickly build everything from static blogs to full-stack applications, with flexible deployment options.

Of course, Svelte has its limitations: the ecosystem isn't as mature as React's, and community resources and third-party libraries are relatively fewer. But if you're working on personal projects or your team is open to trying new technologies, Svelte is definitely worth a shot.

Learning Resources

Official Resources (Recommended First)

Practice Suggestions

  1. Go through the official tutorial first—takes about 1-2 hours
  2. Build a personal blog or Todo app with SvelteKit
  3. Try deploying to Vercel or EdgeOne Pages to experience the complete workflow

That's the Svelte introduction. If you've been using React or Vue, spend an afternoon trying Svelte—its developer experience might surprise you.

Feel free to drop questions in the comments! 👋

Top comments (0)