Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
This page is a working reference a curated jump-off point to the worklet libraries, specs, and tools worth knowing about, rather than another explainer. If you’re new to the topic, start with what CSS Houdini is, the full technical guide, or how to build your first worklet instead; this page assumes you already know the basics and want the links.
Open-Source Worklet Collections
| Resource | What It Offers | Link Type |
|---|---|---|
| CSSHoudini/paintlets | A gallery of downloadable, tweakable paint worklets maintained under the official CSSHoudini GitHub organization | GitHub repo |
| liyangguang/css-houdini | A small, practical set of ready-to-use worklets (tooltips, shapes) with copy-paste usage instructions | GitHub repo |
| 5t3ph/11ty-css-houdini | An Eleventy starter environment for building and publishing your own worklets to npm/unpkg | GitHub template |
| mcconville/houdini-experiments | Experimental Paint API demos, including animated effects achieved by combining a worklet with an external animation loop | GitHub repo |
Polyfills
| Resource | What It Offers |
|---|---|
| GoogleChromeLabs/css-paint-polyfill | Brings Paint Worklet support to Firefox and Safari, using -moz-element() and -webkit-canvas() for near-native performance where available, falling back to Canvas toDataURL()/toBlob() elsewhere |
This is currently the most practical way to get a paint worklet effect working across all major browsers rather than Chromium only.
Official Specs & Documentation
- MDN — CSS Painting API: the canonical reference for the Paint API, including a full worked example
- MDN — Houdini APIs overview: a summary of every API under the Houdini umbrella and its current support status
- W3C CSS Houdini Task Force spec drafts: the source specifications, useful if you need to check exact behavior the community docs don’t cover
- Caniuse — CSS Paint API: live, up-to-date browser support data
Tools
- Paint worklet generators: visual tools that let you choose a preset effect (noise, confetti, checkerboard, waves) and export the worklet JS and CSS without hand-writing the canvas drawing code — useful for prototyping before you commit to a custom implementation
- Chrome DevTools Styles pane: lets you live-override the custom properties feeding a worklet, which is the fastest way to test a worklet’s range without editing and reloading files
Distribution Pattern: Publishing Your Own Worklet
If you build a worklet you want to reuse across projects or share publicly, the common pattern in the community is: publish it as an npm package, then load it via a CDN like unpkg. This sidesteps the HTTPS requirement for local testing and makes the worklet easy to drop into a CodePen demo or another project with a single addModule() call pointing at the CDN URL. For the registration and debugging steps themselves, see how to register and debug a worklet.
Community
- CSSHoudini GitHub organization: hosts the paintlets gallery along with translated/localized resource repos for non-English-speaking developers
- GitHub topic pages (
css-houdini,houdini-css-paint): a live, constantly-updating feed of new experiments, portfolio demos, and starter templates tagged by the community
I am Muhammad Ali the founder and lead voice behind Techgory, a platform born out of a deep fascination with everyday technology and digital tools. Instead of relying on dense, confusing jargon, I focus on heavy research, hands-on testing, and breaking down complex tech into simple, actionable steps that anyone can understand.
