Edit Code Splitting · UI Element Compendium

Name

Also known as (comma separated)

Brief definition

Notes

Tier

Controls schema (JSON array)

Templates (JSON object keyed by format)

{
  "html": "<div class=\"csp csp--{{splitMode}}\" role=\"img\" aria-label=\"{{splitMode}} bundling of {{totalSize}}KB\">\n  <p class=\"csp__title\">{{totalSize}}KB total &mdash; {{splitMode}}</p>\n  <div class=\"csp__bar csp__bar--single\" style=\"background:{{accent}};\">{{#if showLabels}}app.bundle.js &middot; {{totalSize}}KB &middot; loaded before first paint{{/if}}</div>\n  <div class=\"csp__chunks\">\n    <span class=\"csp__chunk\" style=\"flex:5;background:{{accent}};\">{{#if showLabels}}main{{/if}}</span>\n    <span class=\"csp__chunk\" style=\"flex:3;background:#24143030;\">{{#if showLabels}}/dashboard{{/if}}</span>\n    <span class=\"csp__chunk\" style=\"flex:2;background:#24143018;\">{{#if showLabels}}/settings{{/if}}</span>\n  </div>\n  <p class=\"csp__note csp__note--single\">Everything downloads up front, whether the visitor needs it or not.</p>\n  <p class=\"csp__note csp__note--chunks\">Only <strong>main</strong> loads first; route chunks load when that route is visited.</p>\n</div>\n<style>\n.csp { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 320px; box-sizing: border-box; }\n.csp__title { margin: 0 0 12px; font-weight: 700; }\n.csp__bar { display: none; padding: 14px 10px; border-radius: 8px; color: #241430; font-size: 10px; font-weight: 600; }\n.csp__chunks { display: none; gap: 4px; height: 30px; }\n.csp__chunk { display: flex; align-items: center; justify-content: center; border-radius: 6px; color: #241430; font-size: 9px; font-weight: 700; overflow: hidden; }\n.csp--single .csp__bar { display: block; }\n.csp--chunks .csp__chunks { display: flex; }\n.csp__note { display: none; margin: 10px 0 0; font-size: 10px; color: #24143099; }\n.csp--single .csp__note--single, .csp--chunks .csp__note--chunks { display: block; }\n</style>",
  "tailwind": "<div class=\"csptw csptw--{{splitMode}} font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[320px] box-border\" role=\"img\" aria-label=\"{{splitMode}} bundling of {{totalSize}}KB\">\n  <p class=\"m-0 mb-3 font-bold\">{{totalSize}}KB total &mdash; {{splitMode}}</p>\n  <div class=\"csptw__bar hidden py-3.5 px-2.5 rounded-lg text-[10px] font-semibold\" style=\"background:{{accent}};\">{{#if showLabels}}app.bundle.js &middot; {{totalSize}}KB &middot; loaded before first paint{{/if}}</div>\n  <div class=\"csptw__chunks hidden gap-1 h-[30px]\">\n    <span class=\"flex items-center justify-center rounded-md text-[9px] font-bold overflow-hidden\" style=\"flex:5;background:{{accent}};\">{{#if showLabels}}main{{/if}}</span>\n    <span class=\"flex items-center justify-center rounded-md text-[9px] font-bold overflow-hidden\" style=\"flex:3;background:#24143030;\">{{#if showLabels}}/dashboard{{/if}}</span>\n    <span class=\"flex items-center justify-center rounded-md text-[9px] font-bold overflow-hidden\" style=\"flex:2;background:#24143018;\">{{#if showLabels}}/settings{{/if}}</span>\n  </div>\n  <p class=\"csptw__note-single hidden mt-2.5 m-0 text-[10px] text-[#24143099]\">Everything downloads up front, whether the visitor needs it or not.</p>\n  <p class=\"csptw__note-chunks hidden mt-2.5 m-0 text-[10px] text-[#24143099]\">Only <strong>main</strong> loads first; route chunks load when that route is visited.</p>\n</div>\n<style>\n.csptw--single .csptw__bar, .csptw--single .csptw__note-single { display: block; }\n.csptw--chunks .csptw__chunks { display: flex; }\n.csptw--chunks .csptw__note-chunks { display: block; }\n</style>",
  "react": "export function CodeSplitting({\n  totalSize = {{totalSize}},\n  splitMode = \"{{splitMode}}\",\n  accent = \"{{accent}}\",\n  showLabels = {{showLabels}},\n}) {\n  return (\n    <div role=\"img\" aria-label={`${splitMode} bundling of ${totalSize}KB`} style={{ font: \"12px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 320, boxSizing: \"border-box\" }}>\n      <p style={{ margin: \"0 0 12px\", fontWeight: 700 }}>{totalSize}KB total &mdash; {splitMode}</p>\n      {splitMode === \"single\"\n        ? <div style={{ padding: \"14px 10px\", borderRadius: 8, background: accent, fontSize: 10, fontWeight: 600 }}>{showLabels && `app.bundle.js \\u00B7 ${totalSize}KB \\u00B7 loaded before first paint`}</div>\n        : (\n          <div style={{ display: \"flex\", gap: 4, height: 30 }}>\n            <span style={{ flex: 5, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", borderRadius: 6, fontSize: 9, fontWeight: 700, overflow: \"hidden\", background: accent }}>{showLabels && \"main\"}</span>\n            <span style={{ flex: 3, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", borderRadius: 6, fontSize: 9, fontWeight: 700, overflow: \"hidden\", background: \"#24143030\" }}>{showLabels && \"/dashboard\"}</span>\n            <span style={{ flex: 2, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", borderRadius: 6, fontSize: 9, fontWeight: 700, overflow: \"hidden\", background: \"#24143018\" }}>{showLabels && \"/settings\"}</span>\n          </div>\n        )}\n      <p style={{ margin: \"10px 0 0\", fontSize: 10, color: \"#24143099\" }}>\n        {splitMode === \"single\" ? \"Everything downloads up front, whether the visitor needs it or not.\" : <>Only <strong>main</strong> loads first; route chunks load when that route is visited.</>}\n      </p>\n    </div>\n  );\n}"
}