What is Houdini?

Houdini is a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine. Houdini is a group of APIs that give developers direct access to the CSS Object Model (CSSOM), enabling developers to write code the browser can parse as CSS, thereby creating new CSS features without waiting for them to be implemented natively in browsers. —[MDN]

Houdini APIs

CSS Houdini includes the following APIs, in order of support:

• Typed Object Model: Enables the browser to understand CSS and typed Javascript objects instead of strings, enabling faster parse times and more semantic manipulation.
• Properties and Values API: Enables developers to define advanced CSS custom properties with syntax (type checking), default values, and inheritance.
• Paint Worklet: Enables developers to define canvas-like custom painting functions that can be used directly in CSS as backgrounds, borders, masks, and more.
• Animation Worklet: Enables animations to hook into the GPU to avoid jank and not clog the main thread. The Animation Worklet also enables scroll-linked animations.
• Layout Worklet: Gives web developers the ability to write their own layout algorithms in addition to the native algorithms user agents ship with today.
• Font Metrics API: Designed to provide basic font metrics for both in-document and out-of-document content
• Parser API: Allows developers to access the engine's parser (built on top of the Typed OM)

Browser Support and Status