Edit Persisted State

Name

Also known as (comma separated)

Brief definition State stored across sessions.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "storageKey", "type": "text", "label": "Key", "default": "theme" }, { "id": "value", "type": "text", "label": "Value", "default": "dark" }, { "id": "storageType", "type": "select", "label": "Stored in", "default": "localStorage", "options": [ "localStorage", "sessionStorage", "memory-only" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"pst pst--{{storageType}}\">\n <code class=\"pst__code\">{{storageType}}.setItem(&quot;{{storageKey}}&quot;, &quot;{{value}}&quot;)</code>\n <p class=\"pst__row\"><span>closes tab, reopens later</span><strong class=\"pst__yes\" style=\"color:{{accent}};\">survives</strong><strong class=\"pst__no\">lost</strong></p>\n <p class=\"pst__row\"><span>closes this tab only</span><strong class=\"pst__yes2\" style=\"color:{{accent}};\">survives</strong><strong class=\"pst__no2\">lost</strong></p>\n</div>\n<style>\n.pst { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.pst__code { display: block; font: 11px ui-monospace, monospace; background: #24143012; padding: 8px 10px; border-radius: 6px; margin-bottom: 12px; word-break: break-all; }\n.pst__row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid #24143014; }\n.pst__yes, .pst__yes2, .pst__no, .pst__no2 { display: none; font-size: 11px; }\n.pst--localStorage .pst__yes, .pst--localStorage .pst__yes2 { display: inline; }\n.pst--sessionStorage .pst__no, .pst--sessionStorage .pst__yes2 { display: inline; }\n.pst--memory-only .pst__no, .pst--memory-only .pst__no2 { display: inline; }\n</style>", "tailwind": "<div class=\"psttw psttw--{{storageType}} font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border\">\n <code class=\"block font-mono text-[11px] bg-[#24143012] py-2 px-2.5 rounded-md mb-3 break-all\">{{storageType}}.setItem(&quot;{{storageKey}}&quot;, &quot;{{value}}&quot;)</code>\n <p class=\"flex justify-between items-center py-1.5 border-b border-[#24143014]\"><span>closes tab, reopens later</span><strong class=\"psttw__yes hidden text-[11px]\" style=\"color:{{accent}};\">survives</strong><strong class=\"psttw__no hidden text-[11px]\">lost</strong></p>\n <p class=\"flex justify-between items-center py-1.5\"><span>closes this tab only</span><strong class=\"psttw__yes2 hidden text-[11px]\" style=\"color:{{accent}};\">survives</strong><strong class=\"psttw__no2 hidden text-[11px]\">lost</strong></p>\n</div>\n<style>\n.psttw--localStorage .psttw__yes, .psttw--localStorage .psttw__yes2 { display: inline; }\n.psttw--sessionStorage .psttw__no, .psttw--sessionStorage .psttw__yes2 { display: inline; }\n.psttw--memory-only .psttw__no, .psttw--memory-only .psttw__no2 { display: inline; }\n</style>", "react": "export function PersistedState({\n storageKey = \"{{storageKey}}\",\n value = \"{{value}}\",\n storageType = \"{{storageType}}\",\n accent = \"{{accent}}\",\n}) {\n const acrossSessions = storageType === \"localStorage\";\n const withinTab = storageType === \"localStorage\" || storageType === \"sessionStorage\";\n const cell = (ok) => <strong style={{ fontSize: 11, color: ok ? accent : \"#241430\" }}>{ok ? \"survives\" : \"lost\"}</strong>;\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 <code style={{ display: \"block\", fontFamily: \"ui-monospace, monospace\", fontSize: 11, background: \"#24143012\", padding: \"8px 10px\", borderRadius: 6, marginBottom: 12, wordBreak: \"break-all\" }}>{storageType}.setItem(\"{storageKey}\", \"{value}\")</code>\n <p style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\", padding: \"6px 0\", borderBottom: \"1px solid #24143014\" }}><span>closes tab, reopens later</span>{cell(acrossSessions)}</p>\n <p style={{ display: \"flex\", justifyContent: \"space-between\", alignItems: \"center\", padding: \"6px 0\" }}><span>closes this tab only</span>{cell(withinTab)}</p>\n </div>\n );\n}" }