Prop For That: The JavaScript Library Bringing Live Data to CSS Custom Properties
If you've spent any meaningful time in the front-end development world over the past few years, you've likely encountered the name Adam Argyle more than once. The Chrome Developer Relations engineer has a well-earned reputation for pushing the boundaries of what CSS can do natively, and his work consistently makes the lives of developers easier, more expressive, and frankly more fun. His earlier project, Open Props, gave the community a generous suite of preconfigured CSS custom properties covering everything from color palettes and shadows to typography and sizing scales. It was the kind of tool that made you wonder how you'd managed without it. Now, Argyle is back with something that takes the concept further in a genuinely surprising direction: a library called Prop For That.
What Is Prop For That?
Prop For That is a JavaScript library designed to expose live, real-time browser data directly as CSS custom properties. On the surface, that might sound like a small quality-of-life improvement, but the implications are significant for anyone who has wrestled with the traditional workflow of JavaScript sniffing browser state and manually piping that data into CSS variables.
Think about the kinds of things CSS simply cannot see on its own: where the user's cursor is sitting on the screen, how fast the page is being scrolled, the current time, progress values tied to user interactions, or the state of certain form elements beyond what basic pseudo-classes can detect. Historically, capturing and using any of this data in CSS meant writing custom JavaScript, listening to events, updating variables on the fly, and managing that logic across your codebase. It works, but it's boilerplate that every project ends up reinventing.
Prop For That handles all of that scripting in the background. Developers simply import the library, declare the desired behavior using data attributes directly in their HTML, and then immediately have access to fully reactive CSS custom properties in their stylesheets. The JavaScript is already written. The wiring is already done. You just show up and style.
How Does It Compare to Doing It Manually?
For context, tracking cursor position in CSS the traditional way isn't exactly rocket science, but it does require deliberate effort. You register custom properties, add event listeners in JavaScript, and update those properties dynamically as the mouse moves. CSS Tricks documented this approach with a CodePen demonstration that shows exactly how this works — and while the approach is totally valid and understandable, it's the kind of code you have to write, maintain, and remember to include in every project where you need it.
Prop For That abstracts that entire layer away. When you want to track pointer position, for example, you apply a specific data attribute to an element in your HTML. The library detects that attribute and activates the corresponding script behind the scenes. Your CSS then has immediate access to the live values without you having to write or manage any of the underlying logic yourself.
What Kinds of Live Data Can Prop For That Expose?
The library covers a genuinely impressive range of browser states and interactions that CSS has traditionally been blind to. Among the capabilities currently available or in development are the following:
- Cursor and pointer position — Track where the user's mouse or touch input is located relative to an element or the viewport, enabling hover-reactive visual effects, spotlight animations, parallax-style movements, and more — all driven purely through CSS once the prop is live.
- Scroll velocity — Detect not just that a user is scrolling, but how fast they're doing it. This opens up possibilities for momentum-based animations and scroll-speed-aware transitions that feel deeply physical and responsive.
- Progress values — Whether tied to scroll depth, media playback, or other measured interactions, exposing progress as a CSS variable allows for clean, declarative progress-driven styling without complex JavaScript callbacks.
- Current time — Having the actual clock time available as a CSS custom property enables time-aware visual design: light and dark shifts based on the hour of day, countdown-style animations, or anything else you might imagine tying to real-world time.
- Form states — Certain form conditions that go beyond what CSS pseudo-classes like
:focus,:checked, or:validcan natively detect become accessible as props, giving designers and developers far finer control over form-driven UI behavior.
Why This Matters for Modern CSS Development
The broader significance of Prop For That isn't just convenience, though it is certainly that. It represents a meaningful philosophical shift in how we think about the boundary between JavaScript and CSS. For years, the accepted wisdom has been that JavaScript handles behavior and dynamic state, while CSS handles presentation. That boundary has been blurring for some time, especially as CSS has grown more powerful with features like custom properties, @property, calc(), scroll-driven animations, and container queries.
Prop For That leans into that blurring deliberately. By making JavaScript's awareness of browser state seamlessly available inside CSS, it empowers developers to write richer, more dynamic stylesheets without sacrificing separation of concerns. The JavaScript still exists — it's just hidden behind a clean, declarative HTML interface, leaving CSS to do what it does best.
Getting Started with Prop For That
The setup process is intentionally minimal. Import the Prop For That library into your project, add the relevant data attributes to whatever HTML elements need the live properties, and begin using those properties in your CSS exactly as you would use any other custom property. There's no elaborate configuration, no framework requirement, and no steep learning curve. If you're comfortable with CSS custom properties at all, the transition to using Prop For That feels natural almost immediately.
For developers who already use Open Props as a foundational layer in their projects, Prop For That slots in as a natural companion — one handles the static, design-token side of custom properties, while the other handles the live, reactive side. Together, they paint a picture of where Adam Argyle sees CSS tooling heading: toward a world where CSS is increasingly capable of expressing dynamic, state-aware design with less and less JavaScript ceremony required to make it happen.
Final Thoughts
Prop For That is the kind of library that solves a problem you might not have known you were tired of solving. Bridging the gap between JavaScript's runtime awareness and CSS's declarative power has always required manual effort and repetitive boilerplate. With Prop For That, that work disappears into a well-designed abstraction, leaving developers free to focus on what they actually want to build. It's early days for the project, but the concept is compelling, the implementation is clean, and if Adam Argyle's track record is anything to go by, the community is going to find some remarkable uses for live CSS custom properties in the months and years ahead.