liveview-js-interop

Enable JavaScript interoperability for Phoenix LiveView with phx-hooks and JS commands.

Updated Feb 16, 2026

Search Tags:#javascript #hooks #phoenix #liveview #server-push #colocated-hooks #patch-survival

Ready to run

npx skills add https://github.com/hwatkins/my-skills --skill liveview-js-interop

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: liveview-js-interop
Source: https://github.com/hwatkins/my-skills/tree/main/skills/liveview-js-interop
Command: npx skills add https://github.com/hwatkins/my-skills --skill liveview-js-interop

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides structured guidance and patterns for adding JavaScript interoperability to Phoenix LiveView apps, enabling safe, patch-resilient client-side behavior.

Core Features & Use Cases

phx-click and JS commands that patch-safely manipulate DOM
Colocated hooks (LV 1.1+) for component-scoped JS without external files
Traditional hooks for reusable logic and third-party libraries
LiveSvelte boundary for complex interactive UIs
Practical server→client messaging and debounced/pushEvent workflows
Guidance on phx-update ignore and patch-survival patterns

Quick Start

Add a simple LiveView hook to your component and push an event to the server on interaction.

Frequently Asked Questions about liveview-js-interop

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I use JavaScript hooks in Phoenix LiveView without losing state on DOM patches?▼

To use JavaScript hooks in Phoenix LiveView without losing state on DOM patches, apply patch-survival patterns and phx-update ignore to manage DOM mutations safely during server-driven view updates.

What is the best way to scope JavaScript to a specific Phoenix LiveView component?▼

The best way to scope JavaScript to a specific Phoenix LiveView component is using colocated hooks, available in LiveView 1.1+, which allow component-scoped JS without external files.

How do I send events from the server to the client in Phoenix LiveView?▼

To send events from the server to the client in Phoenix LiveView, use server-to-client messaging workflows that push events to JavaScript hooks for responsive UI updates.

Can I integrate third-party JavaScript libraries with Phoenix LiveView hooks?▼

Yes, you can integrate third-party JavaScript libraries with Phoenix LiveView by using traditional hooks to wrap reusable logic and manage the library's lifecycle across page updates.

Why does my JavaScript hook break when LiveView re-renders the page?▼

JavaScript hooks break during LiveView re-renders because standard DOM manipulation fails during server patches, requiring patch-aware DOM mutations and robust lifecycle management to survive.