Connection & Recovery

Connection status indicators, form recovery, and copy-to-clipboard enhancements.

Interactions Flash Reactive Navigation Connection

Connection Status

.dj-connected .dj-disconnected

djust adds CSS classes to <body> based on WebSocket state. Style your UI to react to connection changes — no JavaScript needed.

Connected

Disconnected — reconnecting...

Try it: Open DevTools → Network → toggle "Offline" to see the status change. Form data below will be recovered when you reconnect.

css

.dj-connected .status-connected { display: flex; }
.dj-connected .status-disconnected { display: none; }
.dj-disconnected .status-connected { display: none; }
.dj-disconnected .status-disconnected { display: flex; }

Form Recovery

Auto-recover

Fill in the form, go offline, then reconnect. djust automatically restores form field values after WebSocket reconnection.

Name

Message

Copy to Clipboard

dj-copy

Enhanced dj-copy with selector-based copy, feedback text, and CSS class feedback.

Install Command

pip install djust>=0.4.0rc2

Code Snippet

python

from djust import LiveView
from djust.decorators import event_handler

class MyView(LiveView):
    template_name = "myapp/template.html"

    @event_handler()
    def greet(self, name: str = "", **kwargs):
        self.message = f"Hello, {name}!"

html

<button dj-copy="#install-cmd"
        dj-copy-feedback-text="Copied!"
        dj-copy-feedback-class="copy-success">
    Copy
</button>