svelte-template-directives

Original：🇺🇸 English

Translated

Svelte template directives ({@attach}, {@html}, {@render}, {@const}, {@debug}). Use for DOM manipulation, third-party libs, tooltips, canvas, dynamic HTML. @attach replaces use: actions.

3installs

Sourcespences10/svelte-skills-kit

Added on2026-08-14

NPX Install

npx skill4agent add spences10/svelte-skills-kit svelte-template-directives

SKILL.md Content

View Translation Comparison →

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.

svelte

<script>
	import ImageZoom from 'js-image-zoom';

	function useZoom(options) {
		return (element) => {
			new ImageZoom(element, options);
			return () => console.log('cleanup');
		};
	}
</script>

<!-- Re-runs if options changes (use: wouldn't!) -->
<figure {@attach useZoom({ width: 400 })}>
	<img src="photo.jpg" alt="zoomable" />
</figure>

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

attach-patterns.md - Real-world @attach examples
other-directives.md - @html, @render, @const, @debug

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