Patches & variants
A variant is a list of changes — from a one-word copy swap to a full section redesign. Every change maps to a typed patch the edge applies in a single streaming pass.
The vocabulary
| Kind | What it does | Applied |
|---|---|---|
dom | Rewrite an element's text content | edge (streaming) |
attr | Set or remove an attribute (class, href, src…) | edge (streaming) |
insert | Add new HTML before/after/inside an element — banners, badges, sections | edge (streaming) |
replace | Swap an element for new HTML entirely | edge (streaming) |
remove | Delete matching elements | edge (streaming) |
css | Inject a stylesheet into <head> — restyles apply before first paint | edge (streaming) |
js | Inject behaviour at end of <body> — nudges, toggles, handlers | browser |
json-island | Patch embedded JSON state (__NEXT_DATA__, any application/json script) so hydrated components mount into the variant | edge (streaming) |
flight | Value-scoped substitution inside an RSC Flight stream (Next.js App Router) — cross-chunk safe, length-prefix aware | edge (streaming) |
client | Text change for DOM that only exists post-render (modals, JS widgets) — assignment still decided at the edge | browser |
The React problem, solved at the data layer
Changing server HTML under a hydrated component causes a hydration mismatch — React warns, re-renders, and users see a flicker. ShiftZero avoids the fight entirely: for framework pages it patches the data the component renders from, in the same edge pass as the HTML. A calculator widget with props in a JSON island mounts directly into the variant:
[
{ "kind": "json-island", "selector": "script#calc-config",
"path": ["headline"], "value": "Borrow £3,000 from £142/mo" },
{ "kind": "json-island", "selector": "script#calc-config",
"path": ["cta"], "value": "Get my rate" }
]Authoring
The wizard’s Variants step is a visual change-list — add changes from a typed menu, pick elements from your framed live page, write CSS/JS/HTML in real editors. The Code toggle round-trips the same list as raw patch JSON for power users. Serve-time patch-health diagnostics report selectors that stop matching (or match too much) on real traffic, with one-click self-healing proposals.