Edit Local State

Name

Also known as (comma separated)

Brief definition State belonging to one component/context.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "componentLabel", "type": "text", "label": "Component", "default": "Counter" }, { "id": "countA", "type": "number", "label": "Instance A count", "default": 2, "min": 0, "max": 20, "step": 1 }, { "id": "countB", "type": "number", "label": "Instance B count", "default": 7, "min": 0, "max": 20, "step": 1 }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"lclst\">\n <p class=\"lclst__hint\">Two independent &lt;{{componentLabel}}&gt; instances &mdash; each owns its own count.</p>\n <div class=\"lclst__row\">\n <div class=\"lclst__box\" style=\"border-color:{{accent}};\"><small>{{componentLabel}} A</small><strong>{{countA}}</strong></div>\n <div class=\"lclst__box\" style=\"border-color:{{accent}};\"><small>{{componentLabel}} B</small><strong>{{countB}}</strong></div>\n </div>\n</div>\n<style>\n.lclst { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.lclst__hint { margin: 0 0 12px; font-size: 11px; color: #24143099; }\n.lclst__row { display: flex; gap: 10px; }\n.lclst__box { flex: 1; border: 2px solid; border-radius: 10px; padding: 12px; text-align: center; }\n.lclst__box small { display: block; font-size: 10px; color: #24143099; margin-bottom: 6px; }\n.lclst__box strong { font-size: 24px; }\n</style>", "tailwind": "<div class=\"font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border\">\n <p class=\"m-0 mb-3 text-[11px] text-[#24143099]\">Two independent &lt;{{componentLabel}}&gt; instances &mdash; each owns its own count.</p>\n <div class=\"flex gap-2.5\">\n <div class=\"flex-1 border-2 rounded-[10px] p-3 text-center\" style=\"border-color:{{accent}};\"><small class=\"block text-[10px] text-[#24143099] mb-1.5\">{{componentLabel}} A</small><strong class=\"text-2xl\">{{countA}}</strong></div>\n <div class=\"flex-1 border-2 rounded-[10px] p-3 text-center\" style=\"border-color:{{accent}};\"><small class=\"block text-[10px] text-[#24143099] mb-1.5\">{{componentLabel}} B</small><strong class=\"text-2xl\">{{countB}}</strong></div>\n </div>\n</div>", "react": "export function LocalState({\n componentLabel = \"{{componentLabel}}\",\n countA = {{countA}},\n countB = {{countB}},\n accent = \"{{accent}}\",\n}) {\n const box = { flex: 1, border: `2px solid ${accent}`, borderRadius: 10, padding: 12, textAlign: \"center\" };\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 <p style={{ margin: \"0 0 12px\", fontSize: 11, color: \"#24143099\" }}>Two independent &lt;{componentLabel}&gt; instances &mdash; each owns its own count.</p>\n <div style={{ display: \"flex\", gap: 10 }}>\n <div style={box}><small style={{ display: \"block\", fontSize: 10, color: \"#24143099\", marginBottom: 6 }}>{componentLabel} A</small><strong style={{ fontSize: 24 }}>{countA}</strong></div>\n <div style={box}><small style={{ display: \"block\", fontSize: 10, color: \"#24143099\", marginBottom: 6 }}>{componentLabel} B</small><strong style={{ fontSize: 24 }}>{countB}</strong></div>\n </div>\n </div>\n );\n}" }