--- 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 · 254 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: ## 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 · 231 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 --- 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-06-16T18:57:21.394Z","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":254},{"@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}}]} ```