Svelte Actions: Reusable DOM Logic

Svelte Actions let you run code when an element is mounted for direct DOM access. Use them to integrate third-party libraries or add custom events like swipe gestures.
Svelte Actions are reusable functions giving you direct access to a DOM element when it's mounted. Think of them as a lifecycle hook for a specific element, letting you attach imperative logic declaratively. They're ideal for integrating vanilla JS libraries or creating custom behaviors like tooltips and gestures. The common footgun is assuming the action function re-runs on parameter changes; it only runs once. All reactive logic and cleanup must live inside an `$effect` within the action.
Read the original → svelte.dev
- #svelte
- #dom
- #frontend
- #actions
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.