What are CSS Houdini APIs?

CSS Houdini is a set of APIs that let developers extend CSS by writing code that hooks

directly into the CSS engine.

Examples:

• Paint API → Custom background drawing.
• Layout API → Define custom layout logic.
• Properties & Values API → Register custom CSS properties.

Example (Paint API):

registerPaint('dots', class {

paint(ctx, size) {

ctx.fillStyle = 'red';

ctx.arc(50, 50, 10, 0, 2 * Math.PI);

ctx.fill();

}

});

Key Takeaway:

Houdini gives developers low-level control over how CSS works under the hood.