# Svelte — Web Development for the Rest of Us

> Svelte is a radical new approach to building user interfaces. Unlike React and Vue which do the bulk of work in the browser, Svelte shifts that work to compile time — producing surgically efficient vanilla JavaScript that updates the DOM directly.

## Install

Save in your project root:

# Svelte — Web Development for the Rest of Us

## Quick Use
```bash
# Create a new SvelteKit project
npx sv create my-app
cd my-app && npm install && npm run dev

# Access at http://localhost:5173
```

```svelte
<!-- Counter.svelte -->
<script>
  let count = $state(0);

  function increment() {
    count++;
  }
</script>

<button onclick={increment}>
  Clicked {count} {count === 1 ? "time" : "times"}
</button>

<style>
  button {
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
  }
</style>
```

## Introduction
Svelte takes a fundamentally different approach to web development. While React and Vue use a virtual DOM and ship a runtime library to the browser, Svelte compiles your components into highly efficient vanilla JavaScript at build time. The result: smaller bundles, faster performance, and less code to write.

With over 86,000 GitHub stars, Svelte has earned the title of "most loved web framework" in developer surveys for multiple years. Svelte 5 introduced runes — a new reactivity system that makes state management even more intuitive while maintaining the compiler-first approach.

## What Svelte Does
Svelte is a compiler that takes declarative component code (.svelte files) and produces optimized JavaScript that surgically updates the DOM. No virtual DOM diffing, no runtime framework code. Each component compiles to a self-contained JavaScript class that knows exactly what to update when state changes.

## Architecture Overview
```
[.svelte Component Files]
HTML + JS + CSS in one file
        |
   [Svelte Compiler]
   Analyzes reactivity at build time
   Generates optimized JS output
        |
   [Compiled JavaScript]
   No virtual DOM
   No runtime overhead
   Direct DOM manipulation
        |
   [SvelteKit (meta-framework)]
   Routing, SSR, API routes
   Like Next.js for Svelte
        |
   [Output: tiny bundles]
   2-5KB base (vs 40-90KB for React/Angular)
```

## Self-Hosting & Configuration
```svelte
<!-- TodoApp.svelte (Svelte 5 with runes) -->
<script>
  let todos = $state([]);
  let newTodo = $state("");

  let remaining = $derived(todos.filter(t => !t.done).length);

  function addTodo() {
    if (newTodo.trim()) {
      todos.push({ text: newTodo, done: false });
      newTodo = "";
    }
  }

  function toggle(index) {
    todos[index].done = !todos[index].done;
  }
</script>

<h1>Todos ({remaining} remaining)</h1>

<form onsubmit={e => { e.preventDefault(); addTodo(); }}>
  <input bind:value={newTodo} placeholder="Add todo..." />
  <button type="submit">Add</button>
</form>

<ul>
  {#each todos as todo, i}
    <li class:done={todo.done}>
      <input type="checkbox" checked={todo.done} onchange={() => toggle(i)} />
      {todo.text}
    </li>
  {/each}
</ul>

<style>
  .done { text-decoration: line-through; opacity: 0.5; }
</style>
```

## Key Features
- **Compiler-First** — no runtime library shipped to the browser
- **Runes ($state, $derived)** — intuitive reactivity with Svelte 5
- **Scoped CSS** — styles are component-scoped by default
- **Two-Way Binding** — bind:value for forms, bind:this for elements
- **Transitions** — built-in animation and transition directives
- **Stores** — global state management with writable/readable stores
- **SvelteKit** — full-stack framework with SSR, routing, and deployment adapters
- **Smallest Bundles** — compiled output is dramatically smaller than alternatives

## Comparison with Similar Tools
| Feature | Svelte | React | Vue | SolidJS |
|---|---|---|---|---|
| Approach | Compiler | Virtual DOM | Virtual DOM | No VDOM, fine-grained |
| Runtime Size | ~2KB | ~42KB | ~33KB | ~7KB |
| Reactivity | Runes (compile-time) | Hooks (runtime) | Refs (runtime) | Signals (runtime) |
| Learning Curve | Very Low | Moderate | Low | Low |
| CSS | Scoped by default | CSS-in-JS / modules | Scoped + modules | CSS modules |
| Boilerplate | Minimal | Moderate | Low | Low |
| Meta-Framework | SvelteKit | Next.js | Nuxt | SolidStart |

## FAQ
**Q: Is Svelte production-ready?**
A: Yes. The New York Times, Apple, Spotify, Square, and many other companies use Svelte in production. SvelteKit 1.0+ is stable and production-ready.

**Q: What are Svelte 5 Runes?**
A: Runes ($state, $derived, $effect) are a new reactivity API that replaces the old "let" reactivity. They make state management explicit and work consistently in components, modules, and classes.

**Q: Svelte vs React — should I switch?**
A: Svelte offers less code, better performance, and an easier learning curve. React offers the largest ecosystem and job market. Choose Svelte for developer experience; React for ecosystem breadth.

**Q: Can I use Svelte with TypeScript?**
A: Yes. Svelte has first-class TypeScript support. Add lang="ts" to your script tag and enjoy full type checking, autocomplete, and type inference.

## Sources
- GitHub: https://github.com/sveltejs/svelte
- Documentation: https://svelte.dev
- SvelteKit: https://svelte.dev/docs/kit
- Created by Rich Harris (also created Rollup)
- License: MIT

---
Source: https://tokrepo.com/en/workflows/68f8cc68-3702-11f1-9bc6-00163e2b0d79
Author: AI Open Source