🎨 HTMX Layers Extension Showcase

ℹ️ Note: This demo uses demo.htmx.org to simulate server responses based on the <template url="..."> elements defined at the end of the page. In production, these requests would go to a real server that can also return headers such as HX-Layer and HX-Retarget.

Usage Examples

Status: Ready to interact

Use Cases

1️⃣ Nested Layers

Opens a dialog inside another dialog

2️⃣ Current Mode

Updates content within the current layer

(Open a dialog above first, then use this button)

3️⃣ Step Wizard (hx-layer="step")

Each step replaces the previous one, which stays hidden (not destroyed). You can go back with hx-layer-back without losing the entered data, and at the end hx-layer="return" closes and clears the whole step chain.

4️⃣ Replace Dialog (hx-layer="replace")

Closes the current dialog (with no way back) and opens the response in a new one. Useful for finishing a confirmation or wizard and then showing an ongoing process.