Svelte Template Directives
@attach (Svelte 5.29+)
The reactive alternative to use: actions. Re-runs when dependencies
change, passes through components via spread, supports cleanup functions.
<script>
import ImageZoom from 'js-image-zoom';
function useZoom(options) {
return (element) => {
new ImageZoom(element, options);
return () => console.log('cleanup');
};
}
</script>
Quick Reference
| Directive |
Purpose |
Reactive? |
{@attach} |
DOM manipulation, 3rd-party |
Yes |
{@html} |
Render raw HTML strings |
Yes |
{@render} |
Render snippets |
Yes |
{@const} |
Local constants in blocks |
N/A |
{@debug} |
Pause debugger on value change |
N/A |
{#each (key)} |
Keyed iteration (always key!) |
Yes |
<svelte:window> |
Window event listeners |
N/A |
@attach vs use: Actions
| Feature |
use: |
@attach |
| Re-runs on arg change |
No |
Yes |
| Composable |
Limited |
Fully |
| Pass through props |
Manual |
Auto via spread |
| Convert legacy |
N/A |
fromAction() |
Reference Files
Notes
@attach requires Svelte 5.29+- Use
fromAction from svelte/attachments to convert legacy actions
- Attachments pass through wrapper components when you spread props
- Always use keyed each blocks — never use index as key
- Use
<svelte:window>/<svelte:document> for global events, not $effect
- Last verified: 2026-03-12
