Edit Hydration

Name

Also known as (comma separated)

Brief definition Attaching client behaviour to server-rendered HTML.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "stage", "type": "select", "label": "Stage", "default": "server-html", "options": [ "server-html", "hydrated" ] }, { "id": "buttonLabel", "type": "text", "label": "Button label", "default": "Add to cart" }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showJsBadge", "type": "toggle", "label": "Show JS status badge", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"hyd hyd--{{stage}}\" role=\"status\">\n <p class=\"hyd__stage\">Stage: <strong class=\"hyd__stage-name\"></strong></p>\n <button type=\"button\" class=\"hyd__btn\" style=\"--a:{{accent}};\">{{buttonLabel}}</button>\n {{#if showJsBadge}}<p class=\"hyd__badge hyd__badge--server-html\">JS: not yet attached</p><p class=\"hyd__badge hyd__badge--hydrated\">JS: event listeners attached</p>{{/if}}\n</div>\n<style>\n.hyd { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 280px; box-sizing: border-box; }\n.hyd__stage { margin: 0 0 12px; font-size: 12px; }\n.hyd__stage-name::before { content: \"server HTML (static)\"; }\n.hyd--hydrated .hyd__stage-name::before { content: \"hydrated (interactive)\"; }\n.hyd__btn { border: none; padding: 10px 18px; border-radius: 8px; font: 600 13px system-ui, sans-serif; color: #241430; width: 100%; background: #24143020; cursor: default; opacity: .6; }\n.hyd--hydrated .hyd__btn { background: var(--a); cursor: pointer; opacity: 1; }\n.hyd__badge { display: none; margin: 10px 0 0; font-size: 10px; color: #24143099; }\n.hyd--server-html .hyd__badge--server-html, .hyd--hydrated .hyd__badge--hydrated { display: block; }\n</style>", "tailwind": "<div class=\"hydtw hydtw--{{stage}} font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[280px] box-border\" role=\"status\">\n <p class=\"m-0 mb-3 text-xs\">Stage: <strong class=\"hydtw__stage-name\"></strong></p>\n <button type=\"button\" class=\"hydtw__btn border-none py-2.5 px-4.5 rounded-lg font-semibold text-[13px] text-[#241430] w-full bg-[#24143020] opacity-60\" style=\"--a:{{accent}};\">{{buttonLabel}}</button>\n {{#if showJsBadge}}<p class=\"hydtw__badge hydtw__badge--server-html hidden mt-2.5 m-0 text-[10px] text-[#24143099]\">JS: not yet attached</p><p class=\"hydtw__badge hydtw__badge--hydrated hidden mt-2.5 m-0 text-[10px] text-[#24143099]\">JS: event listeners attached</p>{{/if}}\n</div>\n<style>\n.hydtw__stage-name::before { content: \"server HTML (static)\"; }\n.hydtw--hydrated .hydtw__stage-name::before { content: \"hydrated (interactive)\"; }\n.hydtw--hydrated .hydtw__btn { background: var(--a); opacity: 1; cursor: pointer; }\n.hydtw--server-html .hydtw__badge--server-html, .hydtw--hydrated .hydtw__badge--hydrated { display: block; }\n</style>", "react": "export function Hydration({\n stage = \"{{stage}}\",\n buttonLabel = \"{{buttonLabel}}\",\n accent = \"{{accent}}\",\n showJsBadge = {{showJsBadge}},\n}) {\n const hydrated = stage === \"hydrated\";\n return (\n <div role=\"status\" style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 280, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 12px\", fontSize: 12 }}>Stage: <strong>{hydrated ? \"hydrated (interactive)\" : \"server HTML (static)\"}</strong></p>\n <button type=\"button\" style={{ border: \"none\", padding: \"10px 18px\", borderRadius: 8, fontWeight: 600, fontSize: 13, color: \"#241430\", width: \"100%\", background: hydrated ? accent : \"#24143020\", cursor: hydrated ? \"pointer\" : \"default\", opacity: hydrated ? 1 : .6 }}>{buttonLabel}</button>\n {showJsBadge && <p style={{ margin: \"10px 0 0\", fontSize: 10, color: \"#24143099\" }}>{hydrated ? \"JS: event listeners attached\" : \"JS: not yet attached\"}</p>}\n </div>\n );\n}" }