{"id":51398021,"url":"https://github.com/argyleink/prop-for-that","last_synced_at":"2026-07-22T19:00:46.824Z","repository":{"id":364599852,"uuid":"1253887608","full_name":"argyleink/prop-for-that","owner":"argyleink","description":"what JS knows, now CSS knows","archived":false,"fork":false,"pushed_at":"2026-06-24T18:26:14.000Z","size":897,"stargazers_count":513,"open_issues_count":1,"forks_count":6,"subscribers_count":4,"default_branch":"main","last_synced_at":"2026-06-24T20:06:46.656Z","etag":null,"topics":["css","custom-properties","javascript"],"latest_commit_sha":null,"homepage":"https://prop-for-that.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/argyleink.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-29T23:09:45.000Z","updated_at":"2026-06-24T19:05:26.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/argyleink/prop-for-that","commit_stats":null,"previous_names":["argyleink/prop-for-that"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/argyleink/prop-for-that","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/argyleink%2Fprop-for-that","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/argyleink%2Fprop-for-that/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/argyleink%2Fprop-for-that/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/argyleink%2Fprop-for-that/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/argyleink","download_url":"https://codeload.github.com/argyleink/prop-for-that/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/argyleink%2Fprop-for-that/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35773465,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-07-20T02:08:10.276Z","status":"online","status_checked_at":"2026-07-22T02:00:06.236Z","response_time":124,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","custom-properties","javascript"],"created_at":"2026-07-04T04:00:32.009Z","updated_at":"2026-07-22T19:00:46.810Z","avatar_url":"https://github.com/argyleink.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n# prop-for-that\n\n**Expose what JavaScript knows but CSS can't see — as live CSS custom properties.**\n\n[![npm version](https://img.shields.io/npm/v/prop-for-that?logo=npm\u0026color=cb3837)](https://www.npmjs.com/package/prop-for-that)\n[![minzipped size](https://img.shields.io/bundlephobia/minzip/prop-for-that?color=22aa77)](https://bundlephobia.com/package/prop-for-that)\n![zero dependencies](https://img.shields.io/badge/dependencies-0-22aa77)\n![license MIT](https://img.shields.io/badge/license-MIT-blue)\n\n[**Docs**](https://prop-for-that.netlify.app/docsite/) · [**Demos**](https://prop-for-that.netlify.app/) · [**Changelog**](./CHANGELOG.md) · [**llms.txt**](https://prop-for-that.netlify.app/llms.txt)\n\n\u003c/div\u003e\n\n---\n\nSliders, pointer position, element visibility, viewport size, battery, network, sensors — JavaScript can read all of it; CSS can't. **prop-for-that** writes that runtime state into `--live-*` and `--const-*` custom properties — batched and diffed down to one `setProperty` per frame — so your CSS can compose and react to it with plain `calc()` and `var()`.\n\nZero dependencies. TypeScript. ESM + CJS. SSR-safe.\n\n```bash\nnpm i prop-for-that\n```\n\n## Quick start\n\n```html\n\u003cscript type=\"module\"\u003eimport 'prop-for-that/auto'\u003c/script\u003e\n\n\u003cinput type=\"range\" data-props-for=\"range\" /\u003e\n```\n\n```css\n/* the slider paints itself from its own value — no event listeners, no render loop */\ninput {\n  background: hsl(calc(var(--live-value-pct) * 120) 80% 50%);\n}\n```\n\nBind any element with `data-props-for=\"key …\"` and read its `--live-*` properties in CSS. That's the whole idea.\n\n## Why\n\n- **CSS does the work.** No per-element event handlers or render loops — bind once, compose in stylesheets.\n- **Fast by design.** One `requestAnimationFrame` flush per frame — idle when nothing changes, frozen while the tab is hidden — plus write-on-change diffing and a single shared `ResizeObserver` / `IntersectionObserver` for the whole page. Continuously-sampling element sources pause while their element is off screen; event-driven ones (form fields, ranges, selects) run ungated.\n- **Ship only what you use.** Four lightweight core sources are built in; everything else is an opt-in, tree-shakeable plugin — and under `auto` each plugin loads on demand, the moment a `data-props-for` attribute asks for it.\n- **Plays with the platform.** Opt into typed [`@property`](https://prop-for-that.netlify.app/docsite/concepts/typed-properties/) values for interpolation, or FOUC-safe constants written before first paint.\n- **Tiny and dependency-free**, in every bundle format.\n\n## What it can read\n\n**Core** (built in): viewport, element size, visibility, and `\u003cinput type=\"range\"\u003e` values.\n\n**Plugins** (opt-in): pointer position, battery, network, online status, page focus \u0026 visibility, navigation type, page meta tags, low-entropy user-agent (OS / browser / engine / version / mobile), FPS, clock, scroll velocity, device orientation / motion, geolocation, CPU pressure, soft-keyboard geometry, media playback, form \u0026 field state, select \u0026 color-picker values, text-truncation (ellipsis) detection, and dominant + accent colors extracted from images and video — 20+ in all.\n\n→ Every source, every property, and live demos are in the **[docs](https://prop-for-that.netlify.app/docsite/reference/plugins/)**.\n\n## Entry points\n\n| Import | What it does |\n| --- | --- |\n| `prop-for-that/auto` | Zero-config \u0026 declarative: binds every `data-props-for` element — globals included, via `\u003chtml data-props-for=\"…\"\u003e` — loading plugin sources on demand, kept in sync with the DOM. Use as `\u003cscript type=\"module\"\u003e`. |\n| `prop-for-that` | Imperative API — `propsFor()`, `register()`, `configure()` — for explicit control and teardown. |\n| `prop-for-that/head` | Synchronous, FOUC-safe constants (scrollbar width \u0026 overlay preference, DPR, core count, device memory, low-entropy user-agent) before first paint. |\n| `prop-for-that/plugins` | The opt-in plugin catalog. |\n\n\u003e `auto` sees the **light DOM only** (not shadow roots — bind those with `propsFor(el, …)`), and lazy-loads plugin chunks, so from a CDN use one that serves the `dist` files verbatim (unpkg / jsDelivr), not a rewriting CDN.\n\nFull API and concepts: **[prop-for-that.netlify.app/docsite](https://prop-for-that.netlify.app/docsite/)**.\n\n## For LLMs / AI tools\n\nA condensed, single-file reference — entry points, the full variable catalog, recipes, and gotchas — lives at **[llms.txt](./llms.txt)**, hosted at [prop-for-that.netlify.app/llms.txt](https://prop-for-that.netlify.app/llms.txt) and shipped in the npm package (`node_modules/prop-for-that/llms.txt`).\n\n## License\n\nMIT © [Adam Argyle](https://github.com/argyleink)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fargyleink%2Fprop-for-that","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fargyleink%2Fprop-for-that","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fargyleink%2Fprop-for-that/lists"}