LiveView JavaScript Interoperability

Expert guidance for integrating JavaScript with Phoenix LiveView — from zero-JS declarative commands to full third-party library integration.

Decision Framework: When to Use What

Pick the simplest tool that solves the problem. Escalate only when needed.

1. phx- bindings + JS commands  → No JS file needed. Declarative, patch-safe.
2. JS.dispatch + addEventListener → Custom client events without hooks.
3. Colocated hooks (LV 1.1+)    → Small JS tied to a specific component.
4. Traditional phx-hook          → Reusable hooks shared across views.
5. LiveSvelte component          → Complex reactive UI (editors, charts, drag-and-drop).