Home

JS Commands

PyView JS commands support is a work in progress.

See the Phoenix LiveView JS docs for an idea of what's coming.

Show/Hide

JS Commands let you update the DOM without making a trip to the server.


Toggle

JS Commands let you update the DOM without making a trip to the server.

Add/Remove Class

JS Commands let you update the DOM without making a trip to the server.

Dispatch

Dispatch lets you send custom javascript events on the client, which you can listen to using window.addEventListener.

This example sends a "copy-to-clipboard" event when the button is clicked.

It also demonstrates how to chain multiple JS commands together - this example adds a class to the button when the copy-to-clipboard event is dispatched.

[["dispatch", {"to": "#copy-text", "event": "copy-to-clipboard"}]]

Push

Push lets you push a new event to your view, similar to phx-click.

This example increments a counter when the button is clicked.

This can be useful if you want to chain the push event with other JS commands, like a transition. This example uses the js.transition command to add a bounce animation to the counter when it is incremented.

Counter | 0

Focus

Focus lets you focus an element on the page.

The first button uses js.focus("#email") to focus the email input.

The second button uses js.focus_first("#focus-form") to focus the first input in the form.