JS Commands (t-string API)

This example demonstrates the new t-string API for JS commands.

Import js from pyview and use it directly in your templates.

Show/Hide

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

Toggle

Toggle me!

Class Manipulation

Watch my classes change!

Dispatch (Custom Events)

Dispatch sends custom JavaScript events that you can listen to with window.addEventListener.

This example also shows command chaining - dispatching an event AND adding a class in one click.

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

Push (Server Events + Transitions)

Push sends events to your LiveView, similar to phx-click.

Chain it with other commands for optimistic UI updates!

Counter
0

Optimistic Delete Pattern

A common pattern: hide the element immediately (optimistic UI) while sending the delete event to the server.

Item to delete

Focus Management

Attribute Manipulation

Modal with Focus Management

Chains show/hide with push_focus / pop_focus to save and restore focus for accessibility.