Common hyperscript patterns. Click any title for the full example, code, and explanation.
No patterns match your search.
| Pattern | Description | Difficulty |
|---|---|---|
| Toggle a Class | Listen for an event, toggle a CSS class. The simplest hyperscript pattern. | beginner |
| Pattern | Description | Difficulty |
|---|---|---|
| Fade & Remove | Fade an element to zero opacity using transition, then remove it from the DOM. |
beginner |
Tabs with take |
A classic tab strip in one line per tab - take moves a class from siblings to the clicked element in a single statement. |
beginner |
| Pattern | Description | Difficulty |
|---|---|---|
| Modal Dialog | Open and close <dialog> elements, with click-outside dismissal and an unsaved-changes warning. |
intermediate |
| Click-Outside Dropdown | A dropdown menu built on a non-modal <dialog> that closes when you click anywhere outside it. |
beginner |
| Pattern | Description | Difficulty |
|---|---|---|
| Select All Checkbox | A header checkbox that selects all rows in a table, with an indeterminate state when only some are checked. | intermediate |
| Filter Elements by Search | Live-filter a list of elements as the user types, using the show ... when form. |
intermediate |
| CascadingFilterable Table | Three lines of add ... when filter rows, hide empty groups, and toggle a no-results state. |
intermediate |
| Reactive Tip Calculator | Two inputs and a derived total - change either field and the total recomputes via live, with no event wiring between them. |
beginner |
| Reactive Character Counter | A textarea, a counter, and a submit button - each declared with bind against one shared variable, no event wiring. |
beginner |
| Password Match Validation | Two password fields validated against each other as the user types - shown as a class first, then via setCustomValidity for real form validation. |
beginner |
| Dependent Field Range | Two date inputs whose min/max constraints are reactively bound to each other's value, so the picker greys out invalid days. |
beginner |
| Reactive Todo List | A todo list with add, done, remove, and search -- driven by a plain array of {text, done} objects and a live template. |
intermediate |
| Drag to Reorder | A draggable list using the HTML5 drag-and-drop API - one set of handlers on the parent <ul>, no per-item setup. |
intermediate |
| Pattern | Description | Difficulty |
|---|---|---|
| Select All Component | The select-all checkbox wrapped in a reusable <master-checkbox> component you can drop into any table. |
intermediate |
| Linked Scroll | A behavior that keeps two or more scrollable elements in lock-step, with a one-bit re-entry guard to break the echo loop. |
intermediate |
| Tab Set Component | The tabs pattern wrapped as a <tab-set> custom element with named slots - drop in tab buttons and panels and the component handles the rest. |
intermediate |