live_svelte

• ⚡ End-To-End Reactivity with Phoenix LiveView, enabling seamless communication between Svelte components and the server via websockets.
• 🔋 Server-Side Rendered (SSR) Svelte for improved initial load performance (requires Node.js v19+).
• 🪄 Sigil Support (~V) as an alternative LiveView DSL for writing Svelte directly in Elixir templates.
• ⭐ Svelte Preprocessing support via svelte-preprocess (fa-solid fa-up-right-from-square).
• 🦄 Tailwind CSS integration.
• 💀 Dead View (static) support.
• 🤏 live_json integration for efficient JSON diffing.
• 🦥 Slot Interoperability between LiveView and Svelte.

Key Features

• Hybrid approach where Svelte handles client-side state/UI while LiveView manages server synchronization.
• Supports both SSR (default) and client-side-only rendering.
• Includes a Components macro for JSX-like component usage in LiveView.

Target Audience

• Developers who want to combine Phoenix LiveView's real-time capabilities with Svelte's client-side reactivity.
• Teams needing complex local state management alongside server synchronization.
• Projects that benefit from Svelte's animations, scoped CSS, or developer experience.

Svelte Integration

• Components live in assets/svelte/ directory
• Supports Svelte 5 (with backward compatibility for Svelte 4)
• Props are passed reactively between LiveView and Svelte
• Full LiveView JS interoperability (events, uploads, etc.)

Resources

• HexDocs (fa-solid fa-up-right-from-square)
• Demo Video (fa-solid fa-up-right-from-square)
• Example Projects (fa-solid fa-up-right-from-square)

Notable Use Cases

• When you need complex local state management
• To leverage Svelte's animation capabilities
• For projects requiring scoped CSS
• When preferring Svelte's developer experience