skills.rest
hwatkins
hwatkinsCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/hwatkins/my-skills --skill liveview-js-interop
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
cheezycheezy
5

phoenix-framework

Guides Phoenix web interface development including LiveView workflows and routing.

Community
Intermediate
qytay-paloqytay-palo

interactive-dashboard-builder

Build self-contained interactive HTML dashboards with Chart.js and client-side filters.

Community
Advanced
hwatkinshwatkins

svelte-core

Embed Svelte 5 components in Phoenix LiveView with reactive props and SSR.

Community
Advanced
code0100funcode0100fun
1

liveview-guidelines

Standardizes Phoenix LiveView development for streaming, JavaScript interop, testing, and form handling.

Community
Intermediate