--- title: Prop For That | daily.dev description: Prop For That is a new library by Adam Argyle that bridges the gap between JavaScript and CSS by exposing live CSS custom properties for things CSS can't... canonical: https://daily.dev/posts/prop-for-that-gziymtefi twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Prop For That | daily.dev og:description: Prop For That is a new library by Adam Argyle that bridges the gap between JavaScript and CSS by exposing live CSS custom properties for things CSS can't... og:url: https://daily.dev/posts/prop-for-that-gziymtefi og:image: https://api.daily.dev/og/posts/GzIYMTEfi.png og:image:alt: Prop For That og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Prop For That **[CSS-Tricks](https://daily.dev/sources/css_tricks)** · 2 min read · 252 upvotes · 24 comments ## Summary Prop For That is a new library by Adam Argyle that bridges the gap between JavaScript and CSS by exposing live CSS custom properties for things CSS can't normally access — like cursor position, scroll velocity, form states, and current time. Developers add data attributes to HTML elements to activate the underlying scripts, then use the resulting CSS variables directly in their stylesheets without writing any JavaScript themselves. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I get the cursor position into CSS as a custom property without writing my own JavaScript? A library called Prop For That handles this by injecting live values into CSS custom properties automatically. Add a data attribute such as data-props-for="pointer" to an element, then reference variables like --live-pointer-x and --live-pointer-y in your CSS, for example left: calc(var(--live-pointer-x, 0) * 1px). No manual event listeners or JavaScript wiring are required beyond importing the library. _daily.dev surfaces libraries like this for developers wiring dynamic browser state into CSS._ ### What kinds of browser state can Prop For That expose to CSS besides cursor position? Prop For That exposes multiple runtime values that CSS normally cannot see, including scroll velocity, progress values, certain form states, and the current time, in addition to cursor position. Each is delivered as a live custom property triggered by a data attribute, so CSS can react to script-driven state directly in stylesheets without custom JavaScript event handling. _track new CSS and browser-state tooling like this on daily.dev when picking libraries for dynamic UI effects._ ## Community discussion Top comments from developers on daily.dev. **@seyoungcho** · 23 upvotes > True frontend artisan knows how to craft css, not js **@borderbabe2412** · 6 upvotes > this graphic is beautiful! **@brunodebrito** · 3 upvotes >  **@mdshafinahmed** · 3 upvotes > Good things, thank you for sharing. **@lauramoss** · 1 upvotes > Love this reminder that not every UI pattern needs JavaScript ## Similar posts on daily.dev - [Prop For That · June 13, 2026](https://daily.dev/posts/prop-for-that-june-13-2026-4rbbkqokd) · Adam Argyle · 228 upvotes · 18 comments - [Kevin Powell Trying Out Prop For That · August 5, 2026](https://daily.dev/posts/kevin-powell-trying-out-prop-for-that-august-5-2026-rnvobmsxh) · Adam Argyle · 4 upvotes · 0 comments - [Controlling when CSS custom properties are computed](https://daily.dev/posts/controlling-when-css-custom-properties-are-computed-2lphvvmeh) · Jake Archibald · 26 upvotes · 3 comments - [Wanna see a CSS magic trick?](https://daily.dev/posts/wanna-see-a-css-magic-trick--wta2tfzuo) · Stack Overflow Blog · 76 upvotes · 4 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#css](https://daily.dev/tags/css), [#web-components](https://daily.dev/tags/web-components) [View this post on daily.dev](https://daily.dev/posts/prop-for-that-gziymtefi) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Prop For That","url":"https://daily.dev/posts/prop-for-that-gziymtefi","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/prop-for-that-gziymtefi"},"datePublished":"2026-06-16T18:39:52.371Z","dateModified":"2026-09-14T08:10:54.126Z","description":"Prop For That is a new library by Adam Argyle that bridges the gap between JavaScript and CSS by exposing live CSS custom properties for things CSS can't...","image":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/prop-for-that-masthead.png","thumbnailUrl":"https://i0.wp.com/css-tricks.com/wp-content/uploads/2026/06/prop-for-that-masthead.png","isAccessibleForFree":true,"articleSection":"CSS-Tricks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"CSS-Tricks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/css_tricks","url":"https://daily.dev/sources/css_tricks"},"commentCount":24,"discussionUrl":"https://daily.dev/posts/prop-for-that-gziymtefi","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":252},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":24}],"keywords":"javascript,css,web-components","timeRequired":"PT2M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"CSS-Tricks","item":"https://daily.dev/sources/css_tricks"},{"@type":"ListItem","position":3,"name":"Prop For That"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/prop-for-that-gziymtefi","comment":[{"@type":"Comment","text":"True frontend artisan knows how to craft css, not js","datePublished":"2026-06-17T00:57:15.148Z","url":"https://daily.dev/posts/GzIYMTEfi#c-s2xPYIl1K","author":{"@type":"Person","name":"SeyoungCho","url":"https://daily.dev/seyoungcho","image":"https://media.daily.dev/image/upload/s---QniJFEK--/f_auto/v1724901542/avatars/avatar_O3ucZSadxc0iLADSOH3rX"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":23}},{"@type":"Comment","text":"this graphic is beautiful!","datePublished":"2026-06-17T01:17:55.222Z","url":"https://daily.dev/posts/GzIYMTEfi#c-uaJDXBkfG","author":{"@type":"Person","name":"tayler freund","url":"https://daily.dev/borderbabe2412","image":"https://lh3.googleusercontent.com/a/AAcHTtec3ubtN2G-Ydx9ha0JaOD_n9qMXsD1_wZdqDGOaX6Pvw=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":6}},{"@type":"Comment","text":"","datePublished":"2026-06-17T02:05:36.243Z","url":"https://daily.dev/posts/GzIYMTEfi#c-caxnCTYW2","author":{"@type":"Person","name":"Bruno de Brito","url":"https://daily.dev/brunodebrito","image":"https://avatars.githubusercontent.com/u/3311001?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"Good things, thank you for sharing.","datePublished":"2026-06-17T09:33:39.849Z","url":"https://daily.dev/posts/GzIYMTEfi#c-eboUE44kz","author":{"@type":"Person","name":"Md. Shafin Ahmed","url":"https://daily.dev/mdshafinahmed","image":"https://media.daily.dev/image/upload/s---a0uwu1i--/f_auto/v1783046504/avatars/avatar_u8iR8DacSYjsphyDqQTQ9?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"Love this reminder that not every UI pattern needs JavaScript","datePublished":"2026-06-17T07:25:40.380Z","url":"https://daily.dev/posts/GzIYMTEfi#c-cejT3uhF2","author":{"@type":"Person","name":"Laura Moss","url":"https://daily.dev/lauramoss","image":"https://media.daily.dev/image/upload/s--ILA7G36z--/f_auto/v1780041334/avatars/avatar_4TSk50CCsSpOp4p8ftPwn?_a=BAMAMiWQ0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/prop-for-that-gziymtefi#faq","mainEntity":[{"@type":"Question","name":"How do I get the cursor position into CSS as a custom property without writing my own JavaScript?","acceptedAnswer":{"@type":"Answer","text":"A library called Prop For That handles this by injecting live values into CSS custom properties automatically. Add a data attribute such as data-props-for=\"pointer\" to an element, then reference variables like --live-pointer-x and --live-pointer-y in your CSS, for example left: calc(var(--live-pointer-x, 0) * 1px). No manual event listeners or JavaScript wiring are required beyond importing the library. daily.dev surfaces libraries like this for developers wiring dynamic browser state into CSS."}},{"@type":"Question","name":"What kinds of browser state can Prop For That expose to CSS besides cursor position?","acceptedAnswer":{"@type":"Answer","text":"Prop For That exposes multiple runtime values that CSS normally cannot see, including scroll velocity, progress values, certain form states, and the current time, in addition to cursor position. Each is delivered as a live custom property triggered by a data attribute, so CSS can react to script-driven state directly in stylesheets without custom JavaScript event handling. track new CSS and browser-state tooling like this on daily.dev when picking libraries for dynamic UI effects."}}]} ```