Edit URL State

Name

Also known as (comma separated)

Brief definition State represented in the URL.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "basePath", "type": "text", "label": "Path", "default": "/search" }, { "id": "tab", "type": "select", "label": "tab param", "default": "images", "options": [ "results", "images", "news" ] }, { "id": "page", "type": "number", "label": "page param", "default": 2, "min": 1, "max": 20, "step": 1 }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"urls urls--{{tab}}\">\n <div class=\"urls__bar\">\n <span class=\"urls__dot\"></span><span class=\"urls__dot\"></span><span class=\"urls__dot\"></span>\n <code class=\"urls__url\">yoursite.app{{basePath}}?tab={{tab}}&amp;page={{page}}</code>\n </div>\n <div class=\"urls__tabs\">\n <span class=\"urls__tab urls__tab--results\" style=\"--a:{{accent}};\">Results</span>\n <span class=\"urls__tab urls__tab--images\" style=\"--a:{{accent}};\">Images</span>\n <span class=\"urls__tab urls__tab--news\" style=\"--a:{{accent}};\">News</span>\n </div>\n <p class=\"urls__note\">Refreshing, sharing or bookmarking this link reproduces exactly this view &mdash; the state lives in the URL, not in memory.</p>\n</div>\n<style>\n.urls { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 320px; box-sizing: border-box; }\n.urls__bar { display: flex; align-items: center; gap: 6px; background: #ffffff; border: 1px solid #24143018; border-radius: 8px; padding: 8px 10px; margin-bottom: 10px; }\n.urls__dot { width: 6px; height: 6px; border-radius: 50%; background: #24143030; flex-shrink: 0; }\n.urls__url { font: 10px ui-monospace, monospace; margin-left: 4px; word-break: break-all; }\n.urls__tabs { display: flex; gap: 6px; margin-bottom: 10px; }\n.urls__tab { flex: 1; text-align: center; padding: 7px 4px; border-radius: 6px; background: #24143010; font-size: 11px; font-weight: 600; }\n.urls--results .urls__tab--results, .urls--images .urls__tab--images, .urls--news .urls__tab--news { background: var(--a); }\n.urls__note { margin: 0; font-size: 10px; color: #24143099; }\n</style>", "tailwind": "<div class=\"urlstw urlstw--{{tab}} font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[320px] box-border\">\n <div class=\"flex items-center gap-1.5 bg-white border border-[#24143018] rounded-lg py-2 px-2.5 mb-2.5\">\n <span class=\"w-1.5 h-1.5 rounded-full bg-[#24143030] shrink-0\"></span><span class=\"w-1.5 h-1.5 rounded-full bg-[#24143030] shrink-0\"></span><span class=\"w-1.5 h-1.5 rounded-full bg-[#24143030] shrink-0\"></span>\n <code class=\"font-mono text-[10px] ml-1 break-all\">yoursite.app{{basePath}}?tab={{tab}}&amp;page={{page}}</code>\n </div>\n <div class=\"flex gap-1.5 mb-2.5\">\n <span class=\"urlstw__tab urlstw__tab--results flex-1 text-center py-1.5 px-1 rounded-md bg-[#24143010] text-[11px] font-semibold\" style=\"--a:{{accent}};\">Results</span>\n <span class=\"urlstw__tab urlstw__tab--images flex-1 text-center py-1.5 px-1 rounded-md bg-[#24143010] text-[11px] font-semibold\" style=\"--a:{{accent}};\">Images</span>\n <span class=\"urlstw__tab urlstw__tab--news flex-1 text-center py-1.5 px-1 rounded-md bg-[#24143010] text-[11px] font-semibold\" style=\"--a:{{accent}};\">News</span>\n </div>\n <p class=\"m-0 text-[10px] text-[#24143099]\">Refreshing, sharing or bookmarking this link reproduces exactly this view &mdash; the state lives in the URL, not in memory.</p>\n</div>\n<style>\n.urlstw--results .urlstw__tab--results, .urlstw--images .urlstw__tab--images, .urlstw--news .urlstw__tab--news { background: var(--a); }\n</style>", "react": "export function UrlState({\n basePath = \"{{basePath}}\",\n tab = \"{{tab}}\",\n page = {{page}},\n accent = \"{{accent}}\",\n}) {\n const tabs = [\"results\", \"images\", \"news\"];\n return (\n <div style={{ font: \"12px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 16, borderRadius: 12, width: 320, boxSizing: \"border-box\" }}>\n <div style={{ display: \"flex\", alignItems: \"center\", gap: 6, background: \"#ffffff\", border: \"1px solid #24143018\", borderRadius: 8, padding: \"8px 10px\", marginBottom: 10 }}>\n <span style={{ width: 6, height: 6, borderRadius: \"50%\", background: \"#24143030\", flexShrink: 0 }} />\n <span style={{ width: 6, height: 6, borderRadius: \"50%\", background: \"#24143030\", flexShrink: 0 }} />\n <span style={{ width: 6, height: 6, borderRadius: \"50%\", background: \"#24143030\", flexShrink: 0 }} />\n <code style={{ fontFamily: \"ui-monospace, monospace\", fontSize: 10, marginLeft: 4, wordBreak: \"break-all\" }}>yoursite.app{basePath}?tab={tab}&amp;page={page}</code>\n </div>\n <div style={{ display: \"flex\", gap: 6, marginBottom: 10 }}>\n {tabs.map((t) => (\n <span key={t} style={{ flex: 1, textAlign: \"center\", padding: \"7px 4px\", borderRadius: 6, fontSize: 11, fontWeight: 600, background: t === tab ? accent : \"#24143010\" }}>{t[0].toUpperCase() + t.slice(1)}</span>\n ))}\n </div>\n <p style={{ margin: 0, fontSize: 10, color: \"#24143099\" }}>Refreshing, sharing or bookmarking this link reproduces exactly this view &mdash; the state lives in the URL, not in memory.</p>\n </div>\n );\n}" }