svelte

svelte

Version 5.53.5
Published 1 day ago
2.8 MB
16 dependencies
MIT license

Install

npm i svelte

yarn add svelte

pnpm add svelte

Overview

Cybernetically enhanced web apps

Index

Functions

$bindable()
$derived()
$effect()
$host()
$inspect()
$props()
$state()

Namespaces

*.svelte
- Comp
- Comp
$bindable
$derived
$effect
$host
$inspect
$props
$state
svelte
svelte/action
- Action
- ActionReturn
svelte/animate
svelte/attachments
svelte/compiler
svelte/compiler.AST
svelte/compiler.AST.CSS
svelte/easing
svelte/events
- on()
svelte/legacy
svelte/motion
svelte/reactivity
svelte/reactivity/window
svelte/server
- render()
svelte/store
svelte/transition
svelte/types/compiler/interfaces
- CompileOptions
- Warning
svelte/types/compiler/preprocess

Functions

function $bindable

$bindable: typeof $bindable;

Declares a prop as bindable, meaning the parent component can use bind:propName={value} to bind to it.
let { propName = $bindable() }: { propName: boolean } = $props();
See Also

function $derived

$derived: typeof $derived;

Declares derived state, i.e. one that depends on other state variables. The expression inside $derived(...) should be free of side-effects.
Example:
let double = $derived(count * 2);
Parameter expression
The derived state expression
See Also

function $effect

$effect: typeof $effect;

Runs code when a component is mounted to the DOM, and then whenever its dependencies change, i.e. $state or $derived values. The timing of the execution is after the DOM has been updated.
Example:
$effect(() => console.log('The count is now ' + count));
If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.
Does not run during server-side rendering.
Parameter fn
The function to execute
See Also

function $host

$host: typeof $host;

Retrieves the this reference of the custom element that contains this component. Example:

<svelte:options customElement="my-element" />

<script>
	function greet(greeting) {
		$host().dispatchEvent(new CustomEvent('greeting', { detail: greeting }))
	}
</script>

<button onclick={() => greet('hello')}>say hello</button>

Only available inside custom element components, and only on the client-side.

function $inspect

$inspect: typeof $inspect;

Inspects one or more values whenever they, or the properties they contain, change. Example:
$inspect(someValue, someOtherValue)
$inspect returns a with function, which you can invoke with a callback function that will be called with the value and the event type ('init' or 'update') on every change. By default, the values will be logged to the console.
$inspect(x).with(console.trace); $inspect(x, y).with(() => { debugger; });
See Also

function $props

$props: typeof $props;

Declares the props that a component accepts. Example:

let { optionalProp = 42, requiredProp, bindableProp = $bindable() }: { optionalProp?: number; requiredProps: string; bindableProp: boolean } = $props();

function $state

$state: typeof $state;

Declares reactive state.
Example:
let count = $state(0);
Parameter initial
The initial value
See Also

Namespaces

namespace *.svelte

module '*.svelte' {}

variable Comp

const Comp: LegacyComponentType;

type Comp

type Comp = SvelteComponent;

namespace $bindable

namespace $bindable {}

variable apply

const apply: never;

Deprecated

variable bind

const bind: never;

Deprecated

variable call

const call: never;

Deprecated

variable caller

const caller: never;

Deprecated

variable length

const length: never;

Deprecated

variable name

const name: never;

Deprecated

variable toString

const toString: never;

Deprecated

namespace $derived

namespace $derived {}

variable apply

const apply: never;

Deprecated

variable bind

const bind: never;

Deprecated

variable call

const call: never;

Deprecated

variable caller

const caller: never;

Deprecated

variable length

const length: never;

Deprecated

variable name

const name: never;

Deprecated

variable toString

const toString: never;

Deprecated

function by

by: <T>(fn: () => T) => T;

Sometimes you need to create complex derivations that don't fit inside a short expression. In these cases, you can use $derived.by which accepts a function as its argument.
Example:
let total = $derived.by(() => { let result = 0; for (const n of numbers) { result += n; } return result; });
See Also

namespace $effect

namespace $effect {}

variable apply

const apply: never;

Deprecated

variable bind

const bind: never;

Deprecated

variable call

const call: never;

Deprecated

variable caller

const caller: never;

Deprecated

variable length

const length: never;

Deprecated

variable name

const name: never;

Deprecated

variable toString

const toString: never;

Deprecated

function pending

pending: () => number;

Returns the number of promises that are pending in the current boundary, not including child boundaries.
See Also

function pre

pre: (fn: () => void | (() => void)) => void;

Runs code right before a component is mounted to the DOM, and then whenever its dependencies change, i.e. $state or $derived values. The timing of the execution is right before the DOM is updated.
Example:
$effect.pre(() => console.log('The count is now ' + count));
If you return a function from the effect, it will be called right before the effect is run again, or when the component is unmounted.
Does not run during server-side rendering.
Parameter fn
The function to execute
See Also

function root

root: (fn: () => void | (() => void)) => () => void;

The $effect.root rune is an advanced feature that creates a non-tracked scope that doesn't auto-cleanup. This is useful for nested effects that you want to manually control. This rune also allows for creation of effects outside of the component initialisation phase.

Example:

<script>
  let count = $state(0);

  const cleanup = $effect.root(() => {
    $effect(() => {
      console.log(count);
    })

    return () => {
      console.log('effect root cleanup');
    }
  });
</script>

<button onclick={() => cleanup()}>cleanup</button>

function tracking

tracking: () => boolean;

The $effect.tracking rune is an advanced feature that tells you whether or not the code is running inside a tracking context, such as an effect or inside your template.
Example:
<script> console.log('in component setup:', $effect.tracking()); // false $effect(() => { console.log('in effect:', $effect.tracking()); // true }); </script> <p>in template: {$effect.tracking()}</p> 
This allows you to (for example) add things like subscriptions without causing memory leaks, by putting them in child effects.
See Also

namespace $host

namespace $host {}

variable apply

const apply: never;

Deprecated

variable arguments

const arguments: never;

Deprecated

variable bind

const bind: never;

Deprecated

variable call

const call: never;

Deprecated

variable caller

const caller: never;

Deprecated

variable length

const length: never;

Deprecated

variable name

const name: never;

Deprecated

variable prototype

const prototype: never;

Deprecated

variable toString

const toString: never;

Deprecated

namespace $inspect

namespace $inspect {}

variable apply

const apply: never;

Deprecated

variable arguments

const arguments: never;

Deprecated

variable bind

const bind: never;

Deprecated

variable call

const call: never;

Deprecated

variable caller

const caller: never;

Deprecated

variable length

const length: never;

Deprecated

variable name

const name: never;

Deprecated

variable prototype

const prototype: never;

Deprecated

variable toString

const toString: never;

Deprecated

function trace

trace: (name?: string) => void;

Tracks which reactive state changes caused an effect to re-run. Must be the first statement of a function body. Example:
```svelte let count = $state(0);
$effect(() => { $inspect.trace('my effect');
count; });

namespace $props

namespace $props {}

variable apply

const apply: never;

Deprecated

variable arguments

const arguments: never;

Deprecated

variable bind

const bind: never;

Deprecated

variable call

const call: never;

Deprecated

variable caller

const caller: never;

Deprecated

variable length

const length: never;

Deprecated

variable name

const name: never;

Deprecated

variable prototype

const prototype: never;

Deprecated

variable toString

const toString: never;

Deprecated

function id

id: () => string;

Generates an ID that is unique to the current component instance. When hydrating a server-rendered component, the value will be consistent between server and client.
This is useful for linking elements via attributes like for and aria-labelledby. 5.20.0

namespace $state

namespace $state {}

variable apply

const apply: never;

Deprecated

variable arguments

const arguments: never;

Deprecated

variable bind

const bind: never;

Deprecated

variable call

const call: never;

Deprecated

variable caller

const caller: never;

Deprecated

variable length

const length: never;

Deprecated

variable name

const name: never;

Deprecated

variable prototype

const prototype: never;

Deprecated

variable toString

const toString: never;

Deprecated

function eager

eager: <T>(value: T) => T;

Returns the latest value, even if the rest of the UI is suspending while async work (such as data loading) completes.

<nav>
  <a href="/" aria-current={$state.eager(pathname) === '/' ? 'page' : null}>home</a>
  <a href="/about" aria-current={$state.eager(pathname) === '/about' ? 'page' : null}>about</a>
</nav>

function raw

raw: { <T>(initial: T): T; <T>(): T };

Declares state that is _not_ made deeply reactive — instead of mutating it, you must reassign it.

Example:

<script>
  let items = $state.raw([0]);

  const addItem = () => {
    items = [...items, items.length];
  };
</script>

<button onclick={addItem}>
  {items.join(', ')}
</button>

Parameter initial

The initial value

function snapshot

snapshot: <T>(state: T) => Snapshot<T>;

To take a static snapshot of a deeply reactive $state proxy, use $state.snapshot:

Example:

<script>
  let counter = $state({ count: 0 });

  function onclick() {
    // Will log `{ count: ... }` rather than `Proxy { ... }`
    console.log($state.snapshot(counter));
  };
</script>

Parameter state

The value to snapshot

type Cloneable

type Cloneable =
    | ArrayBuffer
    | DataView
    | Date
    | Error
    | Map<any, any>
    | RegExp
    | Set<any>
    | TypedArray
    // web APIs
    | Blob
    | CryptoKey
    | DOMException
    | DOMMatrix
    | DOMMatrixReadOnly
    | DOMPoint
    | DOMPointReadOnly
    | DOMQuad
    | DOMRect
    | DOMRectReadOnly
    | File
    | FileList
    | FileSystemDirectoryHandle
    | FileSystemFileHandle
    | FileSystemHandle
    | ImageBitmap
    | ImageData
    | RTCCertificate
    | VideoFrame;

The things that structuredClone can handle — https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm

namespace svelte

module 'svelte' {}

function afterUpdate

afterUpdate: (fn: () => void) => void;

Schedules a callback to run immediately after the component has been updated.
The first time the callback runs will be after the initial onMount.
In runes mode use $effect instead.
Deprecated
Use [$effect](https://svelte.dev/docs/svelte/$effect) instead

function beforeUpdate

beforeUpdate: (fn: () => void) => void;

Schedules a callback to run immediately before the component is updated after any state change.
The first time the callback runs will be before the initial onMount.
In runes mode use $effect.pre instead.
Deprecated
Use [$effect.pre](https://svelte.dev/docs/svelte/$effect#$effect.pre) instead

function createContext

createContext: <T>() => [() => T, (context: T) => T];

Returns a [get, set] pair of functions for working with context in a type-safe way.
get will throw an error if no parent component called set.
5.40.0

function createEventDispatcher

createEventDispatcher: <
    EventMap extends Record<string, any> = any
>() => EventDispatcher<EventMap>;

Creates an event dispatcher that can be used to dispatch [component events](https://svelte.dev/docs/svelte/legacy-on#Component-events). Event dispatchers are functions that can take two arguments: name and detail.
Component events created with createEventDispatcher create a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent). These events do not [bubble](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture). The detail argument corresponds to the [CustomEvent.detail](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail) property and can contain any type of data.
The event dispatcher can be typed to narrow the allowed event names and the type of the detail argument:
const dispatch = createEventDispatcher<{ loaded: null; // does not take a detail argument change: string; // takes a detail argument of type string, which is required optional: number | null; // takes an optional detail argument of type number }>();
Deprecated
Use callback props and/or the $host() rune instead — see [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Event-changes-Component-events)

function createRawSnippet

createRawSnippet: <Params extends unknown[]>(
    fn: (...params: Getters<Params>) => {
        render: () => string;
        setup?: (element: Element) => void | (() => void);
    }
) => Snippet<Params>;

Create a snippet programmatically

function flushSync

flushSync: <T = void>(fn?: (() => T) | undefined) => T;

Synchronously flush any pending updates. Returns void if no callback is provided, otherwise returns the result of calling the callback.

function fork

fork: (fn: () => void) => Fork;

Creates a 'fork', in which state changes are evaluated but not applied to the DOM. This is useful for speculatively loading data (for example) when you suspect that the user is about to take some action.
Frameworks like SvelteKit can use this to preload data when the user touches or hovers over a link, making any subsequent navigation feel instantaneous.
The fn parameter is a synchronous function that modifies some state. The state changes will be reverted after the fork is initialised, then reapplied if and when the fork is eventually committed.
When it becomes clear that a fork will _not_ be committed (e.g. because the user navigated elsewhere), it must be discarded to avoid leaking memory.
5.42

function getAbortSignal

getAbortSignal: () => AbortSignal;

Returns an [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) that aborts when the current [derived](https://svelte.dev/docs/svelte/$derived) or [effect](https://svelte.dev/docs/svelte/$effect) re-runs or is destroyed.
Must be called while a derived or effect is running.
<script> import { getAbortSignal } from 'svelte'; let { id } = $props(); async function getData(id) { const response = await fetch(`/items/${id}`, { signal: getAbortSignal() }); return await response.json(); } const data = $derived(await getData(id)); </script>

function getAllContexts

getAllContexts: <T extends Map<any, any> = Map<any, any>>() => T;

Retrieves the whole context map that belongs to the closest parent component. Must be called during component initialisation. Useful, for example, if you programmatically create a component and want to pass the existing context to it.

function getContext

getContext: <T>(key: any) => T;

Retrieves the context that belongs to the closest parent component with the specified key. Must be called during component initialisation.
[createContext](https://svelte.dev/docs/svelte/svelte#createContext) is a type-safe alternative.

function hasContext

hasContext: (key: any) => boolean;

Checks whether a given key has been set in the context of a parent component. Must be called during component initialisation.

function hydratable

hydratable: <T>(key: string, fn: () => T) => T;

function hydrate

hydrate: <
    Props extends Record<string, any>,
    Exports extends Record<string, any>
>(
    component:
        | ComponentType<SvelteComponent<Props>>
        | Component<Props, Exports, any>,
    options: {} extends Props
        ? {
              target: Document | Element | ShadowRoot;
              props?: Props;
              events?: Record<string, (e: any) => any>;
              context?: Map<any, any>;
              intro?: boolean;
              recover?: boolean;
              transformError?: (error: unknown) => unknown;
          }
        : {
              target: Document | Element | ShadowRoot;
              props: Props;
              events?: Record<string, (e: any) => any>;
              context?: Map<any, any>;
              intro?: boolean;
              recover?: boolean;
              transformError?: (error: unknown) => unknown;
          }
) => Exports;

Hydrates a component on the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component

function mount

mount: <Props extends Record<string, any>, Exports extends Record<string, any>>(
    component:
        | ComponentType<SvelteComponent<Props>>
        | Component<Props, Exports, any>,
    options: MountOptions<Props>
) => Exports;

Mounts a component to the given target and returns the exports and potentially the props (if compiled with accessors: true) of the component. Transitions will play during the initial render unless the intro option is set to false.

function onDestroy

onDestroy: (fn: () => any) => void;

Schedules a callback to run immediately before the component is unmounted.
Out of onMount, beforeUpdate, afterUpdate and onDestroy, this is the only one that runs inside a server-side component.

function onMount

onMount: <T>(
    fn: () => NotFunction<T> | Promise<NotFunction<T>> | (() => any)
) => void;

onMount, like [$effect](https://svelte.dev/docs/svelte/$effect), schedules a function to run as soon as the component has been mounted to the DOM. Unlike $effect, the provided function only runs once.
It must be called during the component's initialisation (but doesn't need to live _inside_ the component; it can be called from an external module). If a function is returned _synchronously_ from onMount, it will be called when the component is unmounted.
onMount functions do not run during [server-side rendering](https://svelte.dev/docs/svelte/svelte-server#render).

function setContext

setContext: <T>(key: any, context: T) => T;

Associates an arbitrary context object with the current component and the specified key and returns that object. The context is then available to children of the component (including slotted content) with getContext.
Like lifecycle functions, this must be called during component initialisation.
[createContext](https://svelte.dev/docs/svelte/svelte#createContext) is a type-safe alternative.

function settled

settled: () => Promise<void>;

Returns a promise that resolves once any state changes, and asynchronous work resulting from them, have resolved and the DOM has been updated 5.36

function tick

tick: () => Promise<void>;

Returns a promise that resolves once any pending state changes have been applied.

function unmount

unmount: (
    component: Record<string, any>,
    options?: { outro?: boolean } | undefined
) => Promise<void>;

Unmounts a component that was previously mounted using mount or hydrate.
Since 5.13.0, if options.outro is true, [transitions](https://svelte.dev/docs/svelte/transition) will play before the component is removed from the DOM.
Returns a Promise that resolves after transitions have completed if options.outro is true, or immediately otherwise (prior to 5.13.0, returns void).
import { mount, unmount } from 'svelte'; import App from './App.svelte'; const app = mount(App, { target: document.body }); // later... unmount(app, { outro: true });

function untrack

untrack: <T>(fn: () => T) => T;

When used inside a [$derived](https://svelte.dev/docs/svelte/$derived) or [$effect](https://svelte.dev/docs/svelte/$effect), any state read inside fn will not be treated as a dependency.
$effect(() => { // this will run when `data` changes, but not when `time` changes save(data, { timestamp: untrack(() => time) }); });

class SvelteComponent

class SvelteComponent<
    Props extends Record<string, any> = Record<string, any>,
    Events extends Record<string, any> = any,
    Slots extends Record<string, any> = any
> {}

This was the base class for Svelte components in Svelte 4. Svelte 5+ components are completely different under the hood. For typing, use Component instead. To instantiate components, use mount instead. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.

constructor

constructor(options: ComponentConstructorOptions<Properties<Props, Slots>>);

Deprecated
This constructor only exists when using the asClassComponent compatibility helper, which is a stop-gap solution. Migrate towards using mount instead. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.

property $$bindings

$$bindings?: string;

For type checking capabilities only. Does not exist at runtime. ### DO NOT USE!

property $$events_def

$$events_def: Record<string, any>;

For type checking capabilities only. Does not exist at runtime. ### DO NOT USE!

property $$prop_def

$$prop_def: Record<string, any>;

For type checking capabilities only. Does not exist at runtime. ### DO NOT USE!

property $$slot_def

$$slot_def: Record<string, any>;

For type checking capabilities only. Does not exist at runtime. ### DO NOT USE!

property element

static element?: { new (): HTMLElement; prototype: HTMLElement };

The custom element version of the component. Only present if compiled with the customElement compiler option

method $destroy

$destroy: () => void;

Deprecated
This method only exists when using one of the legacy compatibility helpers, which is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.

method $on

$on: <K extends Extract<keyof Events, string>>(
    type: K,
    callback: (e: Events[K]) => void
) => () => void;

Deprecated
This method only exists when using one of the legacy compatibility helpers, which is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.

method $set

$set: (props: Partial<Props>) => void;

Deprecated
This method only exists when using one of the legacy compatibility helpers, which is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.

class SvelteComponentTyped

class SvelteComponentTyped<
    Props extends Record<string, any> = Record<string, any>,
    Events extends Record<string, any> = any,
    Slots extends Record<string, any> = any
> extends SvelteComponent<Props, Events, Slots> {}

Deprecated
Use Component instead. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more information.

interface Component

interface Component<
    Props extends Record<string, any> = {},
    Exports extends Record<string, any> = {},
    Bindings extends keyof Props | '' = string
> {}

Can be used to create strongly typed Svelte components.
#### Example:
You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you want to provide typings. Therefore you create a index.d.ts:
import type { Component } from 'svelte'; export declare const MyComponent: Component<{ foo: string }> {}
Typing this makes it possible for IDEs like VS Code with the Svelte extension to provide intellisense and to use the component like this in a Svelte file with TypeScript:
<script lang="ts"> import { MyComponent } from "component-library"; </script> <MyComponent foo={'bar'} />

property element

element?: typeof HTMLElement;

The custom element version of the component. Only present if compiled with the customElement compiler option

property z_$$bindings

z_$$bindings?: Bindings;

Does not exist at runtime, for typing capabilities only. DO NOT USE

call signature

(this: void, internals: ComponentInternals, props: Props): {
    /**
     * @deprecated This method only exists when using one of the legacy compatibility helpers, which
     * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
     * for more info.
     */
    $on?(type: string, callback: (e: any) => void): () => void;
    /**
     * @deprecated This method only exists when using one of the legacy compatibility helpers, which
     * is a stop-gap solution. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes)
     * for more info.
     */
    $set?(props: Partial<Props>): void;
} & Exports;

Parameter internal
An internal object used by Svelte. Do not use or modify.
Parameter props
The props passed to the component.

interface ComponentConstructorOptions

interface ComponentConstructorOptions<
    Props extends Record<string, any> = Record<string, any>
> {}

Deprecated
In Svelte 4, components are classes. In Svelte 5, they are functions. Use mount instead to instantiate components. See [migration guide](https://svelte.dev/docs/svelte/v5-migration-guide#Components-are-no-longer-classes) for more info.

property $$inline

$$inline?: boolean;

property anchor

anchor?: Element;

property context

context?: Map<any, any>;

property hydrate

hydrate?: boolean;

property idPrefix

idPrefix?: string;

property intro

intro?: boolean;

property props

props?: Props;

property recover

recover?: boolean;

property sync

sync?: boolean;

property target

target: Element | Document | ShadowRoot;

property transformError

transformError?: (error: unknown) => unknown;

interface EventDispatcher

interface EventDispatcher<EventMap extends Record<string, any>> {}

call signature

<Type extends keyof EventMap>(
    ...args: null extends EventMap[Type]
        ? [
              type: Type,
              parameter?: EventMap[Type] | null | undefined,
              options?: DispatchOptions
          ]
        : undefined extends EventMap[Type]
        ? [
              type: Type,
              parameter?: EventMap[Type] | null | undefined,
              options?: DispatchOptions
          ]
        : [type: Type, parameter: EventMap[Type], options?: DispatchOptions]
): boolean;

interface Fork

interface Fork {}

Represents work that is happening off-screen, such as data being preloaded in anticipation of the user navigating 5.42

method commit

commit: () => Promise<void>;

Commit the fork. The promise will resolve once the state change has been applied

method discard

discard: () => void;

Discard the fork

interface Snippet

interface Snippet<Parameters extends unknown[] = []> {}

The type of a #snippet block. You can use it to (for example) express that your component expects a snippet of a certain type:
let { banner }: { banner: Snippet<[{ text: string }]> } = $props();
You can only call a snippet through the {@render ...} tag.
See the [snippet documentation](https://svelte.dev/docs/svelte/snippet) for more info.
Parameters the parameters that the snippet expects (if any) as a tuple.

call signature

(
    this: void,
    // this conditional allows tuples but not arrays. Arrays would indicate a
    // rest parameter type, which is not supported. If rest parameters are added
    // in the future, the condition can be removed.
    ...args: number extends Parameters['length'] ? never : Parameters
): {
    '{@render ...} must be called with a Snippet': "import type { Snippet } from 'svelte'";
} & typeof SnippetReturn;

type ComponentEvents

type ComponentEvents<Comp extends SvelteComponent> = Comp extends SvelteComponent<
    any,
    infer Events
>
    ? Events
    : never;

Deprecated

The new Component type does not have a dedicated Events type. Use ComponentProps instead.

Convenience type to get the events the given component expects. Example:

<script lang="ts">
   import type { ComponentEvents } from 'svelte';
   import Component from './Component.svelte';

   function handleCloseEvent(event: ComponentEvents<Component>['close']) {
      console.log(event.detail);
   }
</script>

<Component on:close={handleCloseEvent} />

type ComponentInternals

type ComponentInternals = Branded<{}, 'ComponentInternals'>;

Internal implementation details that vary between environments

type ComponentProps

type ComponentProps<Comp extends SvelteComponent | Component<any, any>> =
    Comp extends SvelteComponent<infer Props>
        ? Props
        : Comp extends Component<infer Props, any>
        ? Props
        : never;

Convenience type to get the props the given component expects.

Example: Ensure a variable contains the props expected by MyComponent:

import type { ComponentProps } from 'svelte';
import MyComponent from './MyComponent.svelte';

// Errors if these aren't the correct props expected by MyComponent.
const props: ComponentProps<typeof MyComponent> = { foo: 'bar' };

> [!NOTE] In Svelte 4, you would do ComponentProps<MyComponent> because MyComponent was a class.

Example: A generic function that accepts some component and infers the type of its props:

import type { Component, ComponentProps } from 'svelte';
import MyComponent from './MyComponent.svelte';

function withProps<TComponent extends Component<any>>(
	component: TComponent,
	props: ComponentProps<TComponent>
) {};

// Errors if the second argument is not the correct props expected by the component in the first argument.
withProps(MyComponent, { foo: 'bar' });

type ComponentType

type ComponentType<Comp extends SvelteComponent = SvelteComponent> = (new (
    options: ComponentConstructorOptions<
        Comp extends SvelteComponent<infer Props> ? Props : Record<string, any>
    >
) => Comp) & {
    /** The custom element version of the component. Only present if compiled with the `customElement` compiler option */
    element?: typeof HTMLElement;
};

Deprecated

This type is obsolete when working with the new Component type.

Convenience type to get the type of a Svelte component. Useful for example in combination with dynamic components using <svelte:component>.

Example:

<script lang="ts">
	import type { ComponentType, SvelteComponent } from 'svelte';
	import Component1 from './Component1.svelte';
	import Component2 from './Component2.svelte';

	const component: ComponentType = someLogic() ? Component1 : Component2;
	const componentOfCertainSubType: ComponentType<SvelteComponent<{ needsThisProp: string }>> = someLogic() ? Component1 : Component2;
</script>

<svelte:component this={component} />
<svelte:component this={componentOfCertainSubType} needsThisProp="hello" />

type MountOptions

type MountOptions<Props extends Record<string, any> = Record<string, any>> = {
    /**
     * Target element where the component will be mounted.
     */
    target: Document | Element | ShadowRoot;
    /**
     * Optional node inside `target`. When specified, it is used to render the component immediately before it.
     */
    anchor?: Node;
    /**
     * Allows the specification of events.
     * @deprecated Use callback props instead.
     */
    events?: Record<string, (e: any) => any>;
    /**
     * Can be accessed via `getContext()` at the component level.
     */
    context?: Map<any, any>;
    /**
     * Whether or not to play transitions on initial render.
     * @default true
     */
    intro?: boolean;
    /**
     * A function that transforms errors caught by error boundaries before they are passed to the `failed` snippet.
     * Defaults to the identity function.
     */
    transformError?: (error: unknown) => unknown | Promise<unknown>;
} & ({} extends Props
    ? {
          /**
           * Component properties.
           */
          props?: Props;
      }
    : {
          /**
           * Component properties.
           */
          props: Props;
      });

Defines the options accepted by the mount() function.

namespace svelte/action

module 'svelte/action' {}

interface Action

interface Action<
    Element = HTMLElement,
    Parameter = undefined,
    Attributes extends Record<string, any> = Record<never, any>
> {}

Actions are functions that are called when an element is created. You can use this interface to type such actions. The following example defines an action that only works on <div> elements and optionally accepts a parameter which it has a default value for:
export const myAction: Action<HTMLDivElement, { someProperty: boolean } | undefined> = (node, param = { someProperty: true }) => { // ... }
Action<HTMLDivElement> and Action<HTMLDivElement, undefined> both signal that the action accepts no parameters.
You can return an object with methods update and destroy from the function and type which additional attributes and events it has. See interface ActionReturn for more details.

call signature

<Node extends Element>(
    ...args: undefined extends Parameter
        ? [node: Node, parameter?: Parameter]
        : [node: Node, parameter: Parameter]
): void | ActionReturn<Parameter, Attributes>;

interface ActionReturn

interface ActionReturn<
    Parameter = undefined,
    Attributes extends Record<string, any> = Record<never, any>
> {}

Actions can return an object containing the two properties defined in this interface. Both are optional. - update: An action can have a parameter. This method will be called whenever that parameter changes, immediately after Svelte has applied updates to the markup. ActionReturn and ActionReturn<undefined> both mean that the action accepts no parameters. - destroy: Method that is called after the element is unmounted
Additionally, you can specify which additional attributes and events the action enables on the applied element. This applies to TypeScript typings only and has no effect at runtime.
Example usage:
interface Attributes { newprop?: string; 'on:event': (e: CustomEvent<boolean>) => void; } export function myAction(node: HTMLElement, parameter: Parameter): ActionReturn<Parameter, Attributes> { // ... return { update: (updatedParameter) => {...}, destroy: () => {...} }; }

property $$_attributes

$$_attributes?: Attributes;

### DO NOT USE THIS This exists solely for type-checking and has no effect at runtime. Set this through the Attributes generic instead.

property destroy

destroy?: () => void;

property update

update?: (parameter: Parameter) => void;

namespace svelte/animate

module 'svelte/animate' {}

function flip

flip: (
    node: Element,
    { from, to }: { from: DOMRect; to: DOMRect },
    params?: FlipParams
) => AnimationConfig;

The flip function calculates the start and end position of an element and animates between them, translating the x and y values. flip stands for [First, Last, Invert, Play](https://aerotwist.com/blog/flip-your-animations/).

interface AnimationConfig

interface AnimationConfig {}

property css

css?: (t: number, u: number) => string;

property delay

delay?: number;

property duration

duration?: number;

property easing

easing?: (t: number) => number;

property tick

tick?: (t: number, u: number) => void;

interface FlipParams

interface FlipParams {}

property delay

delay?: number;

property duration

duration?: number | ((len: number) => number);

property easing

easing?: (t: number) => number;

namespace svelte/attachments

module 'svelte/attachments' {}

function createAttachmentKey

createAttachmentKey: () => symbol;

Creates an object key that will be recognised as an attachment when the object is spread onto an element, as a programmatic alternative to using {@attach ...}. This can be useful for library authors, though is generally not needed when building an app.

<script>
	import { createAttachmentKey } from 'svelte/attachments';

	const props = {
		class: 'cool',
		onclick: () => alert('clicked'),
		[createAttachmentKey()]: (node) => {
			node.textContent = 'attached!';
		}
	};
</script>

<button {...props}>click me</button>

5.29

function fromAction

fromAction: {
    <E extends EventTarget, T extends unknown>(
        action:
            | Action<E, T, Record<never, any>>
            | ((element: E, arg: T) => void | ActionReturn<T>),
        fn: () => T
    ): Attachment<E>;
    <E extends EventTarget>(
        action:
            | Action<E, void, Record<never, any>>
            | ((element: E) => void | ActionReturn<void, Record<never, any>>)
    ): Attachment<E>;
};

Converts an [action](https://svelte.dev/docs/svelte/use) into an [attachment](https://svelte.dev/docs/svelte/@attach) keeping the same behavior. It's useful if you want to start using attachments on components but you have actions provided by a library.
Note that the second argument, if provided, must be a function that _returns_ the argument to the action function, not the argument itself.
 <div use:foo={bar}>...</div>  <div {@attach fromAction(foo, () => bar)}>...</div>

interface Attachment

interface Attachment<T extends EventTarget = Element> {}

An [attachment](https://svelte.dev/docs/svelte/@attach) is a function that runs when an element is mounted to the DOM, and optionally returns a function that is called when the element is later removed.
It can be attached to an element with an {@attach ...} tag, or by spreading an object containing a property created with [createAttachmentKey](https://svelte.dev/docs/svelte/svelte-attachments#createAttachmentKey).

call signature

(element: T): void | (() => void);

namespace svelte/compiler

module 'svelte/compiler' {}

variable VERSION

const VERSION: string;

The current version, as set in package.json.

function compile

compile: (source: string, options: CompileOptions) => CompileResult;

compile converts your .svelte source code into a JavaScript module that exports a component
Parameter source
The component source code
Parameter options
The compiler options

function compileModule

compileModule: (source: string, options: ModuleCompileOptions) => CompileResult;

compileModule takes your JavaScript source code containing runes, and turns it into a JavaScript module.
Parameter source
The component source code

function migrate

migrate: (
    source: string,
    { filename, use_ts }?: { filename?: string; use_ts?: boolean } | undefined
) => { code: string };

Does a best-effort migration of Svelte code towards using runes, event attributes and render tags. May throw an error if the code is too complex to migrate automatically.

function parse

parse: {
    (
        source: string,
        options: { filename?: string; modern: true; loose?: boolean }
    ): AST.Root;
    (
        source: string,
        options?: { filename?: string; modern?: false; loose?: boolean }
    ): Record<string, any>;
};

The parse function parses a component, returning only its abstract syntax tree.
The modern option (false by default in Svelte 5) makes the parser return a modern AST instead of the legacy AST. modern will become true by default in Svelte 6, and the option will be removed in Svelte 7.

function parseCss

parseCss: (source: string) => AST.CSS.StyleSheetFile;

The parseCss function parses a CSS stylesheet, returning its abstract syntax tree.
Parameter source
The CSS source code

function preprocess

preprocess: (
    source: string,
    preprocessor: PreprocessorGroup | PreprocessorGroup[],
    options?: { filename?: string } | undefined
) => Promise<Processed>;

The preprocess function provides convenient hooks for arbitrarily transforming component source code. For example, it can be used to convert a <style lang="sass"> block into vanilla CSS.

function print

print: (
    ast: AST.SvelteNode,
    options?: Options | undefined
) => { code: string; map: any };

print converts a Svelte AST node back into Svelte source code. It is primarily intended for tools that parse and transform components using the compiler’s modern AST representation.
print(ast) requires an AST node produced by parse with modern: true, or any sub-node within that modern AST. The result contains the generated source and a corresponding source map. The output is valid Svelte, but formatting details such as whitespace or quoting may differ from the original.

function walk

walk: () => never;

Deprecated
Replace this with import { walk } from 'estree-walker'

interface CompileError

interface CompileError extends ICompileDiagnostic {}

interface CompileOptions

interface CompileOptions extends ModuleCompileOptions {}

property accessors

accessors?: boolean;

If true, getters and setters will be created for the component's props. If false, they will only be created for readonly exported values (i.e. those declared with const, class and function). If compiling with customElement: true this option defaults to true.
false
Deprecated
This will have no effect in runes mode

property compatibility

compatibility?: {
    /**
     * Applies a transformation so that the default export of Svelte files can still be instantiated the same way as in Svelte 4 —
     * as a class when compiling for the browser (as though using `createClassComponent(MyComponent, {...})` from `svelte/legacy`)
     * or as an object with a `.render(...)` method when compiling for the server
     * @default 5
     */
    componentApi?: 4 | 5;
};

Deprecated
Use these only as a temporary solution before migrating your code

property css

css?: 'injected' | 'external';

- 'injected': styles will be included in the head when using render(...), and injected into the document (if not already present) when the component mounts. For components compiled as custom elements, styles are injected to the shadow root. - 'external': the CSS will only be returned in the css field of the compilation result. Most Svelte bundler plugins will set this to 'external' and use the CSS that is statically generated for better performance, as it will result in smaller JavaScript bundles and the output can be served as cacheable .css files. This is always 'injected' when compiling with customElement mode.

property cssHash

cssHash?: CssHashGetter;

A function that takes a { hash, css, name, filename } argument and returns the string that is used as a classname for scoped CSS. It defaults to returning svelte-${hash(filename ?? css)}.
undefined

property cssOutputFilename

cssOutputFilename?: string;

Used for your CSS sourcemap.
null

property customElement

customElement?: boolean;

If true, tells the compiler to generate a custom element constructor instead of a regular Svelte component.
false

property discloseVersion

discloseVersion?: boolean;

If true, exposes the Svelte major version in the browser by adding it to a Set stored in the global window.__svelte.v.
true

property fragments

fragments?: 'html' | 'tree';

Which strategy to use when cloning DOM fragments:
- html populates a <template> with innerHTML and clones it. This is faster, but cannot be used if your app's [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) includes [require-trusted-types-for 'script'](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for) - tree creates the fragment one element at a time and _then_ clones it. This is slower, but works everywhere
'html' 5.33

property hmr

hmr?: boolean;

If true, compiles components with hot reloading support.
false

property immutable

immutable?: boolean;

If true, tells the compiler that you promise not to mutate any objects. This allows it to be less conservative about checking whether values have changed.
false
Deprecated
This will have no effect in runes mode

property modernAst

modernAst?: boolean;

If true, returns the modern version of the AST. Will become true by default in Svelte 6, and the option will be removed in Svelte 7.
false

property name

name?: string;

Sets the name of the resulting JavaScript class (though the compiler will rename it if it would otherwise conflict with other variables in scope). If unspecified, will be inferred from filename

property namespace

namespace?: Namespace;

The namespace of the element; e.g., "html", "svg", "mathml".
'html'

property outputFilename

outputFilename?: string;

Used for your JavaScript sourcemap.
null

property preserveComments

preserveComments?: boolean;

If true, your HTML comments will be preserved in the output. By default, they are stripped out.
false

property preserveWhitespace

preserveWhitespace?: boolean;

If true, whitespace inside and between elements is kept as you typed it, rather than removed or collapsed to a single space where possible.
false

property runes

runes?: boolean | undefined;

Set to true to force the compiler into runes mode, even if there are no indications of runes usage. Set to false to force the compiler into ignoring runes, even if there are indications of runes usage. Set to undefined (the default) to infer runes mode from the component code. Is always true for JS/TS modules compiled with Svelte. Will be true by default in Svelte 6. Note that setting this to true in your svelte.config.js will force runes mode for your entire project, including components in node_modules, which is likely not what you want. If you're using Vite, consider using [dynamicCompileOptions](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/config.md#dynamiccompileoptions) instead. undefined

property sourcemap

sourcemap?: object | string;

An initial sourcemap that will be merged into the final output sourcemap. This is usually the preprocessor sourcemap.
null

interface CompileResult

interface CompileResult {}

The return value of compile from svelte/compiler

property ast

ast: any;

The AST

property css

css: null | {
    /** The generated code */
    code: string;
    /** A source map */
    map: SourceMap;
    /** Whether or not the CSS includes global rules */
    hasGlobal: boolean;
};

The compiled CSS

property js

js: {
    /** The generated code */
    code: string;
    /** A source map */
    map: SourceMap;
};

The compiled JavaScript

property metadata

metadata: {
    /**
     * Whether the file was compiled in runes mode, either because of an explicit option or inferred from usage.
     * For `compileModule`, this is always `true`
     */
    runes: boolean;
};

Metadata about the compiled component

property warnings

warnings: Warning[];

An array of warning objects that were generated during compilation. Each warning has several properties: - code is a string identifying the category of warning - message describes the issue in human-readable terms - start and end, if the warning relates to a specific location, are objects with line, column and character properties

interface ModuleCompileOptions

interface ModuleCompileOptions {}

property dev

dev?: boolean;

If true, causes extra code to be added that will perform runtime checks and provide debugging information during development.
false

property experimental

experimental?: {
    /**
     * Allow `await` keyword in deriveds, template expressions, and the top level of components
     * @since 5.36
     */
    async?: boolean;
};

Experimental options 5.36

property filename

filename?: string;

Used for debugging hints and sourcemaps. Your bundler plugin will set it automatically.

property generate

generate?: 'client' | 'server' | false;

If "client", Svelte emits code designed to run in the browser. If "server", Svelte emits code suitable for server-side rendering. If false, nothing is generated. Useful for tooling that is only interested in warnings.
'client'

property rootDir

rootDir?: string;

Used for ensuring filenames don't leak filesystem information. Your bundler plugin will set it automatically. process.cwd() on node-like environments, undefined elsewhere

property warningFilter

warningFilter?: (warning: Warning) => boolean;

A function that gets a Warning as an argument and returns a boolean. Use this to filter out warnings. Return true to keep the warning, false to discard it.

interface PreprocessorGroup

interface PreprocessorGroup {}

A preprocessor group is a set of preprocessors that are applied to a Svelte file.

property markup

markup?: MarkupPreprocessor;

property name

name?: string;

Name of the preprocessor. Will be a required option in the next major version

property script

script?: Preprocessor;

property style

style?: Preprocessor;

interface Processed

interface Processed {}

The result of a preprocessor run. If the preprocessor does not return a result, it is assumed that the code is unchanged.

property attributes

attributes?: Record<string, string | boolean>;

Only for script/style preprocessors: The updated attributes to set on the tag. If undefined, attributes stay unchanged.

property code

code: string;

The new code

property dependencies

dependencies?: string[];

A list of additional files to watch for changes

property map

map?: string | object;

A source map mapping back to the original code

property toString

toString?: () => string;

interface Warning

interface Warning extends ICompileDiagnostic {}

type MarkupPreprocessor

type MarkupPreprocessor = (options: {
    /**
     * The whole Svelte file content
     */
    content: string;
    /**
     * The filename of the Svelte file
     */
    filename?: string;
}) => Processed | void | Promise<Processed | void>;

A markup preprocessor that takes a string of code and returns a processed version.

type Preprocessor

type Preprocessor = (options: {
    /**
     * The script/style tag content
     */
    content: string;
    /**
     * The attributes on the script/style tag
     */
    attributes: Record<string, string | boolean>;
    /**
     * The whole Svelte file content
     */
    markup: string;
    /**
     * The filename of the Svelte file
     */
    filename?: string;
}) => Processed | void | Promise<Processed | void>;

A script/style preprocessor that takes a string of code and returns a processed version.

namespace svelte/compiler.AST

namespace svelte/compiler.AST {}

interface AnimateDirective

interface AnimateDirective extends BaseAttribute {}

An animate: directive

property expression

expression: null | Expression;

The y in animate:x={y}

property name

name: string;

The 'x' in animate:x

property type

type: 'AnimateDirective';

interface AttachTag

interface AttachTag extends BaseNode {}

A ` tag

property expression

expression: Expression;

property type

type: 'AttachTag';

interface Attribute

interface Attribute extends BaseAttribute {}

property type

type: 'Attribute';

property value

value: true | ExpressionTag | Array<Text | ExpressionTag>;

Quoted/string values are represented by an array, even if they contain a single expression like "{x}"

interface AwaitBlock

interface AwaitBlock extends BaseNode {}

An {#await ...} block

property catch

catch: Fragment | null;

property error

error: Pattern | null;

The rejection reason inside the catch block

property expression

expression: Expression;

property pending

pending: Fragment | null;

property then

then: Fragment | null;

property type

type: 'AwaitBlock';

property value

value: Pattern | null;

The resolved value inside the then block

interface BaseAttribute

interface BaseAttribute extends BaseNode {}

property name

name: string;

property name_loc

name_loc: SourceLocation | null;

interface BaseElement

interface BaseElement extends BaseNode {}

property attributes

attributes: Array<Attribute | SpreadAttribute | Directive | AttachTag>;

property fragment

fragment: Fragment;

property name

name: string;

property name_loc

name_loc: SourceLocation;

interface BaseNode

interface BaseNode {}

property end

end: number;

property start

start: number;

property type

type: string;

interface BindDirective

interface BindDirective extends BaseAttribute {}

A bind: directive

property expression

expression: Identifier | MemberExpression | SequenceExpression;

The y in bind:x={y}

property name

name: string;

The 'x' in bind:x

property type

type: 'BindDirective';

interface ClassDirective

interface ClassDirective extends BaseAttribute {}

A class: directive

property expression

expression: Expression;

The 'y' in class:x={y}, or the x in class:x

property name

name: 'class';

The 'x' in class:x

property type

type: 'ClassDirective';

interface Comment

interface Comment extends BaseNode {}

An HTML comment

property data

data: string;

the contents of the comment

property type

type: 'Comment';

interface Component

interface Component extends BaseElement {}

property type

type: 'Component';

interface ConstTag

interface ConstTag extends BaseNode {}

A {@const ...} tag

property declaration

declaration: VariableDeclaration & {
    declarations: [VariableDeclarator & { id: Pattern; init: Expression }];
};

property type

type: 'ConstTag';

interface DebugTag

interface DebugTag extends BaseNode {}

A {@debug ...} tag

property identifiers

identifiers: Identifier[];

property type

type: 'DebugTag';

interface EachBlock

interface EachBlock extends BaseNode {}

An {#each ...} block

property body

body: Fragment;

property context

context: Pattern | null;

The entry in {#each item as entry}. null if as part is omitted

property expression

expression: Expression;

property fallback

fallback?: Fragment;

property index

index?: string;

property key

key?: Expression;

property type

type: 'EachBlock';

interface ExpressionTag

interface ExpressionTag extends BaseNode {}

A (possibly reactive) template expression — {...}

property expression

expression: Expression;

property type

type: 'ExpressionTag';

interface Fragment

interface Fragment {}

property nodes

nodes: Array<Text | Tag | ElementLike | Block | Comment>;

property type

type: 'Fragment';

interface HtmlTag

interface HtmlTag extends BaseNode {}

A (possibly reactive) HTML template expression — {@html ...}

property expression

expression: Expression;

property type

type: 'HtmlTag';

interface IfBlock

interface IfBlock extends BaseNode {}

An {#if ...} block

property alternate

alternate: Fragment | null;

property consequent

consequent: Fragment;

property elseif

elseif: boolean;

property test

test: Expression;

property type

type: 'IfBlock';

interface JSComment

interface JSComment {}

property end

end: number;

property loc

loc: {
    start: { line: number; column: number };
    end: { line: number; column: number };
};

property start

start: number;

property type

type: 'Line' | 'Block';

property value

value: string;

interface KeyBlock

interface KeyBlock extends BaseNode {}

property expression

expression: Expression;

property fragment

fragment: Fragment;

property type

type: 'KeyBlock';

interface LetDirective

interface LetDirective extends BaseAttribute {}

A let: directive

property expression

expression: null | Identifier | ArrayExpression | ObjectExpression;

The 'y' in let:x={y}

property name

name: string;

The 'x' in let:x

property type

type: 'LetDirective';

interface OnDirective

interface OnDirective extends BaseAttribute {}

An on: directive

property expression

expression: null | Expression;

The 'y' in on:x={y}

property modifiers

modifiers: Array<
    | 'capture'
    | 'nonpassive'
    | 'once'
    | 'passive'
    | 'preventDefault'
    | 'self'
    | 'stopImmediatePropagation'
    | 'stopPropagation'
    | 'trusted'
>;

property name

name: string;

The 'x' in on:x

property type

type: 'OnDirective';

interface RegularElement

interface RegularElement extends BaseElement {}

property type

type: 'RegularElement';

interface RenderTag

interface RenderTag extends BaseNode {}

A ` tag

property expression

expression:
    | SimpleCallExpression
    | (ChainExpression & { expression: SimpleCallExpression });

property type

type: 'RenderTag';

interface Root

interface Root extends BaseNode {}

property comments

comments: JSComment[];

Comments found in and {expressions}

property css

css: AST.CSS.StyleSheet | null;

The parsed <style> element, if exists

property fragment

fragment: Fragment;

property instance

instance: Script | null;

The parsed <script> element, if exists

property module

module: Script | null;

The parsed <script module> element, if exists

property options

options: SvelteOptions | null;

Inline options provided by <svelte:options> — these override options passed to compile(...)

property type

type: 'Root';

interface Script

interface Script extends BaseNode {}

property attributes

attributes: Attribute[];

property content

content: Program;

property context

context: 'default' | 'module';

property type

type: 'Script';

interface SlotElement

interface SlotElement extends BaseElement {}

property name

name: 'slot';

property type

type: 'SlotElement';

interface SnippetBlock

interface SnippetBlock extends BaseNode {}

property body

body: Fragment;

property expression

expression: Identifier;

property parameters

parameters: Pattern[];

property type

type: 'SnippetBlock';

property typeParams

typeParams?: string;

interface SpreadAttribute

interface SpreadAttribute extends BaseNode {}

property expression

expression: Expression;

property type

type: 'SpreadAttribute';

interface StyleDirective

interface StyleDirective extends BaseAttribute {}

A style: directive

property modifiers

modifiers: Array<'important'>;

property name

name: string;

The 'x' in style:x

property type

type: 'StyleDirective';

property value

value: true | ExpressionTag | Array<ExpressionTag | Text>;

The 'y' in style:x={y}

interface SvelteBody

interface SvelteBody extends BaseElement {}

property name

name: 'svelte:body';

property type

type: 'SvelteBody';

interface SvelteBoundary

interface SvelteBoundary extends BaseElement {}

property name

name: 'svelte:boundary';

property type

type: 'SvelteBoundary';

interface SvelteComponent

interface SvelteComponent extends BaseElement {}

property expression

expression: Expression;

property name

name: 'svelte:component';

property type

type: 'SvelteComponent';

interface SvelteDocument

interface SvelteDocument extends BaseElement {}

property name

name: 'svelte:document';

property type

type: 'SvelteDocument';

interface SvelteElement

interface SvelteElement extends BaseElement {}

property name

name: 'svelte:element';

property tag

tag: Expression;

property type

type: 'SvelteElement';

interface SvelteFragment

interface SvelteFragment extends BaseElement {}

property name

name: 'svelte:fragment';

property type

type: 'SvelteFragment';

interface SvelteHead

interface SvelteHead extends BaseElement {}

property name

name: 'svelte:head';

property type

type: 'SvelteHead';

interface SvelteOptions

interface SvelteOptions {}

property accessors

accessors?: boolean;

property attributes

attributes: Attribute[];

property css

css?: 'injected';

property customElement

customElement?: {
    tag?: string;
    shadow?: 'open' | 'none' | ObjectExpression | undefined;
    props?: Record<
        string,
        {
            attribute?: string;
            reflect?: boolean;
            type?: 'Array' | 'Boolean' | 'Number' | 'Object' | 'String';
        }
    >;
    /**
     * Is of type
     * ```ts
     * (ceClass: new () => HTMLElement) => new () => HTMLElement
     * ```
     */
    extend?: ArrowFunctionExpression | Identifier;
};

property end

end: number;

property immutable

immutable?: boolean;

property namespace

namespace?: Namespace;

property preserveWhitespace

preserveWhitespace?: boolean;

property runes

runes?: boolean;

property start

start: number;

interface SvelteOptionsRaw

interface SvelteOptionsRaw extends BaseElement {}

This is only an intermediate representation while parsing, it doesn't exist in the final AST

property name

name: 'svelte:options';

property type

type: 'SvelteOptions';

interface SvelteSelf

interface SvelteSelf extends BaseElement {}

property name

name: 'svelte:self';

property type

type: 'SvelteSelf';

interface SvelteWindow

interface SvelteWindow extends BaseElement {}

property name

name: 'svelte:window';

property type

type: 'SvelteWindow';

interface Text

interface Text extends BaseNode {}

Static text

property data

data: string;

Text with decoded HTML entities

property raw

raw: string;

The original text, with undecoded HTML entities

property type

type: 'Text';

interface TitleElement

interface TitleElement extends BaseElement {}

property name

name: 'title';

property type

type: 'TitleElement';

interface TransitionDirective

interface TransitionDirective extends BaseAttribute {}

A transition:, in: or out: directive

property expression

expression: null | Expression;

The 'y' in transition:x={y}

property intro

intro: boolean;

True if this is a transition: or in: directive

property modifiers

modifiers: Array<'local' | 'global'>;

property name

name: string;

The 'x' in transition:x

property outro

outro: boolean;

True if this is a transition: or out: directive

property type

type: 'TransitionDirective';

interface UseDirective

interface UseDirective extends BaseAttribute {}

A use: directive

property expression

expression: null | Expression;

The 'y' in use:x={y}

property name

name: string;

The 'x' in use:x

property type

type: 'UseDirective';

type AttributeLike

type AttributeLike = Attribute | SpreadAttribute | Directive;

type Block

type Block =
    | AST.EachBlock
    | AST.IfBlock
    | AST.AwaitBlock
    | AST.KeyBlock
    | AST.SnippetBlock;

type Directive

type Directive =
    | AST.AnimateDirective
    | AST.BindDirective
    | AST.ClassDirective
    | AST.LetDirective
    | AST.OnDirective
    | AST.StyleDirective
    | AST.TransitionDirective
    | AST.UseDirective;

type ElementLike

type ElementLike =
    | AST.Component
    | AST.TitleElement
    | AST.SlotElement
    | AST.RegularElement
    | AST.SvelteBody
    | AST.SvelteBoundary
    | AST.SvelteComponent
    | AST.SvelteDocument
    | AST.SvelteElement
    | AST.SvelteFragment
    | AST.SvelteHead
    | AST.SvelteOptionsRaw
    | AST.SvelteSelf
    | AST.SvelteWindow
    | AST.SvelteBoundary;

type SvelteNode

type SvelteNode = Node | TemplateNode | AST.Fragment | _CSS.Node | Script;

type Tag

type Tag =
    | AST.AttachTag
    | AST.ConstTag
    | AST.DebugTag
    | AST.ExpressionTag
    | AST.HtmlTag
    | AST.RenderTag;

type TemplateNode

type TemplateNode =
    | AST.Root
    | AST.Text
    | Tag
    | ElementLike
    | AST.Attribute
    | AST.SpreadAttribute
    | Directive
    | AST.AttachTag
    | AST.Comment
    | Block;

namespace svelte/compiler.AST.CSS

namespace svelte/compiler.AST.CSS {}

interface Atrule

interface Atrule extends BaseNode {}

property block

block: Block | null;

property name

name: string;

property prelude

prelude: string;

property type

type: 'Atrule';

interface AttributeSelector

interface AttributeSelector extends BaseNode {}

property flags

flags: string | null;

property matcher

matcher: string | null;

property name

name: string;

property type

type: 'AttributeSelector';

property value

value: string | null;

interface BaseNode

interface BaseNode {}

property end

end: number;

property start

start: number;

interface Block

interface Block extends BaseNode {}

property children

children: Array<Declaration | Rule | Atrule>;

property type

type: 'Block';

interface ClassSelector

interface ClassSelector extends BaseNode {}

property name

name: string;

property type

type: 'ClassSelector';

interface Combinator

interface Combinator extends BaseNode {}

property name

name: string;

property type

type: 'Combinator';

interface ComplexSelector

interface ComplexSelector extends BaseNode {}

A complex selector, e.g. a b c {}

property children

children: RelativeSelector[];

The a, b and c in a b c {}

property type

type: 'ComplexSelector';

interface Declaration

interface Declaration extends BaseNode {}

property property

property: string;

property type

type: 'Declaration';

property value

value: string;

interface IdSelector

interface IdSelector extends BaseNode {}

property name

name: string;

property type

type: 'IdSelector';

interface NestingSelector

interface NestingSelector extends BaseNode {}

property name

name: '&';

property type

type: 'NestingSelector';

interface Nth

interface Nth extends BaseNode {}

property type

type: 'Nth';

property value

value: string;

interface Percentage

interface Percentage extends BaseNode {}

property type

type: 'Percentage';

property value

value: string;

interface PseudoClassSelector

interface PseudoClassSelector extends BaseNode {}

property args

args: SelectorList | null;

property name

name: string;

property type

type: 'PseudoClassSelector';

interface PseudoElementSelector

interface PseudoElementSelector extends BaseNode {}

property name

name: string;

property type

type: 'PseudoElementSelector';

interface RelativeSelector

interface RelativeSelector extends BaseNode {}

A relative selector, e.g the a and > b in a > b {}

property combinator

combinator: null | Combinator;

In a > b, > b forms one relative selector, and > is the combinator. null for the first selector.

property selectors

selectors: SimpleSelector[];

The b:is(...) in > b:is(...)

property type

type: 'RelativeSelector';

interface Rule

interface Rule extends BaseNode {}

property block

block: Block;

property prelude

prelude: SelectorList;

property type

type: 'Rule';

interface SelectorList

interface SelectorList extends BaseNode {}

A list of selectors, e.g. a, b, c {}

property children

children: ComplexSelector[];

The a, b and c in a, b, c {}

property type

type: 'SelectorList';

interface StyleSheet

interface StyleSheet extends StyleSheetBase {}

property attributes

attributes: any[];

property content

content: {
    start: number;
    end: number;
    styles: string;
    /** Possible comment atop the style tag */
    comment: AST.Comment | null;
};

property type

type: 'StyleSheet';

interface StyleSheetBase

interface StyleSheetBase extends BaseNode {}

property children

children: Array<Atrule | Rule>;

interface StyleSheetFile

interface StyleSheetFile extends StyleSheetBase {}

property type

type: 'StyleSheetFile';

interface TypeSelector

interface TypeSelector extends BaseNode {}

property name

name: string;

property type

type: 'TypeSelector';

type Node

type Node =
    | StyleSheet
    | Rule
    | Atrule
    | SelectorList
    | Block
    | ComplexSelector
    | RelativeSelector
    | Combinator
    | SimpleSelector
    | Declaration;

type SimpleSelector

type SimpleSelector =
    | TypeSelector
    | IdSelector
    | ClassSelector
    | AttributeSelector
    | PseudoElementSelector
    | PseudoClassSelector
    | Percentage
    | Nth
    | NestingSelector;

namespace svelte/easing

module 'svelte/easing' {}

function backIn

backIn: (t: number) => number;

function backInOut

backInOut: (t: number) => number;

function backOut

backOut: (t: number) => number;

function bounceIn

bounceIn: (t: number) => number;

function bounceInOut

bounceInOut: (t: number) => number;

function bounceOut

bounceOut: (t: number) => number;

function circIn

circIn: (t: number) => number;

function circInOut

circInOut: (t: number) => number;

function circOut

circOut: (t: number) => number;

function cubicIn

cubicIn: (t: number) => number;

function cubicInOut

cubicInOut: (t: number) => number;

function cubicOut

cubicOut: (t: number) => number;

function elasticIn

elasticIn: (t: number) => number;

function elasticInOut

elasticInOut: (t: number) => number;

function elasticOut

elasticOut: (t: number) => number;

function expoIn

expoIn: (t: number) => number;

function expoInOut

expoInOut: (t: number) => number;

function expoOut

expoOut: (t: number) => number;

function linear

linear: (t: number) => number;

function quadIn

quadIn: (t: number) => number;

function quadInOut

quadInOut: (t: number) => number;

function quadOut

quadOut: (t: number) => number;

function quartIn

quartIn: (t: number) => number;

function quartInOut

quartInOut: (t: number) => number;

function quartOut

quartOut: (t: number) => number;

function quintIn

quintIn: (t: number) => number;

function quintInOut

quintInOut: (t: number) => number;

function quintOut

quintOut: (t: number) => number;

function sineIn

sineIn: (t: number) => number;

function sineInOut

sineInOut: (t: number) => number;

function sineOut

sineOut: (t: number) => number;

namespace svelte/events

module 'svelte/events' {}

function on

on: {
    <Type extends keyof WindowEventMap>(
        window: Window,
        type: Type,
        handler: (
            this: Window,
            event: WindowEventMap[Type] & { currentTarget: Window }
        ) => any,
        options?: AddEventListenerOptions | undefined
    ): () => void;
    <Type extends keyof DocumentEventMap>(
        document: Document,
        type: Type,
        handler: (
            this: Document,
            event: DocumentEventMap[Type] & { currentTarget: Document }
        ) => any,
        options?: AddEventListenerOptions
    ): () => void;
    <Element extends HTMLElement, Type extends keyof HTMLElementEventMap>(
        element: Element,
        type: Type,
        handler: (
            this: Element,
            event: HTMLElementEventMap[Type] & { currentTarget: Element }
        ) => any,
        options?: AddEventListenerOptions
    ): () => void;
    <Element extends MediaQueryList, Type extends 'change'>(
        element: Element,
        type: Type,
        handler: (
            this: Element,
            event: MediaQueryListEventMap[Type] & { currentTarget: Element }
        ) => any,
        options?: AddEventListenerOptions
    ): () => void;
    (
        element: EventTarget,
        type: string,
        handler: EventListener,
        options?: AddEventListenerOptions
    ): () => void;
};

Attaches an event handler to the window and returns a function that removes the handler. Using this rather than addEventListener will preserve the correct order relative to handlers added declaratively (with attributes like onclick), which use event delegation for performance reasons
Attaches an event handler to the document and returns a function that removes the handler. Using this rather than addEventListener will preserve the correct order relative to handlers added declaratively (with attributes like onclick), which use event delegation for performance reasons
Attaches an event handler to an element and returns a function that removes the handler. Using this rather than addEventListener will preserve the correct order relative to handlers added declaratively (with attributes like onclick), which use event delegation for performance reasons

namespace svelte/legacy

module 'svelte/legacy' {}

function asClassComponent

asClassComponent: <
    Props extends Record<string, any>,
    Exports extends Record<string, any>,
    Events extends Record<string, any>,
    Slots extends Record<string, any>
>(
    component: SvelteComponent<Props, Events, Slots> | Component<Props>
) => ComponentType<SvelteComponent<Props, Events, Slots> & Exports>;

Takes the component function and returns a Svelte 4 compatible component constructor.
Deprecated
Use this only as a temporary solution to migrate your imperative component code to Svelte 5.

function createBubbler

createBubbler: () => (type: string) => (event: Event) => boolean;

Function to create a bubble function that mimic the behavior of on:click without handler available in svelte 4.
Deprecated
Use this only as a temporary solution to migrate your automatically delegated events in Svelte 5.

function createClassComponent

createClassComponent: <
    Props extends Record<string, any>,
    Exports extends Record<string, any>,
    Events extends Record<string, any>,
    Slots extends Record<string, any>
>(
    options: ComponentConstructorOptions<Props> & {
        component:
            | ComponentType<SvelteComponent<Props, Events, Slots>>
            | Component<Props>;
    }
) => SvelteComponent<Props, Events, Slots> & Exports;

Takes the same options as a Svelte 4 component and the component function and returns a Svelte 4 compatible component.
Deprecated
Use this only as a temporary solution to migrate your imperative component code to Svelte 5.

function handlers

handlers: (...handlers: EventListener[]) => EventListener;

Function to mimic the multiple listeners available in svelte 4
Deprecated

function nonpassive

nonpassive: (
    node: HTMLElement,
    [event, handler]: [event: string, handler: () => EventListener]
) => void;

Substitute for the nonpassive event modifier, implemented as an action
Deprecated

function once

once: (
    fn: (event: Event, ...args: Array<unknown>) => void
) => (event: Event, ...args: unknown[]) => void;

Substitute for the once event modifier
Deprecated

function passive

passive: (
    node: HTMLElement,
    [event, handler]: [event: string, handler: () => EventListener]
) => void;

Substitute for the passive event modifier, implemented as an action
Deprecated

function preventDefault

preventDefault: (
    fn: (event: Event, ...args: Array<unknown>) => void
) => (event: Event, ...args: unknown[]) => void;

Substitute for the preventDefault event modifier
Deprecated

function run

run: (fn: () => void | (() => void)) => void;

Runs the given function once immediately on the server, and works like $effect.pre on the client.
Deprecated
Use this only as a temporary solution to migrate your component code to Svelte 5.

function self

self: (
    fn: (event: Event, ...args: Array<unknown>) => void
) => (event: Event, ...args: unknown[]) => void;

Substitute for the self event modifier
Deprecated

function stopImmediatePropagation

stopImmediatePropagation: (
    fn: (event: Event, ...args: Array<unknown>) => void
) => (event: Event, ...args: unknown[]) => void;

Substitute for the stopImmediatePropagation event modifier
Deprecated

function stopPropagation

stopPropagation: (
    fn: (event: Event, ...args: Array<unknown>) => void
) => (event: Event, ...args: unknown[]) => void;

Substitute for the stopPropagation event modifier
Deprecated

function trusted

trusted: (
    fn: (event: Event, ...args: Array<unknown>) => void
) => (event: Event, ...args: unknown[]) => void;

Substitute for the trusted event modifier
Deprecated

type LegacyComponentType

type LegacyComponentType = {
    new (o: ComponentConstructorOptions): SvelteComponent;
    (...args: Parameters<Component<Record<string, any>>>): ReturnType<
        Component<Record<string, any>, Record<string, any>>
    >;
};

Support using the component as both a class and function during the transition period

namespace svelte/motion

module 'svelte/motion' {}

variable prefersReducedMotion

const prefersReducedMotion: MediaQuery;

A [media query](https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery) that matches if the user [prefers reduced motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).

<script>
	import { prefersReducedMotion } from 'svelte/motion';
	import { fly } from 'svelte/transition';

	let visible = $state(false);
</script>

<button onclick={() => visible = !visible}>
	toggle
</button>

{#if visible}
	<p transition:fly={{ y: prefersReducedMotion.current ? 0 : 200 }}>
		flies in, unless the user prefers reduced motion
	</p>
{/if}

5.7.0

function spring

spring: <T = any>(
    value?: T | undefined,
    opts?: SpringOpts | undefined
) => Spring<T>;

The spring function in Svelte creates a store whose value is animated, with a motion that simulates the behavior of a spring. This means when the value changes, instead of transitioning at a steady rate, it "bounces" like a spring would, depending on the physics parameters provided. This adds a level of realism to the transitions and can enhance the user experience.
Deprecated
Use [Spring](https://svelte.dev/docs/svelte/svelte-motion#Spring) instead

function tweened

tweened: <T>(
    value?: T | undefined,
    defaults?: TweenedOptions<T> | undefined
) => Tweened<T>;

A tweened store in Svelte is a special type of store that provides smooth transitions between state values over time.
Deprecated
Use [Tween](https://svelte.dev/docs/svelte/svelte-motion#Tween) instead

class Spring

class Spring<T> {}

A wrapper for a value that behaves in a spring-like fashion. Changes to spring.target will cause spring.current to move towards it over time, taking account of the spring.stiffness and spring.damping parameters.
<script> import { Spring } from 'svelte/motion'; const spring = new Spring(0); </script> <input type="range" bind:value={spring.target} /> <input type="range" bind:value={spring.current} disabled />
5.8.0

constructor

constructor(value: {}, options?: SpringOpts);

property current

readonly current: {};

The current value of the spring. This property only exists on the Spring class, not the legacy spring store.

property damping

damping: number;

property precision

precision: number;

property stiffness

stiffness: number;

property target

target: {};

The end value of the spring. This property only exists on the Spring class, not the legacy spring store.

method of

static of: <U>(fn: () => U, options?: SpringOpts) => Spring<U>;

Create a spring whose value is bound to the return value of fn. This must be called inside an effect root (for example, during component initialisation).
<script> import { Spring } from 'svelte/motion'; let { number } = $props(); const spring = Spring.of(() => number); </script>

method set

set: {
    (new_value: T, opts?: SpringUpdateOpts): Promise<void>;
    (value: T, options?: SpringUpdateOpts): Promise<void>;
};

Sets spring.target to value and returns a Promise that resolves if and when spring.current catches up to it.
If options.instant is true, spring.current immediately matches spring.target.
If options.preserveMomentum is provided, the spring will continue on its current trajectory for the specified number of milliseconds. This is useful for things like 'fling' gestures.

class Tween

class Tween<T> {}

A wrapper for a value that tweens smoothly to its target value. Changes to tween.target will cause tween.current to move towards it over time, taking account of the delay, duration and easing options.

<script>
	import { Tween } from 'svelte/motion';

	const tween = new Tween(0);
</script>

<input type="range" bind:value={tween.target} />
<input type="range" bind:value={tween.current} disabled />

5.8.0

constructor

constructor(value: {}, options?: TweenedOptions<T>);

property current

readonly current: {};

property target

target: {};

method of

static of: <U>(fn: () => U, options?: TweenedOptions<U> | undefined) => Tween<U>;

Create a tween whose value is bound to the return value of fn. This must be called inside an effect root (for example, during component initialisation).
<script> import { Tween } from 'svelte/motion'; let { number } = $props(); const tween = Tween.of(() => number); </script>

method set

set: (value: T, options?: TweenedOptions<T> | undefined) => Promise<void>;

Sets tween.target to value and returns a Promise that resolves if and when tween.current catches up to it.
If options are provided, they will override the tween's defaults.

interface Spring

interface Spring<T> extends Readable<T> {}

property damping

damping: number;

property precision

precision: number;

property stiffness

stiffness: number;

property update

update: (fn: Updater<T>, opts?: SpringUpdateOpts) => Promise<void>;

Deprecated
Only exists on the legacy spring store, not the Spring class

method set

set: {
    (new_value: T, opts?: SpringUpdateOpts): Promise<void>;
    (value: T, options?: SpringUpdateOpts): Promise<void>;
};

subscribe: (fn: (value: T) => void) => Unsubscriber;

Deprecated
Only exists on the legacy spring store, not the Spring class

interface Tweened

interface Tweened<T> extends Readable<T> {}

method set

set: (value: T, opts?: TweenedOptions<T>) => Promise<void>;

method update

update: (updater: Updater<T>, opts?: TweenedOptions<T>) => Promise<void>;

namespace svelte/reactivity

module 'svelte/reactivity' {}

function createSubscriber

createSubscriber: (
    start: (update: () => void) => (() => void) | void
) => () => void;

Returns a subscribe function that integrates external event-based systems with Svelte's reactivity. It's particularly useful for integrating with web APIs like MediaQuery, IntersectionObserver, or WebSocket.
If subscribe is called inside an effect (including indirectly, for example inside a getter), the start callback will be called with an update function. Whenever update is called, the effect re-runs.
If start returns a cleanup function, it will be called when the effect is destroyed.
If subscribe is called in multiple effects, start will only be called once as long as the effects are active, and the returned teardown function will only be called when all effects are destroyed.
It's best understood with an example. Here's an implementation of [MediaQuery](https://svelte.dev/docs/svelte/svelte-reactivity#MediaQuery):
import { createSubscriber } from 'svelte/reactivity'; import { on } from 'svelte/events'; export class MediaQuery { #query; #subscribe; constructor(query) { this.#query = window.matchMedia(`(${query})`); this.#subscribe = createSubscriber((update) => { // when the `change` event occurs, re-run any effects that read `this.current` const off = on(this.#query, 'change', update); // stop listening when all the effects are destroyed return () => off(); }); } get current() { // This makes the getter reactive, if read in an effect this.#subscribe(); // Return the current state of the query, whether or not we're in an effect return this.#query.matches; } }
5.7.0

class MediaQuery

class MediaQuery extends ReactiveValue<boolean> {}

Creates a media query and provides a current property that reflects whether or not it matches.
Use it carefully — during server-side rendering, there is no way to know what the correct value should be, potentially causing content to change upon hydration. If you can use the media query in CSS to achieve the same effect, do that.
<script> import { MediaQuery } from 'svelte/reactivity'; const large = new MediaQuery('min-width: 800px'); </script> <h1>{large.current ? 'large screen' : 'small screen'}</h1>
{ReactiveValue} 5.7.0

constructor

constructor(query: string, fallback?: boolean);

Parameter query
A media query string
Parameter fallback
Fallback value for the server

class SvelteDate

class SvelteDate extends Date {}

A reactive version of the built-in [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object. Reading the date (whether with methods like date.getTime() or date.toString(), or via things like [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat)) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived) will cause it to be re-evaluated when the value of the date changes.
<script> import { SvelteDate } from 'svelte/reactivity'; const date = new SvelteDate(); const formatter = new Intl.DateTimeFormat(undefined, { hour: 'numeric', minute: 'numeric', second: 'numeric' }); $effect(() => { const interval = setInterval(() => { date.setTime(Date.now()); }, 1000); return () => { clearInterval(interval); }; }); </script> <p>The time is {formatter.format(date)}</p>

constructor

constructor(...params: any[]);

class SvelteMap

class SvelteMap<K, V> extends Map<K, V> {}

A reactive version of the built-in [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) object. Reading contents of the map (by iterating, or by reading map.size or calling map.get(...) or map.has(...) as in the [tic-tac-toe example](https://svelte.dev/playground/0b0ff4aa49c9443f9b47fe5203c78293) below) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived) will cause it to be re-evaluated as necessary when the map is updated.
Note that values in a reactive map are _not_ made [deeply reactive](https://svelte.dev/docs/svelte/$state#Deep-state).
<script> import { SvelteMap } from 'svelte/reactivity'; import { result } from './game.js'; let board = new SvelteMap(); let player = $state('x'); let winner = $derived(result(board)); function reset() { player = 'x'; board.clear(); } </script> <div class="board"> {#each Array(9), i} <button disabled={board.has(i) || winner} onclick={() => { board.set(i, player); player = player === 'x' ? 'o' : 'x'; }} >{board.get(i)}</button> {/each} </div> {#if winner} <p>{winner} wins!</p> <button onclick={reset}>reset</button> {:else} <p>{player} is next</p> {/if}

constructor

constructor(value?: Iterable<readonly [K, V]>);

method set

set: (key: K, value: V) => this;

class SvelteSet

class SvelteSet<T> extends Set<T> {}

A reactive version of the built-in [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set) object. Reading contents of the set (by iterating, or by reading set.size or calling set.has(...) as in the [example](https://svelte.dev/playground/53438b51194b4882bcc18cddf9f96f15) below) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived) will cause it to be re-evaluated as necessary when the set is updated.
Note that values in a reactive set are _not_ made [deeply reactive](https://svelte.dev/docs/svelte/$state#Deep-state).
<script> import { SvelteSet } from 'svelte/reactivity'; let monkeys = new SvelteSet(); function toggle(monkey) { if (monkeys.has(monkey)) { monkeys.delete(monkey); } else { monkeys.add(monkey); } } </script> {#each ['🙈', '🙉', '🙊'] as monkey} <button onclick={() => toggle(monkey)}>{monkey}</button> {/each} <button onclick={() => monkeys.clear()}>clear</button> {#if monkeys.has('🙈')}<p>see no evil</p>{/if} {#if monkeys.has('🙉')}<p>hear no evil</p>{/if} {#if monkeys.has('🙊')}<p>speak no evil</p>{/if}

constructor

constructor(value?: Iterable<T>);

method add

add: (value: T) => this;

class SvelteURL

class SvelteURL extends URL {}

A reactive version of the built-in [URL](https://developer.mozilla.org/en-US/docs/Web/API/URL) object. Reading properties of the URL (such as url.href or url.pathname) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived) will cause it to be re-evaluated as necessary when the URL changes.
The searchParams property is an instance of [SvelteURLSearchParams](https://svelte.dev/docs/svelte/svelte-reactivity#SvelteURLSearchParams).
[Example](https://svelte.dev/playground/5a694758901b448c83dc40dc31c71f2a):
<script> import { SvelteURL } from 'svelte/reactivity'; const url = new SvelteURL('https://example.com/path'); </script>  <input bind:value={url.protocol} /> <input bind:value={url.hostname} /> <input bind:value={url.pathname} /> <hr />  <input bind:value={url.href} size="65" />

property searchParams

readonly searchParams: SvelteURLSearchParams;

class SvelteURLSearchParams

class SvelteURLSearchParams extends URLSearchParams {}

A reactive version of the built-in [URLSearchParams](https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams) object. Reading its contents (by iterating, or by calling params.get(...) or params.getAll(...) as in the [example](https://svelte.dev/playground/b3926c86c5384bab9f2cf993bc08c1c8) below) in an [effect](https://svelte.dev/docs/svelte/$effect) or [derived](https://svelte.dev/docs/svelte/$derived) will cause it to be re-evaluated as necessary when the params are updated.
<script> import { SvelteURLSearchParams } from 'svelte/reactivity'; const params = new SvelteURLSearchParams('message=hello'); let key = $state('key'); let value = $state('value'); </script> <input bind:value={key} /> <input bind:value={value} /> <button onclick={() => params.append(key, value)}>append</button> <p>?{params.toString()}</p> {#each params as [key, value]} <p>{key}: {value}</p> {/each}

method [REPLACE]

[REPLACE]: (params: URLSearchParams) => void;

namespace svelte/reactivity/window

module 'svelte/reactivity/window' {}

variable devicePixelRatio

const devicePixelRatio: { readonly current: number };

devicePixelRatio.current is a reactive view of window.devicePixelRatio. On the server it is undefined. Note that behaviour differs between browsers — on Chrome it will respond to the current zoom level, on Firefox and Safari it won't. 5.11.0

variable innerHeight

const innerHeight: ReactiveValue<number>;

innerHeight.current is a reactive view of window.innerHeight. On the server it is undefined. 5.11.0

variable innerWidth

const innerWidth: ReactiveValue<number>;

innerWidth.current is a reactive view of window.innerWidth. On the server it is undefined. 5.11.0

variable online

const online: ReactiveValue<boolean>;

online.current is a reactive view of navigator.onLine. On the server it is undefined. 5.11.0

variable outerHeight

const outerHeight: ReactiveValue<number>;

outerHeight.current is a reactive view of window.outerHeight. On the server it is undefined. 5.11.0

variable outerWidth

const outerWidth: ReactiveValue<number>;

outerWidth.current is a reactive view of window.outerWidth. On the server it is undefined. 5.11.0

variable screenLeft

const screenLeft: ReactiveValue<number>;

screenLeft.current is a reactive view of window.screenLeft. It is updated inside a requestAnimationFrame callback. On the server it is undefined. 5.11.0

variable screenTop

const screenTop: ReactiveValue<number>;

screenTop.current is a reactive view of window.screenTop. It is updated inside a requestAnimationFrame callback. On the server it is undefined. 5.11.0

variable scrollX

const scrollX: ReactiveValue<number>;

scrollX.current is a reactive view of window.scrollX. On the server it is undefined. 5.11.0

variable scrollY

const scrollY: ReactiveValue<number>;

scrollY.current is a reactive view of window.scrollY. On the server it is undefined. 5.11.0

namespace svelte/server

module 'svelte/server' {}

function render

render: <
    Comp extends SvelteComponent<any, any, any> | Component<any, {}, string>,
    Props extends ComponentProps<Comp> = ComponentProps<Comp>
>(
    ...args: {} extends Props
        ? [
              component: Comp extends SvelteComponent<any, any, any>
                  ? ComponentType<Comp>
                  : Comp,
              options?: {
                  props?: Omit<Props, '$$slots' | '$$events'>;
                  context?: Map<any, any>;
                  idPrefix?: string;
                  csp?: Csp;
                  transformError?: (error: unknown) => unknown | Promise<unknown>;
              }
          ]
        : [
              component: Comp extends SvelteComponent<any, any, any>
                  ? ComponentType<Comp>
                  : Comp,
              options: {
                  props: Omit<Props, '$$slots' | '$$events'>;
                  context?: Map<any, any>;
                  idPrefix?: string;
                  csp?: Csp;
                  transformError?: (error: unknown) => unknown | Promise<unknown>;
              }
          ]
) => RenderOutput;

Only available on the server and when compiling with the server option. Takes a component and returns an object with body and head properties on it, which you can use to populate the HTML when server-rendering your app.

namespace svelte/store

module 'svelte/store' {}

function derived

derived: {
    <S extends Stores, T>(
        stores: S,
        fn: (
            values: StoresValues<S>,
            set: (value: T) => void,
            update: (fn: Updater<T>) => void
        ) => Unsubscriber | void,
        initial_value?: T | undefined
    ): Readable<T>;
    <S extends Stores, T>(
        stores: S,
        fn: (values: StoresValues<S>) => T,
        initial_value?: T
    ): Readable<T>;
};

Derived value store by synchronizing one or more readable stores and applying an aggregation function over its input values.

function fromStore

fromStore: {
    <V>(store: Writable<V>): { current: V };
    <V>(store: Readable<V>): { readonly current: V };
};

function get

get: <T>(store: Readable<T>) => T;

Get the current value from a store by subscribing and immediately unsubscribing.

function readable

readable: <T>(
    value?: T | undefined,
    start?: StartStopNotifier<T> | undefined
) => Readable<T>;

Creates a Readable store that allows reading by subscription.
Parameter value
initial value

function readonly

readonly: <T>(store: Readable<T>) => Readable<T>;

Takes a store and returns a new one derived from the old one that is readable.
Parameter store
store to make readonly

function toStore

toStore: {
    <V>(get: () => V, set: (v: V) => void): Writable<V>;
    <V>(get: () => V): Readable<V>;
};

function writable

writable: <T>(
    value?: T | undefined,
    start?: StartStopNotifier<T> | undefined
) => Writable<T>;

Create a Writable store that allows both updating and reading by subscription.
Parameter value
initial value

interface Readable

interface Readable<T> {}

Readable interface for subscribing.

subscribe: (
    this: void,
    run: Subscriber<T>,
    invalidate?: () => void
) => Unsubscriber;

Subscribe on value changes.
Parameter run
subscription callback
Parameter invalidate
cleanup callback

interface Writable

interface Writable<T> extends Readable<T> {}

Writable interface for both updating and subscribing.

method set

set: (this: void, value: T) => void;

Set value and inform subscribers.
Parameter value
to set

method update

update: (this: void, updater: Updater<T>) => void;

Update value using callback and inform subscribers.
Parameter updater
callback

type StartStopNotifier

type StartStopNotifier<T> = (
    set: (value: T) => void,
    update: (fn: Updater<T>) => void
) => void | (() => void);

Start and stop notification callbacks. This function is called when the first subscriber subscribes.
Parameter set
Function that sets the value of the store.
Parameter update
Function that sets the value of the store after passing the current value to the update function.
Returns
Optionally, a cleanup function that is called when the last remaining subscriber unsubscribes.

type Subscriber

type Subscriber<T> = (value: T) => void;

Callback to inform of a value updates.

type Unsubscriber

type Unsubscriber = () => void;

Unsubscribes from value updates.

type Updater

type Updater<T> = (value: T) => T;

Callback to update a value.

namespace svelte/transition

module 'svelte/transition' {}

function blur

blur: (
    node: Element,
    { delay, duration, easing, amount, opacity }?: BlurParams | undefined
) => TransitionConfig;

Animates a blur filter alongside an element's opacity.

function crossfade

crossfade: ({
    fallback,
    ...defaults
}: CrossfadeParams & {
    fallback?: (
        node: Element,
        params: CrossfadeParams,
        intro: boolean
    ) => TransitionConfig;
}) => [
    (node: any, params: CrossfadeParams & { key: any }) => () => TransitionConfig,
    (node: any, params: CrossfadeParams & { key: any }) => () => TransitionConfig
];

The crossfade function creates a pair of [transitions](https://svelte.dev/docs/svelte/transition) called send and receive. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the fallback transition is used.

function draw

draw: (
    node: SVGElement & { getTotalLength(): number },
    { delay, speed, duration, easing }?: DrawParams | undefined
) => TransitionConfig;

Animates the stroke of an SVG element, like a snake in a tube. in transitions begin with the path invisible and draw the path to the screen over time. out transitions start in a visible state and gradually erase the path. draw only works with elements that have a getTotalLength method, like <path> and <polyline>.

function fade

fade: (
    node: Element,
    { delay, duration, easing }?: FadeParams | undefined
) => TransitionConfig;

Animates the opacity of an element from 0 to the current opacity for in transitions and from the current opacity to 0 for out transitions.

function fly

fly: (
    node: Element,
    { delay, duration, easing, x, y, opacity }?: FlyParams | undefined
) => TransitionConfig;

Animates the x and y positions and the opacity of an element. in transitions animate from the provided values, passed as parameters to the element's default values. out transitions animate from the element's default values to the provided values.

function scale

scale: (
    node: Element,
    { delay, duration, easing, start, opacity }?: ScaleParams | undefined
) => TransitionConfig;

Animates the opacity and scale of an element. in transitions animate from the provided values, passed as parameters, to an element's current (default) values. out transitions animate from an element's default values to the provided values.

function slide

slide: (
    node: Element,
    { delay, duration, easing, axis }?: SlideParams | undefined
) => TransitionConfig;

Slides an element in and out.

interface BlurParams

interface BlurParams {}

property amount

amount?: number | string;

property delay

delay?: number;

property duration

duration?: number;

property easing

easing?: EasingFunction;

property opacity

opacity?: number;

interface CrossfadeParams

interface CrossfadeParams {}

property delay

delay?: number;

property duration

duration?: number | ((len: number) => number);

property easing

easing?: EasingFunction;

interface DrawParams

interface DrawParams {}

property delay

delay?: number;

property duration

duration?: number | ((len: number) => number);

property easing

easing?: EasingFunction;

property speed

speed?: number;

interface FadeParams

interface FadeParams {}

property delay

delay?: number;

property duration

duration?: number;

property easing

easing?: EasingFunction;

interface FlyParams

interface FlyParams {}

property delay

delay?: number;

property duration

duration?: number;

property easing

easing?: EasingFunction;

property opacity

opacity?: number;

property x

x?: number | string;

property y

y?: number | string;

interface ScaleParams

interface ScaleParams {}

property delay

delay?: number;

property duration

duration?: number;

property easing

easing?: EasingFunction;

property opacity

opacity?: number;

property start

start?: number;

interface SlideParams

interface SlideParams {}

property axis

axis?: 'x' | 'y';

property delay

delay?: number;

property duration

duration?: number;

property easing

easing?: EasingFunction;

interface TransitionConfig

interface TransitionConfig {}

property css

css?: (t: number, u: number) => string;

property delay

delay?: number;

property duration

duration?: number;

property easing

easing?: EasingFunction;

property tick

tick?: (t: number, u: number) => void;

type EasingFunction

type EasingFunction = (t: number) => number;

namespace svelte/types/compiler/interfaces

module 'svelte/types/compiler/interfaces' {}

type CompileOptions

type CompileOptions = CompileOptions_1;

Deprecated
import this from 'svelte' instead

type Warning

type Warning = Warning_1;

Deprecated
import this from 'svelte' instead

namespace svelte/types/compiler/preprocess

module 'svelte/types/compiler/preprocess' {}

type MarkupPreprocessor

type MarkupPreprocessor = MarkupPreprocessor_1;

Deprecated
import this from 'svelte/preprocess' instead

type Preprocessor

type Preprocessor = Preprocessor_1;

Deprecated
import this from 'svelte/preprocess' instead

type PreprocessorGroup

type PreprocessorGroup = PreprocessorGroup_1;

Deprecated
import this from 'svelte/preprocess' instead

type Processed

type Processed = Processed_1;

Deprecated
import this from 'svelte/preprocess' instead

type SveltePreprocessor

type SveltePreprocessor<
    PreprocessorType extends keyof PreprocessorGroup_1,
    Options = any
> = SveltePreprocessor_1<PreprocessorType, Options>;

Deprecated
import this from 'svelte/preprocess' instead

Package Files (1)

types/index.d.ts

Dependencies (16)

Dev Dependencies (15)

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/svelte.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/svelte)

HTML

<a href="https://www.jsdocs.io/package/svelte"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 1 second ago.
Package analyzed in 10164 ms.
Missing or incorrect documentation? Open an issue for this package.

svelte

Install

Overview

Index

Functions

Namespaces

Functions

function $bindable

See Also

function $derived

Parameter expression

See Also

function $effect

Parameter fn

See Also

function $host

See Also

function $inspect

See Also

function $props

See Also

function $state

Parameter initial

See Also

Namespaces

namespace *.svelte

variable Comp

type Comp

namespace $bindable

variable apply

Deprecated

variable arguments

Deprecated

variable bind

Deprecated

variable call

Deprecated

variable caller

Deprecated

variable length

Deprecated

variable name

Deprecated

variable prototype

Deprecated

variable toString

Deprecated

namespace $derived

variable apply

Deprecated

variable arguments

Deprecated

variable bind

Deprecated

variable call

Deprecated

variable caller

Deprecated

variable length

Deprecated

variable name

Deprecated

variable prototype

Deprecated

variable toString

Deprecated

function by

See Also

namespace $effect

variable apply

Deprecated

variable arguments

Deprecated

variable bind

Deprecated

variable call

Deprecated

variable caller

Deprecated

variable length