What is Svelte? | Build BookIt with Svelte 5

A Different Kind of Framework

You’re about to build BookIt — a service booking app where customers can browse services, make reservations, and manage their appointments. But before we write any code, let’s understand the tool we’re using to build it.

Svelte isn’t like other JavaScript frameworks. While React and Vue ship a runtime to your users’ browsers, Svelte does its heavy lifting at build time. This fundamental difference shapes everything about how you’ll build BookIt.

What You’ll Learn

How Svelte differs from runtime frameworks like React and Vue
What “compiler-first” means in practice
Why Svelte produces smaller, faster applications
How SvelteKit extends Svelte for full applications

The Runtime Problem

Most JavaScript frameworks work the same way: your browser downloads the framework code, then the framework figures out what to render and how to update it when things change.

Here’s the typical flow with a runtime framework:

Browser downloads your app code
Browser downloads the framework (React: ~40KB, Vue: ~33KB)
Framework initializes and reads your component definitions
Framework builds a virtual representation of your UI
When state changes, framework compares old and new virtual UI
Framework calculates the minimal DOM updates needed
Framework applies those updates

That’s a lot of work happening in your users’ browsers — work that’s essentially the same for every app using that framework.

The Svelte Approach

Svelte flips this model. Instead of shipping a framework that interprets your code at runtime, Svelte compiles your components into vanilla JavaScript at build time.

When you write a Svelte component, the compiler analyzes it and generates highly optimized code that knows exactly how to update the DOM when state changes. No virtual DOM diffing. No framework overhead. Just surgical DOM updates.

Here’s what the Svelte flow looks like:

You write Svelte components
Svelte compiler transforms them into optimized JavaScript
Browser downloads only your compiled app code
Your code updates the DOM directly when state changes

The key insight: all that “figure out what changed” logic gets moved from runtime to compile time. Your users don’t pay for it.

What This Means for BookIt

When we build BookIt, this compiler approach gives us concrete benefits.

Smaller bundles. The JavaScript we ship contains only what BookIt needs — no framework runtime. A typical Svelte app ships 3-5KB of framework code versus 30-40KB for React.

Faster startup. Less JavaScript means less to download, parse, and execute. BookIt will be interactive faster.

Simpler mental model. Svelte components look like HTML with superpowers. You write what looks like standard HTML, CSS, and JavaScript, and the compiler handles the reactivity.

Here’s a preview of what a simple Svelte component looks like:

<!-- filename: ServiceCard.svelte -->
<script>
  let { name, price } = $props()
</script>

<div class="card">
  <h3>{name}</h3>
  <p>${price}</p>
</div>

<style>
  .card {
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
</style>

That’s a complete component. The {name} and {price} in the HTML are reactive — when they change, Svelte updates just those text nodes. No diffing algorithm, no reconciliation. The compiler generated code that says “when name changes, update this specific text node.”

Svelte vs SvelteKit

You’ll see both terms throughout this course. Here’s the distinction:

Svelte is the component framework and compiler. It handles UI components, reactivity, and styling.

SvelteKit is the application framework built on top of Svelte. It adds routing, server-side rendering, data loading, form handling, and everything else you need for a complete web application.

Think of it this way: Svelte is for building components, SvelteKit is for building applications. BookIt is a SvelteKit application made up of Svelte components.

We’ll use SvelteKit from the start because BookIt needs routing (different pages for services, bookings, etc.), data loading (fetching services from a database), and form handling (submitting booking requests). SvelteKit provides all of this out of the box.

Svelte 5: The Latest Version

This course uses Svelte 5, the latest major version released in late 2024. Svelte 5 introduced “runes” — a new way to handle reactivity that’s more explicit and powerful than previous versions.

If you’ve seen older Svelte tutorials, you might notice some syntax differences. The core concepts remain the same, but Svelte 5’s runes give you more control and better TypeScript support.

Don’t worry if you haven’t used earlier versions — we’ll learn Svelte 5 from scratch. And if you have used Svelte before, the new patterns will feel familiar after the first few lessons.

Summary

Svelte is a compiler that transforms your components into optimized JavaScript at build time. Instead of shipping a framework runtime to interpret your code in the browser, Svelte generates code that knows exactly how to update the DOM.

Key takeaways:

Svelte compiles components at build time, not runtime
This produces smaller bundles and faster applications
SvelteKit adds routing, data loading, and full application features
We’re using Svelte 5 with the new runes syntax

Next Steps

Now that you understand what makes Svelte different, let’s put it to work. In the next lesson, Create the BookIt Project, we’ll scaffold our SvelteKit application and see the file structure we’ll be working with throughout this course.