svelte/documentation/docs/06-runtime/04-imperative-component-api.md

---
title: Imperative component API
---

<!-- better title needed?

- mount
- unmount
- render
- hydrate
- how they interact with each other -->

Every Svelte application starts by imperatively creating a root component. On the client this component is mounted to a specific element. On the server, you want to get back a string of HTML instead which you can render. The following functions help you achieve those tasks.

## `mount`

Instantiates a component and mounts it to the given target:

```js
// @errors: 2322
import { mount } from 'svelte';
import App from './App.svelte';

const app = mount(App, {
	target: document.querySelector('#app'),
	props: { some: 'property' }
});
```

You can mount multiple components per page, and you can also mount from within your application, for example when creating a tooltip component and attaching it to the hovered element.

Note that unlike calling `new App(...)` in Svelte 4, things like effects (including `onMount` callbacks, and action functions) will not run during `mount`. If you need to force pending effects to run (in the context of a test, for example) you can do so with `flushSync()`.

## `unmount`

Unmounts a component that was previously created with [`mount`](#mount) or [`hydrate`](#hydrate).

If `options.outro` is `true`, [transitions](transition) will play before the component is removed from the DOM:

```js
import { mount, unmount } from 'svelte';
import App from './App.svelte';

const app = mount(App, { target: document.body });

// later
unmount(app, { outro: true });
```

Returns a `Promise` that resolves after transitions have completed if `options.outro` is true, or immediately otherwise.

## `render`

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:

```js
// @errors: 2724 2305 2307
import { render } from 'svelte/server';
import App from './App.svelte';

const result = render(App, {
	props: { some: 'property' }
});
result.body; // HTML for somewhere in this <body> tag
result.head; // HTML for somewhere in this <head> tag
```

## `hydrate`

Like `mount`, but will reuse up any HTML rendered by Svelte's SSR output (from the [`render`](#render) function) inside the target and make it interactive:

```js
// @errors: 2322
import { hydrate } from 'svelte';
import App from './App.svelte';

const app = hydrate(App, {
	target: document.querySelector('#app'),
	props: { some: 'property' }
});
```

As with `mount`, effects will not run during `hydrate` — use `flushSync()` immediately afterwards if you need them to.

## `partial`

`partial` lets you create *partial components* — components composed of other components.
To best explain partial components, here's an example without them:
```svelte
<script>
	import Greeter from './greeter.svelte';
</script>
<Greeter greeting="Hello" name="world" />
<Greeter greeting="Hello" name="Earth" />
```
There's some clear repetition here; the `greeting` prop has the same value twice. Using `partial` we can make this much more concise:
```svelte
<script>
	import { partial } from 'svelte';
	import Greeter from './greeter.svelte';
	const Hello = partial(Greeter, { greeting: 'Hello' });
</script>
<Hello name="world" />
<Hello name="Earth" />
```
Snippets can be used with partial components easily:
```svelte
<script>
	import { partial } from 'svelte';
	import Paragraph from './paragraph.svelte';
	const Example = partial(Paragraph, { example });
</script>
{#snippet example()}
	According to all known laws
	of aviation,
	there is no way a bee
	should be able to fly.
	Its wings are too small to get
	its fat little body off the ground.
	The bee, of course, flies anyway
	because bees don't care
	what humans think is impossible.
{/snippet}
<Example />
<Example />
```