Introduction

Svelte is a compiler: you write components, and Svelte turns them into small, fast JavaScript. Version 5 adds runes — a tiny set of signals that make reactivity explicit.

What is Svelte

A component lives in a .svelte file and has three parts: a <script> for logic, markup for structure, and <style> for scoped CSS.

Your first component

<script>
  let name = $state('world');
</script>

<input bind:value={name} />
<h1>Hello {name}!</h1>

$state makes a value reactive: when it changes, the parts of the UI that use it update automatically. bind:value keeps the input and the variable in sync.

Running it

• Scaffold a project with npx sv create my-app
• Install deps with npm install
• Start the dev server with npm run dev