Imports

As well as runes, Svelte 5 introduces a handful of new things you can import, alongside existing ones like getContext, setContext and tick.

sveltepermalink

mountpermalink

Instantiates a component and mounts it to the given target:

ts
import { mount } from 'svelte';
import App from './App.svelte';

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

hydratepermalink

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

ts
import { hydrate } from 'svelte';
import App from './App.svelte';

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

unmountpermalink

Unmounts a component created with mount or hydrate:

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

const app = mount(App, {...});

// later
unmount(app);

untrackpermalink

To prevent something from being treated as an $effect/$derived dependency, use untrack:

<script>
	import { untrack } from 'svelte';

	let { a, b } = $props();

	$effect(() => {
		// this will run when `a` changes,
		// but not when `b` changes
		console.log(a);
		console.log(untrack(() => b));
	});
</script>

svelte/reactivitypermalink

Svelte provides reactive Map, Set, Date and URL classes. These can be imported from svelte/reactivity and used just like their native counterparts. Demo:

<script>
	import { URL } from 'svelte/reactivity';

	const url = new URL('https://example.com/path');
</script>

<!-- changes to these... -->
<input bind:value={url.protocol} />
<input bind:value={url.hostname} />
<input bind:value={url.pathname} />

<hr />

<!-- will update `href` and vice versa -->
<input bind:value={url.href} />

svelte/serverpermalink

renderpermalink

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

ts
import { render } from 'svelte/server';
import App from './App.svelte';

const result = render(App, {
	props: { some: 'property' }
});