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

Next lesson: Paint API

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies