Getting Started
tutorialAdd the library to a page, then build a like button that remembers whether it was clicked. You only need to know HTML and CSS.
On this page · 6 sections+−
- Time
- About 5 minutes
- You need
- A local web server and a browser
- You will use
state(),:on(),when()
1 Add the library
Load the script once, next to your stylesheet. There is no setup code, no attributes and no build step. Installation says where to get reactive-css.min.js.
<!doctype html><html lang="en"><head> <link rel="stylesheet" href="like.css"> <script src="reactive-css.min.js" defer></script></head><body> <button class="like" aria-pressed="false">♥ Like</button></body></html>Pages opened from file:// cannot fetch linked stylesheets, so nothing reacts. Run npx serve or python3 -m http.server in the folder, or use an inline <style>.
This tutorial uses the full bundle, which has every feature. Where to get it, npm and CDN status, and smaller bundles: Installation. Once your stylesheets are written, the bundle builder can generate a bundle with only the features they use.
2 Declare local state
Inside the button’s rule, declare a custom property with state(). Every element that matches the rule owns its own independent copy, starting at false.
.like { --liked: state(false);}Nothing visible happens yet. The state exists, but nothing changes it and nothing reads it.
3 Handle a click
Add an event rule. :on(click) says when it runs, and --liked: toggle() says what it does: flip the state.
.like { --liked: state(false);}.like:on(click) { --liked: toggle();}An :on() rule only changes states. Styles go in ordinary rules.
4 Apply a conditional value
when() picks one of two values from a condition. It works anywhere a normal value goes, and a native transition smooths the change.
.like { --liked: state(false); color: when(--liked, #f2542d, #57534e); transition: color 200ms;}.like:on(click) { --liked: toggle();}The preview runs the same button.
.like { --liked: state(false); --attr-aria-pressed: var(--liked); color: when(--liked, #f2542d, #57534e); transition: color 200ms;}.like:on(click) { --liked: toggle();}Clicking the button switches its color, and the chip after state(false) on line 2 changes between false and true. The lines involved light up in order: the click, the state, then the color.
5 Try changing it
Use the color and transition controls under the preview. The code updates to match. Then try these edits in your own file:
- Replace
--liked: toggle()with--liked: set(true)so the button can only be liked once. - Add
font-weight: when(--liked, 700, 400);to make the liked state bolder. - Add
.like:when(--liked) { border-style: dashed; }to style several properties at once.
This stylesheet only changes styles, so the button’s aria-pressed stays false and assistive technology never hears the state. Add bind(aria-pressed) to the state, and the attribute follows it:
.like { --liked: state(false, bind(aria-pressed)); color: when(--liked, #f2542d, #57534e); transition: color 200ms;}.like:on(click) { --liked: toggle();}The state also starts from the attribute in the HTML, so aria-pressed="true" starts the button liked. See DOM Integration.
What’s next
:when() and native if().