Edit SSR · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<div class=\"ssr ssr--{{stage}}\" role=\"img\" aria-label=\"SSR for {{pageTitle}}, stage {{stage}}\">\n  <p class=\"ssr__page\">{{pageTitle}}</p>\n  <div class=\"ssr__timeline\">\n    <span class=\"ssr__step ssr__step--requesting\">Browser requests page{{#if showTimes}}<small>0ms</small>{{/if}}</span>\n    <span class=\"ssr__step ssr__step--rendering\" style=\"--a:{{accent}};\">Server fetches data + renders HTML{{#if showTimes}}<small>~180ms</small>{{/if}}</span>\n    <span class=\"ssr__step ssr__step--delivered\" style=\"--a:{{accent}};\">Full HTML delivered{{#if showTimes}}<small>~200ms</small>{{/if}}</span>\n  </div>\n  <div class=\"ssr__screen\">\n    <span class=\"ssr__preview ssr__preview--requesting\">&nbsp;</span>\n    <span class=\"ssr__preview ssr__preview--rendering\">&#9696;</span>\n    <span class=\"ssr__preview ssr__preview--delivered\" style=\"color:{{accent}};\">Full page content</span>\n  </div>\n</div>\n<style>\n.ssr { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 320px; box-sizing: border-box; }\n.ssr__page { margin: 0 0 10px; font: 11px ui-monospace, monospace; color: #24143099; }\n.ssr__timeline { display: flex; gap: 6px; margin-bottom: 14px; }\n.ssr__step { flex: 1; text-align: center; padding: 8px 4px; border-radius: 8px; background: #24143010; font-size: 10px; font-weight: 600; opacity: .4; }\n.ssr__step small { display: block; font-weight: 400; color: #24143099; margin-top: 3px; }\n.ssr--requesting .ssr__step--requesting, .ssr--rendering .ssr__step--rendering, .ssr--delivered .ssr__step--delivered { opacity: 1; background: var(--a, #24143010); }\n.ssr__screen { height: 56px; display: grid; place-items: center; background: #ffffff; border: 1.5px dashed #24143020; border-radius: 8px; font-size: 20px; font-weight: 700; }\n.ssr__preview { display: none; }\n.ssr--requesting .ssr__preview--requesting, .ssr--rendering .ssr__preview--rendering, .ssr--delivered .ssr__preview--delivered { display: block; }\n</style>",
  "tailwind": "<div class=\"ssrtw ssrtw--{{stage}} font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[320px] box-border\" role=\"img\" aria-label=\"SSR for {{pageTitle}}, stage {{stage}}\">\n  <p class=\"m-0 mb-2.5 font-mono text-[11px] text-[#24143099]\">{{pageTitle}}</p>\n  <div class=\"flex gap-1.5 mb-3.5\">\n    <span class=\"ssrtw__step ssrtw__step--requesting flex-1 text-center py-2 px-1 rounded-lg bg-[#24143010] text-[10px] font-semibold opacity-40\">Browser requests page{{#if showTimes}}<small class=\"block font-normal text-[#24143099] mt-0.5\">0ms</small>{{/if}}</span>\n    <span class=\"ssrtw__step ssrtw__step--rendering flex-1 text-center py-2 px-1 rounded-lg bg-[#24143010] text-[10px] font-semibold opacity-40\" style=\"--a:{{accent}};\">Server fetches data + renders HTML{{#if showTimes}}<small class=\"block font-normal text-[#24143099] mt-0.5\">~180ms</small>{{/if}}</span>\n    <span class=\"ssrtw__step ssrtw__step--delivered flex-1 text-center py-2 px-1 rounded-lg bg-[#24143010] text-[10px] font-semibold opacity-40\" style=\"--a:{{accent}};\">Full HTML delivered{{#if showTimes}}<small class=\"block font-normal text-[#24143099] mt-0.5\">~200ms</small>{{/if}}</span>\n  </div>\n  <div class=\"h-14 grid place-items-center bg-white border border-dashed border-[#24143020] rounded-lg text-xl font-bold\">\n    <span class=\"ssrtw__preview ssrtw__preview--requesting hidden\">&nbsp;</span>\n    <span class=\"ssrtw__preview ssrtw__preview--rendering hidden\">&#9696;</span>\n    <span class=\"ssrtw__preview ssrtw__preview--delivered hidden\" style=\"color:{{accent}};\">Full page content</span>\n  </div>\n</div>\n<style>\n.ssrtw--requesting .ssrtw__step--requesting, .ssrtw--rendering .ssrtw__step--rendering, .ssrtw--delivered .ssrtw__step--delivered { opacity: 1; background: var(--a, #24143010); }\n.ssrtw--requesting .ssrtw__preview--requesting, .ssrtw--rendering .ssrtw__preview--rendering, .ssrtw--delivered .ssrtw__preview--delivered { display: block; }\n</style>",
  "react": "export function Ssr({\n  pageTitle = \"{{pageTitle}}\",\n  stage = \"{{stage}}\",\n  accent = \"{{accent}}\",\n  showTimes = {{showTimes}},\n}) {\n  const steps = [\n    { id: \"requesting\", label: \"Browser requests page\", time: \"0ms\" },\n    { id: \"rendering\", label: \"Server fetches data + renders HTML\", time: \"~180ms\" },\n    { id: \"delivered\", label: \"Full HTML delivered\", time: \"~200ms\" },\n  ];\n  const previews = { requesting: \"\\u00A0\", rendering: \"\\u25F0\", delivered: \"Full page content\" };\n  return (\n    <div role=\"img\" aria-label={`SSR for ${pageTitle}, stage ${stage}`} style={{ font: \"12px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 16, borderRadius: 12, width: 320, boxSizing: \"border-box\" }}>\n      <p style={{ margin: \"0 0 10px\", fontFamily: \"ui-monospace, monospace\", fontSize: 11, color: \"#24143099\" }}>{pageTitle}</p>\n      <div style={{ display: \"flex\", gap: 6, marginBottom: 14 }}>\n        {steps.map((s) => (\n          <span key={s.id} style={{ flex: 1, textAlign: \"center\", padding: \"8px 4px\", borderRadius: 8, fontSize: 10, fontWeight: 600, opacity: s.id === stage ? 1 : .4, background: s.id === stage ? accent : \"#24143010\" }}>\n            {s.label}\n            {showTimes && <small style={{ display: \"block\", fontWeight: 400, color: \"#24143099\", marginTop: 3 }}>{s.time}</small>}\n          </span>\n        ))}\n      </div>\n      <div style={{ height: 56, display: \"grid\", placeItems: \"center\", background: \"#ffffff\", border: \"1.5px dashed #24143020\", borderRadius: 8, fontSize: 20, fontWeight: 700, color: stage === \"delivered\" ? accent : \"#241430\" }}>{previews[stage]}</div>\n    </div>\n  );\n}"
}