What Is Svelte? The Framework That Feels Like Writing HTML

What Svelte Actually Is

Most frontend frameworks — React, Vue, Angular — work by shipping a runtime library to the browser alongside your application code. That runtime is what makes components update when data changes. It runs a process called the virtual DOM — a shadow copy of your page that gets compared to the real DOM every time something changes, so it knows what to update.

Svelte throws out that entire model.

Instead of shipping a runtime to the browser, Svelte is a compiler. When you build your project, Svelte reads your component files and converts them into plain, efficient JavaScript — the kind of JavaScript that talks directly to the browser's DOM with zero middleman. No virtual DOM. No diffing algorithm. No library the user has to download. Just tight, surgical code that says: "when this variable changes, update exactly this element."

Think of it this way. React is like hiring a general contractor who brings their entire crew, tools, and truck every time you need a nail driven. Svelte is like arriving on-site with exactly the right tools already in hand, pre-cut lumber, and a plan that's already been figured out before anyone shows up. The work gets done faster and lighter because the thinking happened before the job started.

The practical result: Svelte apps are smaller, faster, and — this is the part that matters most for new builders — the code looks dramatically more like the HTML you already know.

What Svelte Code Actually Looks Like

Here's a complete, working Svelte component. Read it like you'd read an HTML file — because that's basically what it is:

<script>
  let name = 'world';
</script>

<h1>Hello {name}!</h1>

<style>
  h1 {
    color: navy;
    font-size: 2rem;
  }
</style>

That's it. A <script> block for your JavaScript logic. Regular HTML markup in the middle. A <style> block for your CSS. The styles are automatically scoped to this component only — they won't leak out and break other parts of your page.

Now compare that to the equivalent in React:

import React from 'react';
import styles from './Hello.module.css';

function Hello() {
  const name = 'world';

  return (
    <h1 className={styles.heading}>Hello {name}!</h1>
  );
}

export default Hello;

The React version requires an import, a function, a return statement, JSX syntax (which looks like HTML but isn't — notice className instead of class), and a separate CSS Modules file to get scoped styles. That's fine once you know it. But if you're coming from HTML and CSS, the Svelte version is immediately readable. The React version requires learning a new dialect.

This one-file-per-component structure in Svelte — with script, markup, and styles all in the same .svelte file — is called a Single File Component. Vue uses the same idea. It feels natural because it mirrors how you think about a self-contained piece of UI: this thing has logic, structure, and style, and they all belong together.

Reactivity Without useState

Here's the thing that most surprises people coming from React: in Svelte, you don't need useState. You just declare a variable. When the variable changes, the UI updates. That's it.

Here's an interactive counter — the "Hello World" of UI interactivity:

<script>
  let count = 0;

  function increment() {
    count += 1;
  }

  function decrement() {
    count -= 1;
  }
</script>

<div class="counter">
  <button on:click={decrement}>-</button>
  <span>{count}</span>
  <button on:click={increment}>+</button>
</div>

<style>
  .counter {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.5rem;
  }

  button {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    cursor: pointer;
    font-size: 1.25rem;
  }

  span {
    min-width: 2rem;
    text-align: center;
  }
</style>

Let's look at what's happening here piece by piece:

• let count = 0 — just a regular JavaScript variable. No special hook. No special syntax.
• count += 1 — just regular assignment. Svelte sees this happening and knows to update the DOM.
• on:click={increment} — Svelte's event syntax. Similar to HTML's onclick but cleaner.
• {count} in the markup — curly braces display the current value of any variable.

Now here's the same counter in React, for comparison:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div className="counter">
      <button onClick={() => setCount(count - 1)}>-</button>
      <span>{count}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

The React version requires importing useState, destructuring an array, and calling setCount to update state. It's not hard once you know it — but it requires learning a specific mental model about how React manages state. In Svelte, you just write JavaScript. The framework figures out the reactive parts for you at compile time.

If you've spent time in construction or project management, the Svelte approach feels like marking up a blueprint directly — what you write is what gets built. React feels more like an abstract spec that a separate system then interprets.

Real Example: A Working To-Do List

Let's go a step further with something you'd actually build — a simple to-do list. This shows how Svelte handles lists, user input, and derived state:

<script>
  let items = [
    { id: 1, text: 'Learn Svelte basics', done: false },
    { id: 2, text: 'Build a SvelteKit project', done: false },
    { id: 3, text: 'Ship something real', done: false }
  ];

  let newItem = '';

  function addItem() {
    if (!newItem.trim()) return;
    items = [
      ...items,
      { id: Date.now(), text: newItem.trim(), done: false }
    ];
    newItem = '';
  }

  function toggleItem(id) {
    items = items.map(item =>
      item.id === id ? { ...item, done: !item.done } : item
    );
  }

  function removeItem(id) {
    items = items.filter(item => item.id !== id);
  }

  $: remaining = items.filter(item => !item.done).length;
</script>

<div class="todo-app">
  <h2>To-Do List</h2>
  <p class="summary">{remaining} item{remaining !== 1 ? 's' : ''} remaining</p>

  <form on:submit|preventDefault={addItem}>
    <input
      bind:value={newItem}
      placeholder="Add a new item..."
      type="text"
    />
    <button type="submit">Add</button>
  </form>

  <ul>
    {#each items as item (item.id)}
      <li class:done={item.done}>
        <input
          type="checkbox"
          checked={item.done}
          on:change={() => toggleItem(item.id)}
        />
        <span>{item.text}</span>
        <button on:click={() => removeItem(item.id)}>Remove</button>
      </li>
    {/each}
  </ul>
</div>

<style>
  .todo-app { max-width: 480px; margin: 0 auto; }
  form { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
  input[type="text"] { flex: 1; padding: 0.5rem; }
  ul { list-style: none; padding: 0; }
  li { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; }
  li.done span { text-decoration: line-through; opacity: 0.5; }
  .summary { color: #666; margin-bottom: 0.75rem; }
</style>

A few Svelte-specific things to notice here:

$: remaining = ... — The dollar-sign prefix creates a reactive declaration. This is Svelte's way of saying "whenever the variables in this expression change, recalculate it automatically." remaining will always be up to date without you needing to do anything. No useMemo, no manual updates.

bind:value={newItem} — This is two-way binding. The input's value is tied directly to the newItem variable. When the user types, newItem updates. When your code sets newItem = '', the input clears. One line, both directions.

on:submit|preventDefault — Svelte's event modifiers. The pipe character lets you chain on browser event behaviors like preventDefault without writing extra code.

{#each items as item (item.id)} — Svelte's loop syntax. The (item.id) part is the key — same idea as React's key prop, but right in the loop declaration.

class:done={item.done} — Conditional CSS classes, the Svelte way. This adds the done class to the <li> when item.done is true. Clean and readable.

How Svelte Differs From React: The Real Comparison

This isn't about which framework is better — they're different tools with different philosophies. But understanding the differences will help you pick the right one (and understand why your AI tool picked it for you).

The compilation model vs. the runtime model. React ships React itself to the browser. When you open a React app, the browser downloads the React library and then runs your component tree through it. Svelte compiles your code away — the browser gets plain JavaScript. For small-to-medium apps, this means smaller bundles and faster initial loads. For very large apps, the difference narrows because the per-component compiled code adds up.

Reactivity model. React uses useState and an explicit rendering cycle. When state changes, React re-renders the component and reconciles the virtual DOM. Svelte uses compile-time reactivity — the compiler figures out exactly what needs to update based on variable assignments and writes direct DOM manipulation code. There's no virtual DOM at all.

Syntax and learning curve. React uses JSX — JavaScript that looks like HTML but has its own rules (className instead of class, htmlFor instead of for, all tags must close). Svelte uses actual HTML with curly brace template syntax. For someone who knows HTML and JavaScript, Svelte's learning curve is noticeably gentler.

Ecosystem size. React wins here, and it's not close. React has been around since 2013. Svelte launched in 2016 and Svelte 5 (the current major version) landed in 2024. React has more libraries, more tutorials, more Stack Overflow answers, and more job postings. If you're building something that needs a complex data grid, a specialized charting library, or integration with enterprise tooling, React's ecosystem depth is a real advantage.

Component libraries. React has Material UI, shadcn/ui, Radix, Mantine, Chakra, and dozens more. Svelte has shadcn-svelte, Skeleton, Flowbite Svelte, and others — solid options, but fewer of them. If you need a pre-built component for a very specific use case, you're more likely to find it in React-land.

Here's a quick side-by-side for the pieces that matter most day to day:

Feature	Svelte	React
State management	let count = 0	const [count, setCount] = useState(0)
Event handling	on:click={handler}	onClick={handler}
Two-way binding	bind:value={name}	Manual: onChange + setValue
Loops	{#each items as item}	items.map(item => ...)
Conditionals	{#if condition}	{condition && <JSX />}
Scoped styles	Built in, automatic	CSS Modules or styled-components
Derived state	$: doubled = count * 2	useMemo(() => count * 2, [count])
Ecosystem	Growing, smaller	Massive, established

SvelteKit: When Svelte Grows Up

Svelte alone handles the component layer — building individual UI pieces. But real apps need more than components. They need routing (multiple pages), server-side logic, API endpoints, forms that work, and a way to deploy to the internet.

That's where SvelteKit comes in.

SvelteKit is the full-stack framework built on top of Svelte — the same relationship that Next.js has to React. You write Svelte components for your UI, and SvelteKit adds the architecture around them: file-based routing, server-side rendering, API routes, form actions, and adapters for deploying to Vercel, Netlify, Cloudflare, or a plain Node server.

Here's what a SvelteKit project structure looks like:

my-app/
├── src/
│   ├── routes/
│   │   ├── +page.svelte          # The home page (/)
│   │   ├── +layout.svelte        # Shared layout (nav, footer)
│   │   ├── about/
│   │   │   └── +page.svelte      # The /about page
│   │   └── api/
│   │       └── items/
│   │           └── +server.js    # API endpoint: GET /api/items
│   └── lib/
│       └── components/           # Reusable Svelte components
├── static/                       # Static files (images, fonts)
└── svelte.config.js

The file-based routing means you don't configure routes anywhere — the folder structure is the router. Create a folder called dashboard inside routes, put a +page.svelte in it, and your app now has a /dashboard page. This is the same pattern Next.js uses, so if you've used Next.js it'll feel familiar.

SvelteKit's server-side features let you load data before the page renders — important for SEO and performance — and handle form submissions directly in your page files without building a separate API first:

// src/routes/+page.server.js
// This runs on the server — the user never sees this code

export async function load() {
  const posts = await fetch('https://api.example.com/posts');
  const data = await posts.json();

  return {
    posts: data
  };
}

<!-- src/routes/+page.svelte -->
<!-- The data from load() is automatically available here -->

<script>
  export let data;
</script>

<h1>Posts</h1>

{#each data.posts as post}
  <article>
    <h2>{post.title}</h2>
    <p>{post.excerpt}</p>
  </article>
{/each}

The server-side load function and the page component are separate files but they work together automatically. SvelteKit handles the wiring. You just export a load function and a data prop, and the framework connects them.

Svelte 5 and Runes: The New Reactivity Model

Svelte 5, released in late 2024, introduced a new reactivity system called runes. If you look at newer Svelte code or Svelte 5 tutorials, you'll see syntax like $state() and $derived() that looks a bit different from the classic Svelte examples above.

Here's the counter example rewritten with Svelte 5 runes:

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>

<button onclick={() => count++}>
  Count: {count} (doubled: {doubled})
</button>

The $state() rune makes it explicit that this variable is reactive state — similar to how React makes you call useState. The $derived() rune replaces the $: reactive declaration syntax from earlier versions. Runes also work inside regular .js and .ts files, not just .svelte files, which makes it easier to share logic across your app.

The classic syntax (the let count = 0 style from the earlier examples) still works in Svelte 5 — this is the "legacy mode." If you're starting a brand new project in 2026, your AI tool will likely generate Svelte 5 runes-style code. If you're reading older Svelte tutorials, you'll see the classic syntax. Both work. Both look more like HTML than React does.

When AI Suggests Svelte vs. React

If you've used AI tools for any length of time, you've probably noticed they sometimes confidently suggest React and sometimes confidently suggest Svelte, without always explaining why. Here's the actual pattern:

AI tools tend to suggest Svelte when:

• You say you're a beginner or that you want something approachable
• The project is a standalone tool, widget, or small interactive app
• You ask for "clean" or "minimal" code with low overhead
• You mention that you know HTML and CSS but not much JavaScript framework knowledge
• The project doesn't have heavy library requirements (no specialized data grids, payment UI components, etc.)
• Performance and bundle size are mentioned as priorities

AI tools tend to suggest React when:

• The project mentions Next.js, Vercel, or an existing React codebase
• You need a specific library that only exists in React (complex UI components, industry-specific tools)
• You're building something that will have multiple developers — React's ubiquity means easier hiring
• The project involves a large component library you want to drop in (shadcn/ui, Material UI, etc.)
• You've mentioned React familiarity or JSX in your prompts

Neither choice is wrong. If you're building something and your AI tool suggests Svelte, take it seriously — it's often recognizing that Svelte's clean syntax will produce code that's easier for both of you to read, iterate on, and debug. The AI's output in Svelte is often more readable, which makes it easier for you to catch mistakes and make changes.

Getting Started With Svelte Today

If you want to try Svelte without setting anything up locally, go to svelte.dev/repl — the online playground. You can write Svelte components and see them render immediately with zero installation.

To start a real SvelteKit project on your machine, you need Node.js installed. Then in your terminal:

# Create a new SvelteKit project
npx sv create my-app

# Move into the project folder
cd my-app

# Install dependencies
npm install

# Start the development server
npm run dev

The sv create command (from the official Svelte CLI) walks you through the options: do you want TypeScript? Which template? Do you want Prettier or ESLint? Say yes to whatever your AI tool suggests, or keep it minimal if you just want to experiment.

Once the dev server is running, open your browser to localhost:5173. Edit src/routes/+page.svelte and watch the browser update instantly. That's Svelte's hot module replacement — your changes appear without a full page reload.

From there, your AI tool is an excellent Svelte collaborator. Give it a task:

What to Learn Next

Now that you understand what Svelte is and how it differs from React, here are the most useful next reads:

• What Is React? — If you want to understand the framework Svelte is most often compared to. Knowing both helps you choose intelligently and switch when needed.
• What Is HTML? — The foundation that makes Svelte feel so natural. The closer you are to HTML, the faster Svelte clicks.
• What Is JavaScript? — Svelte compiles to JavaScript, and the more you understand the underlying language, the better you'll read and debug Svelte's output.
• What Is Tailwind CSS? — Tailwind pairs extremely well with Svelte. The combination of Svelte's clean markup and Tailwind's utility classes produces code that's easy to read and fast to write.
• What Is a Component? — The mental model behind both Svelte and React. Understanding components deeply makes you better with any frontend framework.

Frequently Asked Questions