← examples

createCutout() — vanilla DOM

How to use the zero-dependency core on hand-written markup — no framework, no build step beyond your bundler. 

import { createCutout } from "dom-cutout";

Stack, then attach

Two elements you own: the content, and an overlay layer positioned over it (a shared grid cell is the easiest stack). Pass both to createCutout and the overlay's silhouette is cut out of the content — toggling the badge off clears the mask, because an empty overlay means no cutout.

MJ 
const instance = createCutout(content, overlay, { gap: 4 });

Options are read live

The options object is read on every update — mutate it and call update() instead of recreating the instance (recreating would clear the mask while the new one decodes).

MJ 
options.gap = 8;
instance.update(); // also for DOM changes ResizeObserver can't see

Tear down when done

destroy() removes the mask longhands, the data-cutout attribute, and the ResizeObservers. The elements are yours again, untouched.

MJ 
instance.destroy(); // removes mask + observers