Svelte • Template syntax

use:

On this page

Typing

In Svelte 5.29 and newer, consider using attachments instead, as they are more flexible and composable.

Actions are functions that are called when an element is mounted. They are added with the use: directive, and will typically use an $effect so that they can reset any state when the element is unmounted:

<script lang="ts">
	import type { 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.Action } from 'svelte/action';

	const const myaction: Action<HTMLElement, undefined, Record<never, any>>myaction: 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.Action = (node: Node extends HTMLElementnode) => {
		// the node has been mounted in the DOM

		function $effect(fn: () => void | (() => void)): void
namespace $effectRuns 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.
@see{@link https://svelte.dev/docs/svelte/$effect Documentation}@paramfn The function to execute$function $effect(fn: () => void | (() => void)): void
namespace $effectRuns 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.
@see{@link https://svelte.dev/docs/svelte/$effect Documentation}@paramfn The function to executeeffect(() => {
			// setup goes here

			return () => {
				// teardown goes here
			};
		});
	};
</script>

<div use:const myaction: Action
<HTMLDivElement>(node: HTMLDivElement, parameter?: undefined) => void | ActionReturn<undefined, Record<never, any>>myaction>...</div>

<script>
	/** @type {import('svelte/action').Action} */
	function myaction(node) {
		// the node has been mounted in the DOM

		$effect(() => {
			// setup goes here

			return () => {
				// teardown goes here
			};
		});
	}
</script>

<div use:myaction>...</div>

An action can be called with an argument:

<script lang="ts">
	import type { Action } from 'svelte/action';

	const myaction: Action = (node,;=>  data) {
		// ...
	}
</script>

<div use:myaction={data}>...</div>

<script>
	/** @type {import('svelte/action').Action} */
	function myaction(node, data) {
		// ...
	}
</script>

<div use:myaction={data}>...</div>

The action is only called once (but not during server-side rendering) — it will not run again if the argument changes.

Legacy mode

Prior to the $effect rune, actions could return an object with update and destroy methods, where update would be called with the latest value of the argument if it changed. Using effects is preferred.

Typing

The Action interface receives three optional type arguments — a node type (which can be Element, if the action applies to everything), a parameter, and any custom event handlers created by the action:

<script lang="ts">
	import type { Action } from 'svelte/action';

	const gestures: Action<
		HTMLDivElement,
		undefined,
		{
			onswiperight: (e: CustomEvent) => void;
			onswipeleft: (e: CustomEvent) => void;
			// ...
		}
	> = (node) => {
		$effect(() => {
			// ...
			node.dispatchEvent(new CustomEvent('swipeleft'));

			// ...
			node.dispatchEvent(new CustomEvent('swiperight'));
		});
	};
</script>

<div
	use:gestures
	onswipeleft={next}
	onswiperight={prev}
>...</div>

<script>
	/**
	 * @type {import('svelte/action').Action<
	 * 	HTMLDivElement,
	 * 	undefined,
	 * 	{
	 * 		onswiperight: (e: CustomEvent) => void;
	 * 		onswipeleft: (e: CustomEvent) => void;
	 * 		// ...
	 * 	}
	 * >}
	 */
	function gestures(node) {
		$effect(() => {
			// ...
			node.dispatchEvent(new CustomEvent('swipeleft'));

			// ...
			node.dispatchEvent(new CustomEvent('swiperight'));
		});
	}
</script>

<div
	use:gestures
	onswipeleft={next}
	onswiperight={prev}
>...</div>