{"id":29354403,"url":"https://github.com/googlechromelabs/css-paint-polyfill","last_synced_at":"2025-07-09T03:14:39.526Z","repository":{"id":33788910,"uuid":"134004514","full_name":"GoogleChromeLabs/css-paint-polyfill","owner":"GoogleChromeLabs","description":"CSS Custom Paint / Paint Worklet polyfill with special browser optimizations.","archived":false,"fork":false,"pushed_at":"2023-09-08T18:19:04.000Z","size":218,"stargazers_count":749,"open_issues_count":20,"forks_count":21,"subscribers_count":19,"default_branch":"main","last_synced_at":"2025-07-07T04:13:55.389Z","etag":null,"topics":["css","css-paint-api","houdini","polyfill"],"latest_commit_sha":null,"homepage":"https://googlechromelabs.github.io/css-paint-polyfill/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GoogleChromeLabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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}},"created_at":"2018-05-18T21:09:42.000Z","updated_at":"2025-07-03T22:17:41.000Z","dependencies_parsed_at":"2024-02-04T16:20:54.233Z","dependency_job_id":"4f104f94-1704-4f2f-8f15-cdf85c6c8035","html_url":"https://github.com/GoogleChromeLabs/css-paint-polyfill","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/GoogleChromeLabs/css-paint-polyfill","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fcss-paint-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fcss-paint-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fcss-paint-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fcss-paint-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GoogleChromeLabs","download_url":"https://codeload.github.com/GoogleChromeLabs/css-paint-polyfill/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fcss-paint-polyfill/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264384459,"owners_count":23599619,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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","css-paint-api","houdini","polyfill"],"created_at":"2025-07-09T03:14:38.896Z","updated_at":"2025-07-09T03:14:39.510Z","avatar_url":"https://github.com/GoogleChromeLabs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://googlechromelabs.github.io/css-paint-polyfill/\"\u003e\u003cimg src=\"https://i.imgur.com/xqSHmd2.gif\" width=\"400\" alt=\"CSS Paint Polyfill demo\"\u003e\u003c/a\u003e\n\n  \u003ch1 align=\"center\"\u003e\n    CSS Custom Paint / Paint Worklets polyfill\n    \u003ca href=\"https://www.npmjs.org/package/css-paint-polyfill\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/css-paint-polyfill.svg?style=flat\" alt=\"npm\"\u003e\u003c/a\u003e\n  \u003c/h1\u003e\n\u003c/p\u003e\n\nA polyfill that brings Houdini's [CSS Custom Paint API] and Paint Worklets to all modern browsers (Edge, Firefox, Safari and Chrome).\n\nPerformance is particularly good in Firefox and Safari, where this polyfill leverages `-webkit-canvas()` and `-moz-element()` for optimized rendering. For other browsers, framerate is governed by Canvas `toDataURL()` / `toBlob()` speed.\n\nAs of version 3, this polyfill also includes basic implementations of `CSS.supports()`, `CSS.registerProperty()` and CSS unit functions (`CSS.px()` etc), which are injected in browsers without native support.\n\n## What are Paint Worklets?\n\nPaint Worklets are JavaScript modules in which you can program custom graphics code. Once registered, they can be applied to elements using CSS:\n\n\u003ctable\u003e\u003ctbody\u003e\u003ctr valign=\"top\"\u003e\u003ctd\u003e\n\nAn example `box.js` worklet:\n\n```js\nregisterPaint('box', class {\n  paint(ctx, geom, properties) {\n    ctx.fillRect(0, 0, geom.width, geom.height)\n  }\n})\n```\n\n\u003c/td\u003e\u003ctd\u003e\n\n... registered and applied on a page:\n\n```js\nCSS.paintWorklet.addModule('./box.js')\n\nvar el = document.querySelector('h1')\nel.style.background = 'paint(box)'\n```\n\n\u003c/td\u003e\u003c/tr\u003e\u003c/tbody\u003e\u003c/table\u003e\n\nFor a more complete example, see the [demo](https://github.com/GoogleChromeLabs/css-paint-polyfill/tree/master/demo).\n\n---\n\n## Installation \u0026 Usage\n\n```html\n\u003cscript src=\"css-paint-polyfill.js\"\u003e\u003c/script\u003e\n\u003c!-- or: --\u003e\n\u003cscript src=\"https://unpkg.com/css-paint-polyfill\"\u003e\u003c/script\u003e\n```\n\nOr with a bundler:\n\n```js\nimport 'css-paint-polyfill';\n```\n\n... or with ES Modules on the web:\n\n```js\nimport 'https://unpkg.com/css-paint-polyfill';\n```\n\n---\n\n## Contributing\n\nSee [CONTRIBUTING.md](https://github.com/GoogleChromeLabs/css-paint-polyfill/blob/master/CONTRIBUTING.md).\n\nTo hack on the polyfill locally:\n\n```sh\ngit clone git@github.com:GoogleChromeLabs/css-paint-polyfill.git\ncd css-paint-polyfill\nnpm i\nnpm start\n# open http://localhost:5000\n```\n\n---\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.imgur.com/Nat1PNX.png\" width=\"300\" height=\"300\" alt=\"css-paint-polyfill\"\u003e\n\u003c/p\u003e\n\n[CSS Custom Paint API]: https://developers.google.com/web/updates/2018/01/paintapi\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglechromelabs%2Fcss-paint-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgooglechromelabs%2Fcss-paint-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglechromelabs%2Fcss-paint-polyfill/lists"}