--- title: Imperative 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 components in a Svelte 5 application. ## Creating a component ```ts // @noErrors const component = new Component(options); ``` A client-side component — that is, a component compiled with `generate: 'dom'` (or the `generate` option left unspecified) is a JavaScript class. ```ts // @noErrors import App from './App.svelte'; const app = new App({ target: document.body, props: { // assuming App.svelte contains something like // `export let answer`: answer: 42 } }); ``` The following initialisation options can be provided: | option | default | description | | --------- | ----------- | ---------------------------------------------------------------------------------------------------- | | `target` | **none** | An `HTMLElement` or `ShadowRoot` to render to. This option is required | | `anchor` | `null` | A child of `target` to render the component immediately before | | `props` | `{}` | An object of properties to supply to the component | | `context` | `new Map()` | A `Map` of root-level context key-value pairs to supply to the component | | `hydrate` | `false` | See below | | `intro` | `false` | If `true`, will play transitions on initial render, rather than waiting for subsequent state changes | Existing children of `target` are left where they are. The `hydrate` option instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. It will only work if the component was compiled with the [`hydratable: true` option](/docs/svelte-compiler#compile). Hydration of `` elements only works properly if the server-side rendering code was also compiled with `hydratable: true`, which adds a marker to each element in the `` so that the component knows which elements it's responsible for removing during hydration. Whereas children of `target` are normally left alone, `hydrate: true` will cause any children to be removed. For that reason, the `anchor` option cannot be used alongside `hydrate: true`. The existing DOM doesn't need to match the component — Svelte will 'repair' the DOM as it goes. ```ts /// file: index.js // @noErrors import App from './App.svelte'; const app = new App({ target: document.querySelector('#server-rendered-html'), hydrate: true }); ``` > [!NOTE] > In Svelte 5+, use [`mount`](svelte#mount) instead ## `$set` ```ts // @noErrors component.$set(props); ``` Programmatically sets props on an instance. `component.$set({ x: 1 })` is equivalent to `x = 1` inside the component's `