Svelte is a compiler-based UI framework that transforms declarative component code into efficient imperative JavaScript that surgically updates the DOM. Unlike virtual DOM frameworks, Svelte compiles components at build time into highly optimized vanilla JavaScript, resulting in smaller bundle sizes and faster runtime performance.
npm install svelteimport { mount } from 'svelte';
import App from './App.svelte';
const app = mount(App, {
target: document.body,
props: { name: 'world' }
});See Quick Start Guide for detailed setup instructions.
// Main runtime (lifecycle, components, context)
import {
onMount, onDestroy, tick, flushSync,
mount, hydrate, unmount,
getContext, setContext, hasContext
} from 'svelte';
// Stores
import { writable, readable, derived, get } from 'svelte/store';
// Transitions and animations
import { fade, fly, slide } from 'svelte/transition';
import { flip } from 'svelte/animate';
// Server-side rendering
import { render } from 'svelte/server';
// Motion
import { Spring, Tween } from 'svelte/motion';
// Events
import { on } from 'svelte/events';
// Compiler
import { compile, parse, preprocess } from 'svelte/compiler';For TypeScript:
import type { Component, ComponentProps, Snippet } from 'svelte';
import type { Action } from 'svelte/action';
import type { Writable, Readable } from 'svelte/store';Svelte consists of several key subsystems:
| Concept | Description | Reference |
|---|---|---|
| Runes | Compile-time reactive primitives ($state, $derived, $effect) | Reactivity |
| Components | Declarative UI components with lifecycle hooks | Lifecycle & Components |
| Stores | Standalone reactive state management | Stores |
| Transitions | Built-in visual transition effects | Transitions |
| Motion | Physics-based animations (Spring, Tween) | Motion |
| SSR | Server-side rendering utilities | Server |
| Compiler | Programmatic compilation and AST parsing | Compiler |
| Types | TypeScript type definitions | Types |
| Pattern | Example | Reference |
|---|---|---|
| Component Mounting | mount(Component, { target, props }) | Lifecycle |
| Reactive State | let count = $state(0) | Reactivity |
| Derived Values | let doubled = $derived(count * 2) | Reactivity |
| Effects | $effect(() => console.log(count)) | Reactivity |
| Store Creation | const store = writable(0) | Stores |
| Transitions | transition:fade | Transitions |
| Actions | use:action directive | Events & Actions |
This documentation covers Svelte 5.46.1. Key features by version: