Edit Cache

Name

Also known as (comma separated)

Brief definition Stored copy of data for faster access.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "keyName", "type": "text", "label": "Cache key", "default": "GET /api/user/42" }, { "id": "state", "type": "select", "label": "Outcome", "default": "hit", "options": [ "hit", "miss", "stale" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showLatency", "type": "toggle", "label": "Show latency", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"cch cch--{{state}}\" role=\"img\" aria-label=\"Cache {{state}} for {{keyName}}\">\n <p class=\"cch__key\">{{keyName}}</p>\n <div class=\"cch__flow\">\n <span class=\"cch__node\">Client</span>\n <span class=\"cch__arrow\">&rarr;</span>\n <span class=\"cch__node cch__node--cache\" style=\"--a:{{accent}};\">Cache</span>\n <span class=\"cch__arrow cch__arrow--origin\">&rarr;</span>\n <span class=\"cch__node cch__node--origin\">Origin</span>\n </div>\n <p class=\"cch__result cch__result--hit\">HIT &mdash; served from cache{{#if showLatency}}, 4ms{{/if}}</p>\n <p class=\"cch__result cch__result--miss\">MISS &mdash; fetched from origin, cache populated{{#if showLatency}}, 210ms{{/if}}</p>\n <p class=\"cch__result cch__result--stale\">STALE &mdash; served stale, revalidating in background{{#if showLatency}}, 4ms{{/if}}</p>\n</div>\n<style>\n.cch { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.cch__key { margin: 0 0 12px; font: 11px ui-monospace, monospace; color: #24143099; }\n.cch__flow { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; }\n.cch__node { flex: 1; text-align: center; padding: 10px 4px; border-radius: 8px; background: #24143010; font-size: 11px; font-weight: 700; }\n.cch__arrow { color: #24143060; }\n.cch__arrow--origin { opacity: .2; }\n.cch--miss .cch__arrow--origin, .cch--stale .cch__arrow--origin { opacity: .2; }\n.cch--miss .cch__arrow--origin { opacity: 1; }\n.cch__node--cache { position: relative; }\n.cch--hit .cch__node--cache, .cch--stale .cch__node--cache { background: var(--a); }\n.cch--miss .cch__node--origin { background: var(--a); }\n.cch__result { display: none; margin: 0; font-size: 12px; font-weight: 600; }\n.cch--hit .cch__result--hit, .cch--miss .cch__result--miss, .cch--stale .cch__result--stale { display: block; }\n</style>", "tailwind": "<div class=\"cchtw cchtw--{{state}} font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border\" role=\"img\" aria-label=\"Cache {{state}} for {{keyName}}\">\n <p class=\"m-0 mb-3 font-mono text-[11px] text-[#24143099]\">{{keyName}}</p>\n <div class=\"flex items-center gap-1.5 mb-3\">\n <span class=\"flex-1 text-center py-2.5 px-1 rounded-lg bg-[#24143010] text-[11px] font-bold\">Client</span>\n <span class=\"text-[#24143060]\">&rarr;</span>\n <span class=\"cchtw__cache flex-1 text-center py-2.5 px-1 rounded-lg bg-[#24143010] text-[11px] font-bold\" style=\"--a:{{accent}};\">Cache</span>\n <span class=\"cchtw__arrow-origin text-[#24143060] opacity-20\">&rarr;</span>\n <span class=\"cchtw__origin flex-1 text-center py-2.5 px-1 rounded-lg bg-[#24143010] text-[11px] font-bold\">Origin</span>\n </div>\n <p class=\"cchtw__result cchtw__result--hit hidden m-0 text-xs font-semibold\">HIT &mdash; served from cache{{#if showLatency}}, 4ms{{/if}}</p>\n <p class=\"cchtw__result cchtw__result--miss hidden m-0 text-xs font-semibold\">MISS &mdash; fetched from origin, cache populated{{#if showLatency}}, 210ms{{/if}}</p>\n <p class=\"cchtw__result cchtw__result--stale hidden m-0 text-xs font-semibold\">STALE &mdash; served stale, revalidating in background{{#if showLatency}}, 4ms{{/if}}</p>\n</div>\n<style>\n.cchtw--hit .cchtw__cache, .cchtw--stale .cchtw__cache { background: var(--a); }\n.cchtw--miss .cchtw__origin { background: var(--a); }\n.cchtw--miss .cchtw__arrow-origin { opacity: 1; }\n.cchtw--hit .cchtw__result--hit, .cchtw--miss .cchtw__result--miss, .cchtw--stale .cchtw__result--stale { display: block; }\n</style>", "react": "export function Cache({\n keyName = \"{{keyName}}\",\n state = \"{{state}}\",\n accent = \"{{accent}}\",\n showLatency = {{showLatency}},\n}) {\n const results = {\n hit: `HIT \\u2014 served from cache${showLatency ? \", 4ms\" : \"\"}`,\n miss: `MISS \\u2014 fetched from origin, cache populated${showLatency ? \", 210ms\" : \"\"}`,\n stale: `STALE \\u2014 served stale, revalidating in background${showLatency ? \", 4ms\" : \"\"}`,\n };\n const node = (active) => ({ flex: 1, textAlign: \"center\", padding: \"10px 4px\", borderRadius: 8, fontSize: 11, fontWeight: 700, background: active ? accent : \"#24143010\" });\n return (\n <div role=\"img\" aria-label={`Cache ${state} for ${keyName}`} style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 12px\", fontFamily: \"ui-monospace, monospace\", fontSize: 11, color: \"#24143099\" }}>{keyName}</p>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 6, marginBottom: 12 }}>\n <span style={node(false)}>Client</span>\n <span style={{ color: \"#24143060\" }}>&rarr;</span>\n <span style={node(state === \"hit\" || state === \"stale\")}>Cache</span>\n <span style={{ color: \"#24143060\", opacity: state === \"miss\" ? 1 : .2 }}>&rarr;</span>\n <span style={node(state === \"miss\")}>Origin</span>\n </div>\n <p style={{ margin: 0, fontSize: 12, fontWeight: 600 }}>{results[state]}</p>\n </div>\n );\n}" }