GRAPHICS PIPELINE • MAY 2026

Bypassing the DOM via CSS Houdini Paint Worklets.

When a language server detects syntax errors across a 10,000-line file, standard editors render those red "error squiggles" by injecting thousands of tiny HTML <div> elements or SVG nodes under the text. This absolutely destroys the browser's layout engine, causing catastrophic lag when the user tries to scroll.

NitroIDE completely eliminates these DOM nodes. By utilizing the experimental CSS Paint API (Houdini), we instruct the browser's native C++ rendering engine to paint the squiggles programmatically, acting as a low-level bridge between CSS and a Canvas-like API.

The Paint Worklet

Houdini allows us to register a PaintWorklet. This script runs on a dedicated background rendering thread. Instead of generating DOM elements, we write a custom JavaScript class that receives the exact dimensions of the HTML element and draws the squiggles directly onto the screen's bitmap before the frame is painted.

// Registering a custom Houdini Paint Worklet
CSS.paintWorklet.addModule('error-squiggle-painter.js');

// Inside error-squiggle-painter.js
class ErrorSquigglePainter {
  paint(ctx, size, properties) {
    ctx.strokeStyle = '#ef4444';
    ctx.lineWidth = 2;
    ctx.beginPath();
    // Draw Bezier curves mathematically across the 'size' boundary
    for (let x = 0; x < size.width; x += 4) {
      ctx.lineTo(x, x % 8 === 0 ? size.height : 0);
    }
    ctx.stroke();
  }
}
registerPaint('error-squiggle', ErrorSquigglePainter);

Applying via CSS: Once the worklet is registered, applying it is as simple as writing background-image: paint(error-squiggle); in our CSS. The browser handles the rest, executing the paint function seamlessly at the monitor's native refresh rate.

Zero-Layout Thrashing

Because Houdini operates strictly during the browser's "Paint" phase, it never triggers a "Layout" or "Style" recalculation. We can dynamically change the squiggle color, amplitude, or frequency via CSS Custom Properties (Variables) and achieve perfect 120fps animations with zero CPU overhead.

See Houdini in Action.

Write some bad code to trigger our Houdini-powered error rendering engine.

Launch Workspace