LiveSvelte — Svelte inside Phoenix LiveView

Expert guidance for building Svelte 5 components inside Phoenix LiveView using LiveSvelte for end-to-end reactivity.

Core Principles

• Svelte components live in assets/svelte/ — they receive props from LiveView over the websocket
• Server owns the state — push events to LiveView, let the server update assigns, props flow back reactively
• Don't duplicate state: if LiveView has it, pass it as a prop; use local Svelte state only for UI-only concerns
• Use Svelte 5 runes ($state, $derived, $effect) — not legacy $: reactive declarations
• Use TypeScript for type safety
• SSR is enabled by default — be aware of what runs on server vs client

LiveSvelte Usage

Basic Component