Search • Svelte

Legacy APIs<svelte:component>

gacy mode, it won't — we must use <svelte:component>, which destroys and recreates the component instance when the value of its

MiscSvelte 5 migration guide`<svelte:component>` is no longer necessary

To make it dynamic you had to use <svelte:component>.This is no longer true in Svelte 5:<script> import A from './A.svelte';

MiscSvelte 5 migration guide`<svelte:component>` is no longer necessaryDot notation indicates a component

In Svelte 4, <foo.bar> would create an element with a tag name of "foo.bar". In Svelte 5, foo.bar is treated as a component instead. This is particula

Introduction.svelte files

Components are the building blocks of Svelte applications. They are written into .svelte files, using a superset of HTML.All three sections — script,

StylingScoped styles

Svelte components can include a <style> element containing CSS that belongs to the component. This CSS is scoped by default, meaning that styles will

Special elements<svelte:options>

<svelte:options option={value} />The <svelte:options> element provides a place to specify per-component compiler options, which are detailed in the co

RuntimeLifecycle hooks

In Svelte 5, the component lifecycle consists of only two parts: Its creation and its destruction. Everything in-between — when certain state is updat

RuntimeImperative component API

Every Svelte application starts by imperatively creating a root component. On the client this component is mounted to a specific element. On the serve

MiscCustom elements

Svelte components can also be compiled to custom elements (aka web components) using the customElement: true compiler option. You should specify a tag

Legacy APIs<svelte:self>

The <svelte:self> element allows a component to include itself, recursively.It cannot appear at the top level of your markup; it must be inside an if

Legacy APIsImperative component API

In Svelte 3 and 4, the API for interacting with a component is different than in Svelte 5. Note that this page does not apply to legacy mode component

IntroductionOverview

Svelte is a framework for building user interfaces on the web. It uses a compiler to turn declarative components written in HTML, CSS and JavaScript..

Runes$bindable

Ordinarily, props go one way, from parent to child. This makes it easy to understand how data flows around your app.In Svelte, component props can be

Template syntaxawait

As of Svelte 5.36, you can use the await keyword inside your components in three places where it was previously unavailable:at the top level of your c

Special elements<svelte:window>

<svelte:window onevent={handler} /><svelte:window bind:prop={value} />The <svelte:window> element allows you to add event listeners to the window obje

MiscTypeScript

You can use TypeScript within Svelte components. IDE extensions like the Svelte VS Code extension will help you catch errors right in your editor, and

Legacy APIs<slot>

In Svelte 5, content can be passed to components in the form of snippets and rendered using render tags.In legacy mode, content inside component tags

StylingCustom properties

You can pass CSS custom properties — both static and dynamic — to components:<Slider bind:value min={0} max={100} --track-color="black" --thumb-c

RuntimeStores

A store is an object that allows reactive access to a value via a simple store contract. The `svelte/store` module contains minimal store implementati

ReferenceCompiler errors

n}`svelte_component_missing_this `<svelte:component>` must have a 'this' attributesvelte_element_missing_this `<svelte:element>

Runes$props

The inputs to a component are referred to as props, which is short for properties. You pass props to components just like you pass attributes to eleme

Runes$host

When compiling a component as a custom element, the $host rune provides access to the host element, allowing you to (for example) dispatch custom even

RuntimeContext

Context allows components to access values owned by parent components without passing them down as props (potentially through many layers of intermedi

MiscCustom elementsComponent lifecycle

Custom elements are created from Svelte components using a wrapper approach. This means the inner Svelte component has no knowledge that it is a custo

MiscCustom elementsComponent options

When constructing a custom element, you can tailor several aspects by defining customElement as an object within <svelte:options> since Svelte 4. This

MiscSvelte 5 migration guideComponents are no longer classes

In Svelte 3 and 4, components are classes. In Svelte 5 they are functions and should be instantiated differently. If you need to manually instantiate

ReferencesvelteComponentConstructorOptions

In Svelte 4, components are classes. In Svelte 5, they are functions. Use mount instead to instantiate components. See migration guide for more info.

MiscTypeScript<script lang="ts">

To use TypeScript inside your Svelte components, add lang="ts" to your script tags:<script lang="ts"> let name: string = 'world'; function greet(na

MiscTypeScriptThe `Component` type

Svelte components are of type Component. You can use it and its related types to express a variety of constraints.Using it together with dynamic compo

MiscCustom elementsCaveats and limitations

Custom elements can be a useful way to package components for consumption in a non-Svelte app, as they will work with vanilla HTML and JavaScript as w

MiscFrequently asked questionsCan I tell Svelte not to remove my unused styles?

No. Svelte removes the styles from the component and warns you about them in order to prevent issues that would otherwise arise.Svelte's component sty

ReferencesvelteSvelteComponent

This was the base class for Svelte components in Svelte 4. Svelte 5+ components are completely different under the hood. For typing, use Component ins

ReferencesvelteSvelteComponentTyped

Use Component instead. See migration guide for more information. class SvelteComponentTyped< Props extends Record<string, any> = Record<string, any>

Runes$propsUpdating props

References to a prop inside a component update when the prop itself updates — when count changes in App.svelte, it will also change inside Child.svelt

Template syntaxBasic markupComments

You can use HTML comments inside components.<h1>Hello world</h1>Comments beginning with svelte-ignore disable warnings for

Template syntaxbind:bind:property for components

bind:property={variable}You can bind to component props using the same syntax as for elements.<Keypad bind:value={pin} />While Svelte props are reacti

RuntimeImperative component APImount

Instantiates a component and mounts it to the given target: import { mount } from 'svelte'; import App from './App.svelte'; const app = mount(App, {

MiscTestingUnit and component tests with Vitest

Unit tests allow you to test small isolated parts of your code. Integration tests allow you to test parts of your application to see if they work toge

MiscFrequently asked questionsHow do I document my components?

In editors which use the Svelte Language Server you can document Components, functions and exports using specially formatted comments.<script> /** Wh

Legacy APIson:Component events

Components can dispatch events by creating a dispatcher when they are initialised: <script> import { createEventDispatc

Legacy APIsImperative component APICreating a component

const component = new Component(options);A client-side component — that is, a component compiled with generate: 'dom' (or the generate option left uns

RuntimeStoresWhen to use stores

Prior to Svelte 5, stores were the go-to solution for creating cross-component reactive states or extracting logic. With runes, these use cases have g

RuntimeLifecycle hooksDeprecated: `beforeUpdate` / `afterUpdate`

Svelte 4 contained hooks that ran before and after the component as a whole was updated. For backwards compatibility, these hooks were shimmed in Svel

MiscSvelte 5 migration guideSnippets instead of slots

In Svelte 4, content can be passed to components using slots. Svelte 5 replaces them with snippets, which are more powerful and flexible, and so slots

MiscFrequently asked questionsHow do I test Svelte apps?

How your application is structured and where logic is defined will determine the best way to ensure it is properly tested. It is important to note tha

Referencesvelte/compilerCompileOptions

interface CompileOptions extends ModuleCompileOptions {/*…*/} name?: string; Sets the name of the resulting JavaScript class (though the compiler will

Template syntax{#snippet ...}Snippet scope

Snippets can be declared anywhere inside your component. They can reference values declared outside themselves, for example in the <script> tag or in

RuntimeContextsetContext` and getContext`

As an alternative to createContext, you can use setContext and getContext directly. The parent component sets context with setContext(key, value)...<!

MiscTestingComponent tests with Storybook

Storybook is a tool for developing and documenting UI components, and it can also be used to test your components. They're run with Vitest's browser m

ReferencesvelteComponentProps

Convenience type to get the props the given component expects.Example: Ensure a variable contains the props expected by MyComponent:import type { Comp

MiscFrequently asked questionsHow do I write a mobile app with Svelte?

While most mobile apps are written without using JavaScript, if you'd like to leverage your existing Svelte components and knowledge of Svelte when bu

Referencesvelte/compilerprint

print converts a Svelte AST node back into Svelte source code. It is primarily intended for tools that parse and transform components using the compil

ReferencesvelteComponentType

This type is obsolete when working with the new Component type. type ComponentType< Comp extends SvelteComponent = SvelteComponent > = (new ( optio

Referencesvelte/compilerparse

The parse function parses a component, returning only its abstract syntax tree.The modern option (false by default in Svelte 5) makes the parser retur

Referencesvelte/legacyasClassComponent

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

MiscSvelte 5 migration guideEvent changesComponent events

In Svelte 4, components could emit events by creating a dispatcher with createEventDispatcher.This function is deprecated in Svelte 5. Instead, compon

MiscSvelte 5 migration guideReactivity syntax changeslet → $state

In Svelte 4, a let declaration at the top level of a component was implicitly reactive. In Svelte 5, things are more explicit: a variable is reactive

MiscSvelte 5 migration guideReactivity syntax changes$: → $derived/$effect

In Svelte 4, a $: statement at the top level of a component could be used to declare a derivation, i.e. state that is entirely defined through a compu

MiscSvelte 5 migration guideReactivity syntax changesexport let → $props

In Svelte 4, properties of a component were declared using export let. Each property was one declaration. In Svelte 5, all properties are declared thr

ReferencesvelteComponentExample:

You have component library on npm called component-library, from which you export a component called MyComponent. For Svelte+TypeScript users, you wan

MiscSvelte 5 migration guideComponents are no longer classesComponent typing changes

The change from classes towards functions is also reflected in the typings: SvelteComponent, the base class from Svelte 4, is deprecated in favour of

MiscSvelte 5 migration guideSnippets instead of slotsPassing data back up

In Svelte 4, you would pass data to a <slot /> and then retrieve it with let: in the parent component. In Svelte 5, snippets take on that responsibili

MiscSvelte 5 migration guideBreaking changes in runes mode`accessors` option is ignored

Setting the accessors option to true makes properties of a component directly accessible on the component instance.<svelte:options accessors={true} />

Template syntax{#snippet ...}Passing snippets to componentsExplicit props

Within the template, snippets are values just like any other. As such, they can be passed to components as props:  <script>

Template syntax{#snippet ...}Passing snippets to componentsImplicit props

As an authoring convenience, snippets declared directly inside a component implicitly become props on the component:  <scri

MiscSvelte 5 migration guideComponents are no longer classesServer API changes

Similarly, components no longer have a render method when compiled for server-side rendering. Instead, pass the function to render from svelte/server:

MiscSvelte 5 migration guideBreaking changes in runes modeAttribute/prop syntax is stricter

In Svelte 4, complex attribute values needn't be quoted: <Component prop=this{is}valid />This is a footgun. In runes mode, if you want to concatenate

Template syntax{#snippet ...}Passing snippets to componentsImplicit `children` snippet

Any content inside the component tags that is not a snippet declaration implicitly becomes part of the children snippet:  <

RuntimeStoressvelte/storewritable

Function that creates a store which has values that can be set from 'outside' components. It gets created as an object with additional set and update