Welcome to SwapLab

Interactive pattern library for Swap.Htmx

SwapLab is a hands-on demo application that showcases all major Swap.Htmx patterns. Click on any pattern in the sidebar to see a working example, view the code, and copy it to your project.

Getting Started

1. Start Simple

Begin with Basic Swap to understand the fundamentals.

2. Learn Events

Move to Event Chains to see cascading updates. (Coming Soon)

3. Go Multi-Component

Try Multi-Component for real-world patterns. (Coming Soon)

All Patterns

Basics

Basic Swap

Simple GET request with partial update

hx-get hx-target

Form POST

Submit a form and update the page

hx-post form

Out-of-Band Swaps

Update multiple elements from one response

AlsoUpdate hx-swap-oob

Toast Notifications

Show success, error, and custom toasts

WithToast WithSuccessToast

Event Chains

Configure cascading updates with events

ISwapEventConfiguration Trigger

Event Timing

Understanding before-request vs after-request

hx-on timing

Forms & Validation

Form Validation

Server-side validation with inline errors

validation blur

Modal Forms

Edit forms in modal dialogs

modal dialog

Multi-Component

Tabs + Search + Pagination + Grid

coordination state

Search with Debounce

Real-time search with input debouncing

hx-trigger delay

Infinite Scroll

Load more content as user scrolls

hx-trigger revealed

State Management

Hidden Field State

Store state in hidden fields with hx-include

hx-include hidden

URL State

Sync state with URL for bookmarkable pages

hx-push-url query string

Data Attribute State

Store state in data-* attributes

data-* hx-vals