--- title: Prop For That · June 13, 2026 | daily.dev description: Prop For That is a new JS library that bridges the gap between JavaScript's runtime knowledge and CSS by exposing live CSS custom properties declaratively.... canonical: https://daily.dev/posts/prop-for-that-june-13-2026-4rbbkqokd twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Prop For That · June 13, 2026 | daily.dev og:description: Prop For That is a new JS library that bridges the gap between JavaScript's runtime knowledge and CSS by exposing live CSS custom properties declaratively.... og:url: https://daily.dev/posts/prop-for-that-june-13-2026-4rbbkqokd og:image: https://api.daily.dev/og/posts/4RBBkqOKd.png og:image:alt: Prop For That · June 13, 2026 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 · June 13, 2026 **[Adam Argyle](https://daily.dev/sources/nerdydev)** · 3 min read · 228 upvotes · 18 comments ## Summary Prop For That is a new JS library that bridges the gap between JavaScript's runtime knowledge and CSS by exposing live CSS custom properties declaratively. Instead of writing boilerplate JS to pass values like pointer position, input values, viewport size, scrollbar dimensions, battery level, or image colors into CSS, developers add a data attribute to any element and the library handles the rest. It's plugin-based so only needed features are loaded. The library also pairs well with CSS Style Queries, now supported in all major browsers, enabling powerful dynamic styling without manual JS wiring. ## 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. **@khevlar** · 15 upvotes > Every abstraction looks great in a demo. My questions are about performance, debugging, and edge cases. If something goes wrong, can I easily trace where a CSS variable is coming from? **@theacademe** · 7 upvotes > This is pure genius. I also played around with it on mobile with good results. This will definitely increase the capability of CSS-only solutions for many things that JavaScript has to deal with today. **@petecapecod** · 4 upvotes > And here's Adam with more sweet CSS magic for us 🪄 how much of this js have I written over the years to get and adjust these props. Answer: LOTS!! > > This is awesome and a time/code saver! > > Thanks **@andrewma** · 3 upvotes > Great tool for simpler CSS! **@starfallcodes** · 1 upvotes > YIPPIESSSS! ## Similar posts on daily.dev - [Prop For That](https://daily.dev/posts/prop-for-that-gziymtefi) · CSS-Tricks · 252 upvotes · 24 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) [View this post on daily.dev](https://daily.dev/posts/prop-for-that-june-13-2026-4rbbkqokd) ```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 · June 13, 2026","url":"https://daily.dev/posts/prop-for-that-june-13-2026-4rbbkqokd","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/prop-for-that-june-13-2026-4rbbkqokd"},"datePublished":"2026-06-13T23:01:33.626Z","dateModified":"2026-06-13T23:01:58.576Z","description":"Prop For That is a new JS library that bridges the gap between JavaScript's runtime knowledge and CSS by exposing live CSS custom properties declaratively....","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a3f5747f387b15e92dc0343b18e7acbb?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/a3f5747f387b15e92dc0343b18e7acbb?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Adam Argyle","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":"Adam Argyle","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/80a9109f59234cfbaf0480333e876653","url":"https://daily.dev/sources/nerdydev"},"commentCount":18,"discussionUrl":"https://daily.dev/posts/prop-for-that-june-13-2026-4rbbkqokd","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":228},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":18}],"keywords":"javascript,css","timeRequired":"PT3M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Adam Argyle","item":"https://daily.dev/sources/nerdydev"},{"@type":"ListItem","position":3,"name":"Prop For That · June 13, 2026"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/prop-for-that-june-13-2026-4rbbkqokd","comment":[{"@type":"Comment","text":"Every abstraction looks great in a demo. My questions are about performance, debugging, and edge cases. If something goes wrong, can I easily trace where a CSS variable is coming from?","datePublished":"2026-06-14T07:46:17.108Z","url":"https://daily.dev/posts/4RBBkqOKd#c-SV1YyswFi","author":{"@type":"Person","name":"Lesley Edinam","url":"https://daily.dev/khevlar","image":"https://media.daily.dev/image/upload/s--I4QFMNNF--/f_auto/v1753089440/avatars/avatar_xMSmIuOOXE5TqCI1OLs4c?_a=BAMClqZW0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":15}},{"@type":"Comment","text":"This is pure genius. I also played around with it on mobile with good results. This will definitely increase the capability of CSS-only solutions for many things that JavaScript has to deal with today.","datePublished":"2026-06-14T06:04:24.482Z","dateModified":"2026-06-14T06:06:53.388Z","url":"https://daily.dev/posts/4RBBkqOKd#c-bOTVtb4P5","author":{"@type":"Person","name":"theacademe","url":"https://daily.dev/theacademe","image":"https://media.daily.dev/image/upload/s--C29_q-xW--/f_auto/v1756852849/avatars/avatar_wNAjl1VBaVx2CCjbkkb5h?_a=BAMClqZW0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":7}},{"@type":"Comment","text":"And here’s Adam with more sweet CSS magic for us 🪄 how much of this js have I written over the years to get and adjust these props. Answer: LOTS!!\nThis is awesome and a time/code saver!\nThanks","datePublished":"2026-06-14T13:01:20.649Z","url":"https://daily.dev/posts/4RBBkqOKd#c-ArAE5AtiE","author":{"@type":"Person","name":"Peter Cruckshank","url":"https://daily.dev/petecapecod","image":"https://media.daily.dev/image/upload/s--ZJhQyKws--/f_auto/v1721235024/avatars/avatar_A9xh33q0QoxtkGoJRCosp"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"Great tool for simpler CSS!","datePublished":"2026-06-14T18:10:39.313Z","url":"https://daily.dev/posts/4RBBkqOKd#c-KwxdBFUxg","author":{"@type":"Person","name":"Andrew M","url":"https://daily.dev/andrewma","image":"https://avatars.githubusercontent.com/u/102819214?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"YIPPIESSSS!","datePublished":"2026-06-15T04:47:25.402Z","url":"https://daily.dev/posts/4RBBkqOKd#c-9FDZV5Mx2","author":{"@type":"Person","name":"Starfall :D","url":"https://daily.dev/starfallcodes","image":"https://media.daily.dev/image/upload/s--4xoTqFbk--/f_auto/v1786806197/avatars/avatar_ecPDW57nUVRidLxwsxruz?_a=BAMAMicg0"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":1}}]} ```