Getting Started
3 snippetsSvelte basics
Basic Component
<script>
let name = 'world';
</script>
<h1>Hello {name}!</h1>Reactive Declarations
<script>
let count = 0;
$: doubled = count * 2;
</script>
<p>Count: {count}</p>
<p>Doubled: {doubled}</p>Comments
<!-- HTML comment -->
<script>
// JavaScript comment
</script>Reactivity
4 snippetsReactive statements
Reactive Variable
<script>
let count = 0;
function increment() {
count += 1; // Triggers re-render
}
</script>
<button on:click={increment}>{count}</button>Reactive Statement
<script>
let count = 0;
$: doubled = count * 2;
$: console.log(`Count is ${count}`);
</script>Reactive Block
<script>
let count = 0;
$: {
console.log('Count changed');
console.log(`New value: ${count}`);
}
</script>Array Reactivity
<script>
let items = [1, 2, 3];
function addItem() {
items = [...items, items.length + 1];
}
</script>Props & Events
4 snippetsComponent communication
Define Props
<script>
export let name;
export let count = 0; // Default value
</script>
<p>Hello {name}!</p>
<p>Count: {count}</p>Use Component with Props
<script>
import Child from './Child.svelte';
</script>
<Child name="Alice" count={10} />Custom Events
<!-- Child.svelte -->
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
function handleClick() {
dispatch('message', { text: 'Hello' });
}
</script>
<button on:click={handleClick}>Send</button>Listen to Events
<script>
import Child from './Child.svelte';
function handleMessage(event) {
console.log(event.detail.text);
}
</script>
<Child on:message={handleMessage} />Tired of looking up syntax?
DocuWriter.ai generates documentation and explains code using AI.
Conditionals & Loops
6 snippetsTemplate logic
If Block
{#if user.loggedIn}
<p>Welcome back!</p>
{:else}
<p>Please log in</p>
{/if}Else If
{#if score >= 90}
<p>A</p>
{:else if score >= 80}
<p>B</p>
{:else}
<p>F</p>
{/if}Each Block
{#each items as item}
<p>{item.name}</p>
{/each}Each with Index
{#each items as item, i}
<p>{i + 1}: {item.name}</p>
{/each}Each with Key
{#each items as item (item.id)}
<p>{item.name}</p>
{/each}Each with Else
{#each items as item}
<p>{item.name}</p>
{:else}
<p>No items</p>
{/each}Bindings
4 snippetsTwo-way data binding
Input Binding
<script>
let name = '';
</script>
<input bind:value={name} />
<p>Hello {name}!</p>Checkbox Binding
<script>
let agreed = false;
</script>
<label>
<input type="checkbox" bind:checked={agreed} />
I agree
</label>Radio Binding
<script>
let selected = '';
</script>
<label><input type="radio" bind:group={selected} value="a" /> A</label>
<label><input type="radio" bind:group={selected} value="b" /> B</label>Select Binding
<script>
let selected = '';
</script>
<select bind:value={selected}>
<option value="a">Option A</option>
<option value="b">Option B</option>
</select>Lifecycle
4 snippetsComponent lifecycle hooks
onMount
<script>
import { onMount } from 'svelte';
onMount(() => {
console.log('Component mounted');
return () => {
console.log('Cleanup');
};
});
</script>onDestroy
<script>
import { onDestroy } from 'svelte';
onDestroy(() => {
console.log('Component destroyed');
});
</script>beforeUpdate
<script>
import { beforeUpdate } from 'svelte';
beforeUpdate(() => {
console.log('About to update');
});
</script>afterUpdate
<script>
import { afterUpdate } from 'svelte';
afterUpdate(() => {
console.log('Component updated');
});
</script>Stores
5 snippetsReactive state management
Writable Store
// stores.js
import { writable } from 'svelte/store';
export const count = writable(0);Use Store (Subscribe)
<script>
import { count } from './stores.js';
let value;
count.subscribe(v => value = v);
</script>
<p>Count: {value}</p>Use Store (Auto-subscribe)
<script>
import { count } from './stores.js';
</script>
<p>Count: {$count}</p>
<button on:click={() => $count++}>Increment</button>Readable Store
import { readable } from 'svelte/store';
export const time = readable(new Date(), set => {
const interval = setInterval(() => {
set(new Date());
}, 1000);
return () => clearInterval(interval);
});Derived Store
import { derived } from 'svelte/store';
import { count } from './stores.js';
export const doubled = derived(count, $count => $count * 2);Actions & Transitions
3 snippetsDOM interactions and animations
Actions
<script>
function tooltip(node, text) {
// Setup
return {
destroy() {
// Cleanup
}
};
}
</script>
<button use:tooltip="Hover text">Hover</button>Fade Transition
<script>
import { fade } from 'svelte/transition';
let visible = true;
</script>
{#if visible}
<p transition:fade>Fades in and out</p>
{/if}Slide Transition
<script>
import { slide } from 'svelte/transition';
</script>
{#if visible}
<div transition:slide>Slides in and out</div>
{/if}