use: Directive Syntax
Apply a Svelte action to a DOM element using the use: directive.
use: Directive Syntax is a free Sveltejs Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Actions in Svelte
An action is a function that runs when an element is mounted. It is invoked with the use: directive.
Basic Action
An action receives the DOM node as its argument.
function highlight(node) {
node.style.background = "yellow";
}Apply with use:
Attach the action to any element via use:action.
<p use:highlight>I am highlighted</p>Why Actions
Actions encapsulate imperative DOM behavior (focus, intersection, drag, etc.) for reuse.
No Markup Required
Actions do not render anything; they augment existing elements.
Multiple Actions
You can apply multiple actions to one element with multiple use: directives.
<div use:trap use:scroll>Shipping in Libraries
Many Svelte libraries expose their behavior as actions for ergonomic integration.
Imports
Actions are plain functions; import them like any module.
import { clickOutside } from "$lib/actions";Type Hints
Type actions with the Action<Element, Params> generic from svelte/action.
Lifecycle Awareness
Actions run after mount, so the node exists in the DOM when they execute.
Simple to Powerful
Actions can be as small as a one-liner or as rich as a library wrapper.
Quick Check
How do you attach an action?
Recap
Actions are functions invoked via use:. They receive the DOM node and add imperative behavior.
Frequently asked questions
Is the “use: Directive Syntax” lesson free?
Yes — the full text of “use: Directive Syntax” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.
What will I learn in “use: Directive Syntax”?
Apply a Svelte action to a DOM element using the use: directive. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Sveltejs Academy?
No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “use: Directive Syntax” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Sveltejs Academy lesson?
Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.