What is Houdini?
Learn about CSS Houdini projects.
What does CSS Houdini do?
CSS Houdini is a set of specifications that open the CSS engine to JavaScript. Its core building block is the worklet: a small JavaScript module that runs at one stage of the render pipeline. It runs off the main thread, so it never touches the DOM directly.
The main APIs are Paint API, Layout API, Properties & Values API and Typed OM. Each hooks into a different stage of the render path.
Intro to the Paint API
The Paint API lets you use a drawing defined inside a worklet as a background. The worklet is registered with registerPaint('name', class); on the CSS side you just write background: paint(name).
So instead of a gradient or an image you use your own drawing. The worklet declares which CSS variables it reads through inputProperties, so the drawing can react to them.
Exercise Write the grid pattern CSS for the logo
Complete the CSS below. In .logo add --cell-size: 16px and background: paint(grid).
Show example solution
/* grid pattern for logo */
.logo {
--cell-size: 16px;
background: paint(grid);
}Test yourself
-
Where does a worklet run?
/* where does a worklet run? */- Only inside a service worker
- At a stage of the render pipeline, off the main thread
- Once when the page closes
- On every click in the DOM
Show answer
At a stage of the render pipeline, off the main thread — Correct. A worklet runs at a stage of the render pipeline, off the main thread.
-
Write the background using paint()
.badge { background: paint(____); }Show answer
.badge { background: paint(checker); } -
Match each Houdini API to its purpose
- Paint API
- Custom background drawing
- Layout API
- Custom layout box
- Properties & Values API
- Variable registration and type
- Typed OM
- Type-safe value objects