Houdini API

The Houdini API is a set of low-level CSS and JavaScript APIs that give developers more control over rendering and styling in the browser. It lets you access the browser's rendering engine to extend CSS and write custom behaviors for styling.

Paint API

• Allows you to write custom paint worklets that render graphics on an element.
• Use CSS.registerProperty() to define custom CSS properties.

Example: Custom Paint Worklet

CSS.paintWorklet.addModule('worklet.js');

worklet.js

class MyPaint {
  paint(ctx, size) {
    ctx.fillStyle = 'red';
    ctx.fillRect(0, 0, size.width, size.height);
  }
}
registerPaint('my-paint', MyPaint);

CSS Usage:

.box {
  background: paint(my-paint);
}

Animation Worklet

Provides more control over animations beyond the regular requestAnimationFrame.

Layout API

Customizes how elements are laid out, useful for dynamic or grid-based layouts.

Typed OM (Object Model)

Programmatically interact with CSS values in a performant manner using Typed CSS Values.