1
# Svelte
2

3
Svelte is a revolutionary compile-time web application framework that transforms declarative component syntax into highly optimized vanilla JavaScript. Unlike traditional frameworks, Svelte performs the work during the build step, generating minimal and efficient code that surgically updates the DOM without requiring a virtual DOM layer.
4

5
## Package Information
6

7
- **Package Name**: svelte
8
- **Package Type**: npm
9
- **Language**: JavaScript with TypeScript support
10
- **Installation**: `npm install svelte`
11

12
## Core Imports
13

14
```typescript
15
import { onMount, onDestroy } from "svelte";
16
import { mount, hydrate } from "svelte";
17
```
18

19
For CommonJS:
20

21
```javascript
22
const { onMount, onDestroy } = require("svelte");
23
const { mount, hydrate } = require("svelte");
24
```
25

26
Module-specific imports:
27

28
```typescript
29
import { compile, parse } from "svelte/compiler";
30
import { fade, fly, slide } from "svelte/transition";
31
import { spring, tweened } from "svelte/motion";
32
import { writable, readable, derived } from "svelte/store";
33
import { flip } from "svelte/animate";
34
import { cubicOut, elasticOut, bounceIn } from "svelte/easing";
35
```
36

37
## Basic Usage
38

39
```typescript
40
import { mount } from "svelte";
41
import App from "./App.svelte";
42

43
// Mount a component
44
const app = mount(App, {
45
  target: document.getElementById("app"),
46
  props: {
47
    name: "World"
48
  }
49
});
50

51
// Use lifecycle functions in components
52
import { onMount, onDestroy } from "svelte";
53

54
let count = 0;
55
let interval;
56

57
onMount(() => {
58
  interval = setInterval(() => {
59
    count += 1;
60
  }, 1000);
61
});
62

63
onDestroy(() => {
64
  clearInterval(interval);
65
});
66
```
67

68
## Architecture
69

70
Svelte is built around several key components:
71

72
- **Compiler**: Transforms `.svelte` components and rune-based JavaScript into optimized code
73
- **Runtime**: Minimal runtime for reactivity, lifecycle management, and DOM updates
74
- **Reactivity System**: Runes-based reactive state with `$state`, `$derived`, and `$effect`
75
- **Component System**: Component mounting, hydration, and lifecycle management
76
- **Store System**: External state management with reactive stores
77
- **Animation & Transitions**: Built-in animation utilities and transition effects
78
- **Legacy Support**: Compatibility layer for migrating from Svelte 4
79

80
## Capabilities
81

82
### Component Lifecycle
83

84
Core component lifecycle functions for managing component initialization, updates, and cleanup.
85

86
```typescript { .api }
87
function onMount<T>(fn: () => NotFunction<T> | Promise<NotFunction<T>> | (() => any)): void;
88
function onDestroy(fn: () => any): void;
89
function beforeUpdate(fn: () => void): void;
90
function afterUpdate(fn: () => void): void;
91
```
92

93
[Component Lifecycle](./lifecycle.md)
94

95
### Component Rendering
96

97
Functions for mounting, hydrating, and unmounting Svelte components in the DOM.
98

99
```typescript { .api }
100
function mount<Props extends Record<string, any>, Exports extends Record<string, any>>(
101
  component: Component<Props, Exports, any>,
102
  options: MountOptions<Props>
103
): Exports;
104

105
function hydrate<Props extends Record<string, any>, Exports extends Record<string, any>>(
106
  component: Component<Props, Exports, any>,
107
  options: {} extends Props ? {
108
    target: Document | Element | ShadowRoot;
109
    props?: Props;
110
    events?: Record<string, (e: any) => any>;
111
    context?: Map<any, any>;
112
    intro?: boolean;
113
    recover?: boolean;
114
  } : {
115
    target: Document | Element | ShadowRoot;
116
    props: Props;
117
    events?: Record<string, (e: any) => any>;
118
    context?: Map<any, any>;
119
    intro?: boolean;
120
    recover?: boolean;
121
  }
122
): Exports;
123

124
function unmount(component: Record<string, any>, options?: { outro?: boolean }): Promise<void>;
125
```
126

127
[Component Rendering](./rendering.md)
128

129
### Context Management
130

131
API for sharing data between parent and child components through context.
132

133
```typescript { .api }
134
function getContext<T>(key: any): T;
135
function setContext<T>(key: any, context: T): T;
136
function hasContext(key: any): boolean;
137
function getAllContexts<T extends Map<any, any> = Map<any, any>>(): T;
138
```
139

140
[Context Management](./context.md)
141

142
### Reactivity Control
143

144
Functions for controlling reactive updates and execution timing.
145

146
```typescript { .api }
147
function tick(): Promise<void>;
148
function settled(): Promise<void>;
149
function untrack<T>(fn: () => T): T;
150
function flushSync<T = void>(fn?: (() => T) | undefined): T;
151
function getAbortSignal(): AbortSignal;
152
```
153

154
[Reactivity Control](./reactivity.md)
155

156
### Runes System
157

158
Svelte 5's runes-based reactivity system for declaring reactive state, derived values, and effects.
159

160
```typescript { .api }
161
declare function $state<T>(initial: T): T;
162
declare function $state<T>(): T | undefined;
163

164
declare function $derived<T>(expression: T): T;
165

166
declare function $effect(fn: () => void | (() => void)): void;
167

168
declare function $props(): any;
169

170
declare function $bindable<T>(fallback?: T): T;
171

172
declare function $inspect<T extends any[]>(
173
  ...values: T
174
): { with: (fn: (type: 'init' | 'update', ...values: T) => void) => void };
175

176
declare function $host<El extends HTMLElement = HTMLElement>(): El;
177
```
178

179
[Runes System](./runes.md)
180

181
### Snippet Creation
182

183
Functions for creating snippets programmatically from JavaScript functions.
184

185
```typescript { .api }
186
function createRawSnippet<T extends unknown[]>(fn: (...args: T) => {
187
  render: () => string;
188
  setup?: (element: Element) => void | (() => void);
189
}): Snippet<T>;
190
```
191

192
### Compiler API
193

194
Functions for compiling Svelte components and parsing source code.
195

196
```typescript { .api }
197
function compile(source: string, options: CompileOptions): CompileResult;
198
function compileModule(source: string, options: ModuleCompileOptions): CompileResult;
199
function parse(source: string, options?: ParseOptions): AST.Root;
200
function preprocess(source: string, preprocessor: PreprocessorGroup | PreprocessorGroup[], options?: PreprocessOptions): Promise<Processed>;
201
```
202

203
[Compiler API](./compiler.md)
204

205
### Motion & Animation
206

207
Animation utilities including springs, tweens, and FLIP animations.
208

209
```typescript { .api }
210
class Spring<T> {
211
  constructor(value: T, options?: SpringOpts);
212
  set(value: T, options?: SpringUpdateOpts): Promise<void>;
213
  target: T;
214
  get current(): T;
215
}
216

217
class Tween<T> {
218
  constructor(value: T, options?: TweenedOptions<T>);
219
  set(value: T, options?: TweenedOptions<T>): Promise<void>;
220
  get current(): T;
221
  target: T;
222
}
223

224
function flip(node: Element, params: FlipParams): AnimationConfig;
225
```
226

227
[Motion & Animation](./motion.md)
228

229
### Transitions
230

231
Built-in transition effects for element enter/exit animations.
232

233
```typescript { .api }
234
function fade(node: Element, params?: FadeParams): TransitionConfig;
235
function fly(node: Element, params?: FlyParams): TransitionConfig;
236
function slide(node: Element, params?: SlideParams): TransitionConfig;
237
function scale(node: Element, params?: ScaleParams): TransitionConfig;
238
function blur(node: Element, params?: BlurParams): TransitionConfig;
239
function draw(node: SVGElement & { getTotalLength(): number }, params?: DrawParams): TransitionConfig;
240
```
241

242
[Transitions](./transitions.md)
243

244
### Easing Functions
245

246
Mathematical easing functions for smooth animation curves.
247

248
```typescript { .api }
249
function linear(t: number): number;
250
function cubicOut(t: number): number;
251
function cubicIn(t: number): number;
252
function cubicInOut(t: number): number;
253
function elasticOut(t: number): number;
254
function bounceOut(t: number): number;
255
```
256

257
[Easing Functions](./easing.md)
258

259
### Store System
260

261
External state management with reactive stores for sharing state across components.
262

263
```typescript { .api }
264
function writable<T>(value?: T, start?: StartStopNotifier<T>): Writable<T>;
265
function readable<T>(value?: T, start?: StartStopNotifier<T>): Readable<T>;
266
function derived<S extends Stores, T>(stores: S, fn: (values: StoresValues<S>) => T, initial_value?: T): Readable<T>;
267
function get<T>(store: Readable<T>): T;
268
```
269

270
[Store System](./stores.md)
271

272
### Events
273

274
Utilities for event handling and DOM event management.
275

276
```typescript { .api }
277
function on(
278
  element: EventTarget, 
279
  event: string, 
280
  handler: EventListener, 
281
  options?: AddEventListenerOptions | boolean
282
): () => void;
283
```
284

285
### Attachments
286

287
System for creating and managing element attachments as an alternative to actions.
288

289
```typescript { .api }
290
function createAttachmentKey(): symbol;
291
function fromAction<E extends EventTarget, T>(
292
  action: Action<E, T>,
293
  fn?: () => T
294
): Attachment<E>;
295
```
296

297
### Server-Side Rendering
298

299
Functions for rendering Svelte components on the server.
300

301
```typescript { .api }
302
function render<Comp extends Component<any>>(
303
  component: Comp,
304
  options?: RenderOptions<ComponentProps<Comp>>
305
): RenderOutput;
306
```
307

308
[Server-Side Rendering](./ssr.md)
309

310
### Window Reactivity
311

312
Reactive values for window properties like dimensions, scroll position, and device characteristics.
313

314
```typescript { .api }
315
const innerWidth: ReactiveValue<number | undefined>;
316
const innerHeight: ReactiveValue<number | undefined>;
317
const scrollX: ReactiveValue<number | undefined>;
318
const scrollY: ReactiveValue<number | undefined>;
319
const online: ReactiveValue<boolean | undefined>;
320
const devicePixelRatio: ReactiveValue<number | undefined>;
321
```
322

323
[Window Reactivity](./reactivity-window.md)
324

325
### Legacy Compatibility
326

327
Utilities for migrating from Svelte 4 and working with legacy components.
328

329
```typescript { .api }
330
function createClassComponent<Props, Exports>(
331
  component: Component<Props, Exports>
332
): LegacyComponentConstructor<Props, Exports>;
333

334
function asClassComponent<Props, Exports>(
335
  component: Component<Props, Exports>
336
): Component<Props, Exports>;
337
```
338

339
[Legacy Compatibility](./legacy.md)
340

341
## Types
342

343
```typescript { .api }
344
interface Component<
345
  Props extends Record<string, any> = {},
346
  Exports extends Record<string, any> = {},
347
  Bindings extends keyof Props | '' = string
348
> {
349
  (internals: ComponentInternals, props: Props): Exports;
350
}
351

352
interface MountOptions<Props extends Record<string, any> = Record<string, any>> {
353
  target: Document | Element | ShadowRoot;
354
  anchor?: Node;
355
  events?: Record<string, (e: any) => any>;
356
  context?: Map<any, any>;
357
  intro?: boolean;
358
} & ({} extends Props
359
  ? { props?: Props }
360
  : { props: Props });
361

362
interface HydrateOptions<Props extends Record<string, any> = Record<string, any>> {
363
  target: Document | Element | ShadowRoot;
364
  events?: Record<string, (e: any) => any>;
365
  context?: Map<any, any>;
366
  intro?: boolean;
367
  recover?: boolean;
368
} & ({} extends Props
369
  ? { props?: Props }
370
  : { props: Props });
371

372
interface Snippet<Parameters extends unknown[] = []> {
373
  (...args: Parameters): SnippetReturn;
374
}
375

376
type ComponentProps<Comp extends Component<any, any>> = 
377
  Comp extends Component<infer Props, any> ? Props : never;
378

379
type NotFunction<T> = T extends Function ? never : T;
380

381
interface ComponentInternals {}
382

383
interface SnippetReturn {}
384

385
interface EventDispatcher<EventMap extends Record<string, any>> {
386
  <Type extends keyof EventMap>(
387
    ...args: null extends EventMap[Type]
388
      ? [type: Type, parameter?: EventMap[Type] | null | undefined]
389
      : undefined extends EventMap[Type]
390
        ? [type: Type, parameter?: EventMap[Type] | null | undefined]
391
        : [type: Type, parameter: EventMap[Type]]
392
  ): boolean;
393
}
394

395
interface Action<Element = HTMLElement, Parameter = undefined> {
396
  <Node extends Element>(
397
    ...args: undefined extends Parameter
398
      ? [node: Node, parameter?: Parameter]
399
      : [node: Node, parameter: Parameter]
400
  ): void | ActionReturn<Parameter>;
401
}
402

403
interface ActionReturn<Parameter = undefined> {
404
  update?: (parameter: Parameter) => void;
405
  destroy?: () => void;
406
}
407

408
interface Attachment<T extends EventTarget = Element> {
409
  (element: T): void | (() => void);
410
}
411

412
interface RenderOutput {
413
  head: string;
414
  html: string;
415
  body: string;
416
}
417
```