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
Form POST
Submit a form and update the page
Out-of-Band Swaps
Update multiple elements from one response
Toast Notifications
Show success, error, and custom toasts
Event Chains
Event Chains
Configure cascading updates with events
Event Timing
Understanding before-request vs after-request
Forms & Validation
Form Validation
Server-side validation with inline errors
Modal Forms
Edit forms in modal dialogs
Multi-Component
Multi-Component
Tabs + Search + Pagination + Grid
Search with Debounce
Real-time search with input debouncing
Infinite Scroll
Load more content as user scrolls