<script>...</script> | JavaScript logic |
<script lang="ts">...</script> | TypeScript support |
<style>...</style> | Scoped CSS |
<style global>...</style> | Global CSS |
{expression} | Text interpolation |
{@html rawHtml} | Raw HTML |
{@debug variable} | Debug output |
let count = 0; | Reactive variable |
$: doubled = count * 2; | Reactive declaration |
$: { console.log(count); } | Reactive statement |
$: if (count > 10) { ... } | Reactive conditional |
count = count + 1; | Trigger update |
arr = [...arr, item]; | Array update |
obj = { ...obj, key: value }; | Object update |
{#if condition}...{/if} | If block |
{:else if condition} | Else if |
{:else} | Else |
{#each items as item}...{/each} | Each loop |
{#each items as item, i} | With index |
{#each items as item (item.id)} | Keyed each |
{:else} | Empty list fallback |
{#await promise}...{/await} | Await block |
{#await promise}Loading...{:then data} | With loading |
{:catch error} | Error handling |
{#await promise then data} | Short syntax |
bind:value={variable} | Input binding |
bind:checked={bool} | Checkbox binding |
bind:group={selected} | Radio/checkbox group |
bind:this={element} | Element reference |
bind:clientWidth={w} | Dimension binding |
bind:innerHTML={html} | Inner HTML binding |
on:click={handler} | Click event |
on:click={() => count++} | Inline handler |
on:click|preventDefault | Prevent default |
on:click|stopPropagation | Stop propagation |
on:click|once | Run once |
on:click|capture | Capture phase |
on:keydown|self | Only on element |
use:action | Use action |
use:action={params} | With parameters |
export function action(node) { } | Define action |
return { destroy() {} } | Cleanup function |
return { update(params) {} } | Update function |
export let prop; | Declare prop |
export let prop = defaultValue; | With default |
<Child {prop} /> | Pass prop (shorthand) |
<Child prop={value} /> | Pass prop |
<Child {...obj} /> | Spread props |
$$props | All props |
$$restProps | Rest props |
import { createEventDispatcher } from "svelte" | Event dispatcher |
const dispatch = createEventDispatcher(); | Create dispatcher |
dispatch("eventName", data); | Dispatch event |
<slot /> | Default slot |
<slot name="header" /> | Named slot |
<slot {data} /> | Slot props |
<div slot="header"> | Use named slot |
let:data | Receive slot props |
import { setContext, getContext } from "svelte" | Context API |
setContext("key", value); | Set context |
const value = getContext("key"); | Get context |
import { writable } from "svelte/store" | Writable store |
const store = writable(initialValue); | Create writable |
import { readable } from "svelte/store" | Readable store |
const store = readable(initial, start); | Create readable |
import { derived } from "svelte/store" | Derived store |
const derived = derived(store, $s => ...) | Create derived |
$store | Auto-subscribe (in component) |
store.subscribe(value => ...) | Manual subscribe |
store.set(value) | Set value |
store.update(n => n + 1) | Update value |
$store = value | Set with $ |
import { onMount } from "svelte" | Mount hook |
onMount(() => { return cleanup; }) | With cleanup |
import { onDestroy } from "svelte" | Destroy hook |
import { beforeUpdate, afterUpdate } from "svelte" | Update hooks |
import { tick } from "svelte" | Await DOM update |
import { fade, fly, slide } from "svelte/transition" | Built-in transitions |
transition:fade | Fade transition |
transition:fly={{ y: 200 }} | Fly with params |
in:fade out:fly | Different in/out |
transition:fade|local | Local transition |
import { tweened, spring } from "svelte/motion" | Motion stores |
src/routes/+page.svelte | Page component |
src/routes/+layout.svelte | Layout component |
src/routes/+page.ts | Page load function |
src/routes/+page.server.ts | Server load |
src/routes/[slug]/+page.svelte | Dynamic route |
src/routes/api/+server.ts | API endpoint |
export const load = async () => {} | Load function |
export let data; | Receive load data |
({ params, fetch }) => | Load params |
export const actions = { default: async () => {} } | Form actions |
import { error, redirect } from "@sveltejs/kit" | Error/redirect |