Prop For That · June 13, 2026

Announcing Prop For That, a JS library that backfills what CSS doesn't provide us yet (and maybe never will).

I'm done waiting for CSS to catch up to all the valuable information JS knows and done watching folks write the same little JS to just write a custom property to a component.

demo · docs · npm

Here's a basic example taking the value from a range slider to draw a nice gradient that fills up the slider:

import 'prop-for-that/auto'
// or import 'https://esm.sh/prop-for-that/auto'

<input type="range" data-props-for="range" min="0" max="100" value="40" />

input[type="range"] {
  background: linear-gradient(
    to right in oklab,
    var(--theme) calc(var(--live-value-pct) * 100%),
    var(--track) 0
  );
}

codepen · docs example · codepen collection

Why? #

It's super common to need a few lines of JS for a simple thing like:

the value of the color input
the mouse pointer position
the size of the scrollbar
the colors present in an image or video
the battery level
an element's visibility
etc

With Prop For That, you just declaratively specify on any element the props you want, and live props show up.

There's an imperitive API too, but the data attribute path is the slickest

Everything is a plugin that loads only if you need it too, ultimately putting you right where you wanted to be: creating something sick in CSS using dynamic information without wiring up some dorky JS.

What kind of props? #

My talk at CSS Day was an enumeration of all the ways CSS can adapt to users, contexts, pages, etc… which made me hyper aware of all the ways CSS couldn't adapt without JS.

Here's a flat list of all the live props currently supported by the library:

Pointer x/y in the window
Pointer x/y inside/local to an element
Viewport pixel height/width values
Visual viewport information
Element size information
Element visibility
Scrollbar and thin scrollbar sizes
Input element values
Input element dirty, touched, pristine, etc
Select element value, index, count, etc
Colors from an image or gradient (average, accent, light, dark, etc)
Colors occuring in a video
Video progress
Image loaded or broken + natural h/w
Clock time
FPS
Online/offline status
Page focused/visible
Scroll velocity
Accelerometer and device tilt/orientation
Geolocation
DPR, CPU cores, memory
Page navigation type (reload, back, etc)

And a few Chromium only props:

Network status like type, speed, save data, etc
Battery status
CPU pressure

Style Queries #

Style Queries being in all major browsers marks an important milestone for CSS, and made this library much more viable.

Using Prop For That with Style Queries looks like this:

import 'https://esm.sh/prop-for-that/auto'

<form data-props-for="form-state">
  <input name="name" required>
  <input name="email" type="email" required>
  <button type="submit">Save</button>
</form>

@container style(--live-all-valid: 1) {
  …
}

Bye noise #

Import, add attribute(s), have CSS fun.

Go make cool shit and share it with me 🤘🏻💀