Attributes

The contract between markup and the build is just HTML attributes. It is framework-agnostic: the plugin reads the rendered output whether the page was written in plain HTML, JSX, Vue, or Svelte.

Attribute	Values	Meaning
data-rasterize	(presence)	Bake this element’s decoration. It does not affect descendants.
data-rasterize-mode	auto | slice | flat | element	How to bake it. Default is auto.
data-rasterize-states	hover,active,focus,disabled,class:<name>	Extra variants to capture.
data-rasterize-id	any string	Stable asset name. Without it, one is derived.
data-rasterize-scale	number	Per-element override for the bake scale.
data-rasterize-live	(presence)	Inside an element-mode subtree: keep this node as live DOM.

What counts as decoration

Baked and stripped:

• box-shadow
• gradient and image backgrounds
• background-color when it is part of a rounded or shadowed fill
• border-color (the width stays because it is layout)
• border-radius when paired with something expensive
• border-image
• filter
• mask-image

Never baked:

• mix-blend-mode and backdrop-filter — they do not composite source-over, so no texture can replace them. The build refuses them with RZ001.
• opacity — cheap and commonly animated.
• transform — not decoration. A transform on the marked element still applies to the texture at runtime, just as it did to the live CSS.
• border-radius on its own, or when the element clips its content.

filter and mask-image

Both affect an element’s content as well as its decoration, so whether they can be baked depends on whether any content remains live after the bake.

Situation	Result
No content of its own	Baked in and stripped.
Decoration mode, with children	Stays live; the shadows underneath are still baked.
Element mode, nothing left live	Baked in and stripped.
Element mode, with live parts	Stays live, so the live parts keep the effect.

When one survives the bake, the build reports RZ025 because it is a per-frame cost. A masked panel whose entire subtree is static can often be marked element to remove it completely.

How the decoration is drawn

The generated decoration is painted as a ::before on the marked element. There is no child node, no script, and no extra attribute to carry it — the generated stylesheet is the whole delivery mechanism, including state variants. Those are rules on the element’s own :hover, :active, :focus, [disabled], or class.

How an element is identified

An explicit data-rasterize-id wins. Otherwise the id is a hash of the decoration values, mode, size, scale, state list, engine version, and contract version. An unchanged decoration becomes a cache hit; a changed one produces a new asset.

Elements are matched to assets by tag and class list, not by position, so twenty identical cards can share one texture. See preparing your UI for the rules that keep that matching stable.