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("modal_id")      # from data-data-modal-id
    user_id = data.get("user_id")        # from data-data-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