Demos

Explore interactive examples showcasing various HTMX and Datastar techniques.

Interactive Demos

Explore these interactive examples to see HTMX and Datastar in action. Each demo includes a video walkthrough and working code examples.

Our most comprehensive examples with full video tutorials and complete implementations.

Advanced HTMX patterns for complex UI interactions with inline editing and data relationships.

HTMX Video

A live dashboard demo with multiple widgets and out-of-band updates using HTMX.

HTMX Video

Signal-based reactivity and state management with interactive components and real-time updates.

Datastar Video

Demonstrates hx-swap-oob for out-of-band updates in a live dashboard context.

HTMX Video

Form validation and interactive patterns using HTMX.

Example	Attributes
HTMX Form Validation Server-side validation with HTMX for real-time feedback and error handling. HTMX Video	hx-post hx-trigger hx-target hx-swap
Htmx Structure Advanced HTMX patterns for complex UI interactions with inline editing and data relationships. HTMX Video	hx-get hx-trigger hx-target hx-swap
Htmx Dashboard A live dashboard demo with multiple widgets and out-of-band updates using HTMX. HTMX Video	hx-get hx-swap-oob hx-trigger
hx-swap-oob Demonstrates `hx-swap-oob` for out-of-band updates in a live dashboard context. HTMX Video	hx-get hx-swap-oob hx-trigger

Real-time data streaming and reactive UI updates using Datastar.

Example	Attributes
Datastar Signals Signal-based reactivity and state management with interactive components and real-time updates. Datastar Video	datastar signals
Datastar Validation Real-time form validation using Datastar signals with server-side validation and dynamic error updates. Datastar Validation	data-bind-* data-on-* signals

More demos are in development. Follow our progress on YouTube for new releases.

We're working on more interactive examples including advanced HTMX patterns, more Datastar integrations, and comprehensive tutorials.