Edit Client State

Name

Also known as (comma separated)

Brief definition State maintained in the browser/application.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "stateKey", "type": "text", "label": "State variable", "default": "sidebarOpen" }, { "id": "value", "type": "select", "label": "Current value", "default": "true", "options": [ "true", "false" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showNote", "type": "toggle", "label": "Explain scope", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"clst\">\n <div class=\"clst__browser\" style=\"border-color:{{accent}};\">\n <p class=\"clst__chrome\">Browser tab</p>\n <code class=\"clst__var\">{{stateKey}} = {{value}}</code>\n </div>\n {{#if showNote}}<p class=\"clst__note\">Lives only in this tab's memory &mdash; refresh the page and it resets; the server never sees it.</p>{{/if}}\n</div>\n<style>\n.clst { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.clst__browser { border: 2px solid; border-radius: 10px; padding: 12px; }\n.clst__chrome { margin: 0 0 8px; font-size: 10px; color: #24143099; text-transform: uppercase; letter-spacing: .04em; }\n.clst__var { display: block; font: 12px ui-monospace, monospace; background: #24143012; padding: 8px 10px; border-radius: 6px; }\n.clst__note { margin: 10px 0 0; font-size: 10px; color: #24143099; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border\">\n <div class=\"border-2 rounded-[10px] p-3\" style=\"border-color:{{accent}};\">\n <p class=\"m-0 mb-2 text-[10px] text-[#24143099] uppercase tracking-wide\">Browser tab</p>\n <code class=\"block font-mono text-xs bg-[#24143012] py-2 px-2.5 rounded-md\">{{stateKey}} = {{value}}</code>\n </div>\n {{#if showNote}}<p class=\"mt-2.5 text-[10px] text-[#24143099]\">Lives only in this tab's memory &mdash; refresh the page and it resets; the server never sees it.</p>{{/if}}\n</div>", "react": "export function ClientState({\n stateKey = \"{{stateKey}}\",\n value = \"{{value}}\",\n accent = \"{{accent}}\",\n showNote = {{showNote}},\n}) {\n return (\n <div style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <div style={{ border: `2px solid ${accent}`, borderRadius: 10, padding: 12 }}>\n <p style={{ margin: \"0 0 8px\", fontSize: 10, color: \"#24143099\", textTransform: \"uppercase\", letterSpacing: \".04em\" }}>Browser tab</p>\n <code style={{ display: \"block\", fontFamily: \"ui-monospace, monospace\", fontSize: 12, background: \"#24143012\", padding: \"8px 10px\", borderRadius: 6 }}>{stateKey} = {value}</code>\n </div>\n {showNote && <p style={{ margin: \"10px 0 0\", fontSize: 10, color: \"#24143099\" }}>Lives only in this tab's memory &mdash; refresh the page and it resets; the server never sees it.</p>}\n </div>\n );\n}" }