Svelte

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.

Package Information

• Package Name: svelte
• Package Type: npm
• Language: JavaScript/TypeScript
• Version: 5.46.1
• Installation: npm install svelte

Quick Start

import { 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.

Core Imports

// 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';

Architecture Overview

Svelte consists of several key subsystems:

1. Compiler - Transforms .svelte files into optimized JavaScript
2. Runtime - Client-side reactivity system and component lifecycle
3. Runes - Reactive primitives ($state, $derived, $effect) for fine-grained reactivity
4. Stores - Standalone reactive state management
5. Server - Server-side rendering capabilities
6. Motion - Physics-based animations (Spring, Tween)
7. Transitions - Built-in visual transition effects
8. Legacy - Svelte 4 backward compatibility layer

Quick Reference

Core Concepts

Common Patterns

Documentation Structure

Guides

• Quick Start Guide - Step-by-step setup and first component
• Additional workflow guides as needed

Examples

• Real-World Scenarios - Comprehensive usage examples and patterns
• Edge Cases - Advanced scenarios and corner cases

Reference

• Compiler API - Compilation, parsing, preprocessing
• Reactivity System - Runes, reactive primitives, data structures
• Lifecycle & Components - Component lifecycle, mounting, context
• Stores - Writable, readable, derived stores
• Motion - Spring and Tween classes
• Transitions & Animations - Transition effects and FLIP animations
• Server-Side Rendering - SSR utilities
• Events & Actions - Event handling and action pattern
• TypeScript Types - Type definitions for components, elements, events
• Legacy Compatibility - Svelte 4 backward compatibility

Version Information

This documentation covers Svelte 5.46.1. Key features by version:

• 5.0+: Runes system, signals-based reactivity
• 5.7+: MediaQuery, createSubscriber, prefersReducedMotion
• 5.8+: Spring and Tween classes (modern API)
• 5.11+: Reactive window properties
• 5.20+: $props.id()
• 5.29+: Attachments API
• 5.42+: $effect.pending(), fork()

Related Resources

• Official documentation: https://svelte.dev/docs
• Migration guide (v4 to v5): https://svelte.dev/docs/svelte/v5-migration-guide
• Tutorial: https://svelte.dev/tutorial
• Examples: https://svelte.dev/examples