Frontend Integration | Django LiveView

The frontend is responsible for capturing events and sending messages over WebSocket. No logic, rendering, or state is in the frontend—the backend does all the work.

Django LiveView uses Stimulus to manage DOM events and avoid collisions. The JavaScript assets are bundled within the package.

Calling Handlers

To call a handler from a button click:

<button
    data-liveview-function="say_hello"
    data-action="click->page#run">
    Say Hello
</button>

data-liveview-function — The handler name registered with @liveview_handler
data-action — Stimulus action (event->controller#action)

Sending Form Data

All form fields are automatically extracted and sent in content["form"]:

<div>
    <input type="text" name="name" placeholder="Enter your name">
    <button
        data-liveview-function="say_hello"
        data-action="click->page#run">
        Submit
    </button>
</div>

Sending Custom Data

Use data-data-* attributes to send additional data:

<button
    data-liveview-function="open_modal"
    data-data-modal-id="123"
    data-data-user-id="456"
    data-action="click->page#run">
    Open Modal
</button>

Access in Python:

@liveview_handler("open_modal")
def open_modal(consumer, content):
    data = content.get("data", {})
    modal_id = data.get("modalId")      # from modal-id
    user_id = data.get("userId")        # from user-id

Stimulus Actions Reference

Available Stimulus actions:

data-action="click->page#run" — Execute LiveView function on click
data-action="input->page#run" — Execute on input change (real-time)
data-action="submit->page#run" — Execute on form submit
data-action="change->page#run" — Execute on change event
data-action="blur->page#run" — Execute when element loses focus
data-action="page#stop" — Stop event propagation