Edit Global State

Name

Also known as (comma separated)

Brief definition State shared across the application.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "storeKey", "type": "text", "label": "Store key", "default": "currentUser" }, { "id": "value", "type": "text", "label": "Value", "default": "Ada" }, { "id": "subscriberCount", "type": "select", "label": "Components subscribed", "default": "3", "options": [ "1", "2", "3" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#D9C8F0", "presets": [ "#D9C8F0", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"gst\" data-count=\"{{subscriberCount}}\">\n <div class=\"gst__store\" style=\"background:{{accent}};\">store.{{storeKey}} = &quot;{{value}}&quot;</div>\n <div class=\"gst__subs\">\n <span class=\"gst__sub\">Header</span>\n <span class=\"gst__sub\">Sidebar</span>\n <span class=\"gst__sub\">Profile card</span>\n </div>\n</div>\n<style>\n.gst { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.gst__store { text-align: center; font: 700 11px ui-monospace, monospace; padding: 10px; border-radius: 8px; margin-bottom: 14px; }\n.gst__subs { display: flex; gap: 8px; }\n.gst__sub { flex: 1; text-align: center; padding: 10px 4px; border-radius: 8px; background: #24143010; font-size: 11px; font-weight: 600; }\n.gst[data-count=\"1\"] .gst__sub:nth-child(n+2) { display: none; }\n.gst[data-count=\"2\"] .gst__sub:nth-child(n+3) { display: none; }\n</style>", "tailwind": "<div class=\"gsttw gsttw--{{subscriberCount}} font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border\">\n <div class=\"text-center font-bold text-[11px] font-mono py-2.5 rounded-lg mb-3.5\" style=\"background:{{accent}};\">store.{{storeKey}} = &quot;{{value}}&quot;</div>\n <div class=\"flex gap-2\">\n <span class=\"gsttw__sub flex-1 text-center py-2.5 px-1 rounded-lg bg-[#24143010] text-[11px] font-semibold\">Header</span>\n <span class=\"gsttw__sub flex-1 text-center py-2.5 px-1 rounded-lg bg-[#24143010] text-[11px] font-semibold\">Sidebar</span>\n <span class=\"gsttw__sub flex-1 text-center py-2.5 px-1 rounded-lg bg-[#24143010] text-[11px] font-semibold\">Profile card</span>\n </div>\n</div>\n<style>\n.gsttw--1 .gsttw__sub:nth-child(n+2) { display: none; }\n.gsttw--2 .gsttw__sub:nth-child(n+3) { display: none; }\n</style>", "react": "export function GlobalState({\n storeKey = \"{{storeKey}}\",\n value = \"{{value}}\",\n subscriberCount = \"{{subscriberCount}}\",\n accent = \"{{accent}}\",\n}) {\n const n = Number(subscriberCount);\n const subs = [\"Header\", \"Sidebar\", \"Profile card\"].filter((_, i) => i < n);\n return (\n <div style={{ font: \"12px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <div style={{ textAlign: \"center\", fontWeight: 700, fontSize: 11, fontFamily: \"ui-monospace, monospace\", padding: 10, borderRadius: 8, marginBottom: 14, background: accent }}>store.{storeKey} = \"{value}\"</div>\n <div style={{ display: \"flex\", gap: 8 }}>\n {subs.map((s) => <span key={s} style={{ flex: 1, textAlign: \"center\", padding: \"10px 4px\", borderRadius: 8, background: \"#24143010\", fontSize: 11, fontWeight: 600 }}>{s}</span>)}\n </div>\n </div>\n );\n}" }