Starting the preview…
Counter
A number controlled entirely through CSS state and events.
experimentalstate():on()increment()decrement()content
CSS in action.
One example, one capability, one visible result. Every preview runs the real runtime; open an example for its full source and notes.
state()needs the runtimecalc()native CSS
API examples
One capability, one visible result.Starting the preview…
Starting the preview…
Form mirror
Type in the field and the preview follows; the Clear button resets both.
experimentalstate()bind():on()event()content
Starting the preview…
Starting the preview…
Starting the preview…
Starting the preview…
Starting the preview…
Starting the preview…
Live values
A value that changes on its own, every two seconds. Not a clock: the API has no wall-clock time.
live()random()
Starting the preview…
Starting the preview…
Starting the preview…
Starting the preview…
State history
A score that remembers its last value and which way it moved.
previous()direction():changed()
Starting the preview…
Starting the preview…
Context menu
Right-click anywhere on the desk to open a custom menu where you clicked.
experimental:on()prevent()event()focus:
Interfaces
Complete components that combine several APIs.Starting the preview…
Tabs
Tabs selected by click or arrow keys, with the ARIA tab pattern written from one state.
experimentalstate():on()cycle():nth-var()--attr-*focus:
Starting the preview…
Accordion
Each item opens and closes on its own, and its button reports the state with aria-expanded.
experimentalstate()toggle()--attr-*when()
Starting the preview…
Dropdown menu
A menu that opens on click and closes on Escape, on a choice or on a click anywhere else.
experimentalstate()outside():on()attr()--attr-*focus:
Starting the preview…
Theme switcher
One keyword state cycles through three themes, and the page colors and the button label follow it.
experimentalstate()cycle():when()content
Starting the preview…
Signup form
A text field, a select and a checkbox feed a live preview, and Reset clears both.
experimentalstate():on()event()content:when()
Starting the preview…
Step wizard
Three steps with Back and Next buttons, a step list you can click, and aria-current on the current step.
experimentalstate():on()set():nth-var()--attr-*
Starting the preview…
Task list
Native checkboxes whose label fades when done, with a short animation when a task is checked or unchecked.
state()event():just-checkedwhen()
Starting the preview…
Pricing toggle
A billing switch changes the price and shows the annual saving, with role="switch" kept in sync.
experimentalstate()toggle()--attr-*when()content
Advanced
Larger examples you can inspect.Control Center
A real settings form. Native radios, a checkbox and a text field are bound to four states that drive a live preview, while saving stays with the browser and the server.
state():on()event()when():when()
Control Center · Deep Dive
The full version, with density, digest frequency, avatar shape and a focus goal that remembers its history.
set()toggle()cycle()increment()previous()direction():changed()
Test lab
Validation cases and 0.8 compatibility.Focus transitions
Three panels switched by buttons, Previous/Next and a native popover menu. Focus follows user-initiated panel changes to the new panel's heading (or to Confirm on panel 3); a hidden section is revealed and focused in one action; a locked (disabled) Confirm and the open popover deliberately keep focus where it is.
0.8 syntaxset()increment()decrement()toggle()
Keyboard navigation
A listbox-like list on a deliberately tall page. Arrow keys, Home and End move the selection and focus (roving tabindex) and are cancelled with prevent(), so the page does not scroll; a lock makes the list's key rule inactive, and the keys scroll the page again. A nested region inside one item has its own keys, and a filter field in the same section keeps its native keys.
0.8 syntaxkey()prevent():when()cycle()
Attribute playground
State controls on one side, targets with derived attributes on the other, and a live table that shows the real DOM attribute values (read with CSS :has() selectors, no script).
0.8 syntaxattr:bind:on::when()
Nested state and cascade
Three nested boxes, each owning --n. Buttons change the nearest owner (or an explicit owner with closest()); a paragraph without its own state reads the nearest owner's value. Labels, chips and markers show which declaration the cascade chose: specificity, a :when() condition, @layer order and !important.
0.8 syntaxtext:attr::when()
Form interactions
An order form: a bound name with live text, pickup or shipping (the address field appears and becomes required for shipping), a quantity with native min/max validity, a terms checkbox that enables submit, native :valid/:invalid/:user-invalid styling and native reset. method="dialog": nothing is sent or stored.
0.8 syntaxbind:text:attr::when()
History and motion
A level from 0 to 20 with Up, Down, +5 and Reset. The previous value and the direction of the last change are shown as text; the bar width transitions natively; the value pulses (or dips) on every change via :changed(). Reduced motion turns both off.
0.8 syntaxincrement()decrement()set()previous()
Product configurator
Two product cards. Each has a quantity (1–10, buttons and a number field), a color (radio group), gift wrapping (checkbox), a live total (real DOM text, 0.5.1) and a native reset. It is a local UI: no checkout, no network requests, nothing stored.
0.8 syntaxbind:increment()decrement()attr:
Multi-step wizard
Four steps (Introduction, Preferences, Configuration, Review) plus a completion panel, with Back, Next and Finish, a step indicator, a progress bar and a "Step N of 4" status. Two independent instances. Nothing is submitted.
0.8 syntaxfocus:attr:increment()decrement()
Interactive quiz
Three questions with three options each. The first answer counts. After answering, the quiz shows whether it was right, marks the correct option, shows an explanation and enables Next. At the end it shows the score and a message, and "Try again" starts a fresh session. Question data and the answer key are static HTML (class="correct").
0.8 syntaxfocus:attr::when():nth-var()
Live form preview
A profile form (display name, role, accent, email notifications) and a preview card that follows every change immediately. Native reset restores everything. There is no backend: the Save button is disabled, so neither the button nor Enter submits, and nothing is stored (the test checks storage and cookies).
0.8 syntaxbind::when()attr:text:
Score history
Two independent scoreboards. Each shows the current score, the previous score, the last change (signed), the direction (up or down) and a short visual bump or dip on every change. +1, −1 and Reset.
0.8 syntaxincrement()decrement()set()previous()
Accessible tabs
Two independent tab sets. Each tab reports a real aria-selected, inactive panels are hidden, one tab is disabled in the HTML, and the "Billing" tab is disabled until a checkbox in the first panel is checked.
0.8 syntax:nth-var()prevent()key()focus:
Accessible toggle button
A pressed-state toggle button and a disclosure button. Their aria-pressed and aria-expanded attributes are real DOM attributes, kept in sync with Reactive CSS state.
0.8 syntaxstate()bind()on:click()
Settings panel
A notifications section whose channel options are disabled while notifications are off, a theme and text-size preview, an "Advanced settings" disclosure, and a native reset. Nothing is saved.
0.8 syntaxbind:attr:toggle()set()
Shopping cart
Three cart lines with − / + / Remove, a subtotal per line, the item count and total, an "empty cart" message, and Checkout and "Empty cart" buttons that are disabled while the cart is empty. Local only: Checkout does nothing.
0.8 syntaxincrement()decrement()set()attr:
Notification center
A collapsible list of three sample notifications. Each can be marked read (a toggle with aria-pressed) or dismissed. "Undo dismiss" restores the last dismissed one, "Dismiss all" clears the list, and the unread count updates as real text.
0.8 syntaxtoggle()set():when()attr:
Form validation
A sign-up form using native constraint validation: required fields, type="email", minlength. A company field appears and becomes required only for business accounts. Submit is disabled until the terms are accepted, and error messages appear after the first submit attempt. Nothing is sent.
0.8 syntaxbind:attr:set():when()
Keyboard playground
A focusable pad moved with the arrow keys (Escape centers it), focus tracking with focusin/focusout, nested regions that show how one key press reaches several handlers, and a Reset button that is disabled while there is nothing to reset.
0.8 syntaxfocusin()focusout()prevent()attr: