Loading SvelteCosmos...
“Svelte template syntax provides dedicated logic blocks for conditional branches ({#if}), list iteration ({#each}), and asynchronous promise resolution ({#await}).”
Declarative template control structures that mount, diff, and unmount DOM nodes.
<script>
let todos = $state([
{ id: 1, text: 'Master Svelte', done: true },
{ id: 2, text: 'Build SvelteKit App', done: false }
]);
</script>
{#each todos as todo (todo.id)}
<div class:done={todo.done}>
{todo.text}
</div>
{:else}
<p>No todos left!</p>
{/each}Modify the state variable below to watch the signal update the output without VDOM diffing:
Keyed each blocks use an index map to reorder existing DOM elements with minimal DOM moves.