Cross-Document State Lab

This is one of SlexKit's most unique capabilities: place multiple slex code blocks at different positions in the same Markdown document, and as long as they use the same namespace, they share the same g state.

Below are three independent `

## Control Panel

slex { slex: "0.1", namespace: "example_cross_doc_lab", g: { color: "blue", size: 16, theme: "light", style: function () { return 'color: ' + this.color + '; font-size: ' + this.size + 'px;'; } }, layout: { "section:control": { eyebrow: "Platform Features", title: "Cross-Document State Lab · Control Panel", subtitle: "Modify any parameter below — the two independent fence blocks will sync automatically.", "grid:controls": { columns: 1, mdColumns: 3, "select:color": { label: "Text color", "$value": "g.color", options: [ { label: "Blue", value: "blue" }, { label: "Green", value: "green" }, { label: "Orange", value: "orange" }, { label: "Purple", value: "purple" } ], onchange: "g.color = String($event)" }, "slider:size": { label: "Font size", "$value": "g.size", min: 8, max: 48, step: 2, unit: "px", onchange: "g.size = Number($event)" }, "select:theme": { label: "Card theme", "$value": "g.theme", options: [ { label: "Light", value: "light" }, { label: "Dark", value: "dark" }, { label: "Info", value: "info" } ], onchange: "g.theme = String($event)" } }, "badge:note": { "$label": "'Style: ' + g.color + ' ' + g.size + 'px'", tone: "info" } } } }


## Observer Panel A (Same namespace, different fence block)

<div class="slex-prerender-placeholder" data-slex-source="c2xleDogIjAuMSIsCiAgbmFtZXNwYWNlOiAiZXhhbXBsZV9jcm9zc19kb2NfbGFiIiwKICBsYXlvdXQ6IHsKICAgICJjYXJkOmEiOiB7CiAgICAgIHRpdGxlOiAiT2JzZXJ2ZXIgUGFuZWwgQSDigJQgVGV4dCBTdHlsaW5nIiwKICAgICAgInN0YXQ6c2l6ZSI6IHsgIiRsYWJlbCI6ICInRm9udCBzaXplOiAnICsgZy5zaXplICsgJ3B4JyIsICIkdmFsdWUiOiAiZy5jb2xvciIgfSwKICAgICAgImNhbGxvdXQ6cHJldmlldyI6IHsKICAgICAgICAiJHRvbmUiOiAiZy50aGVtZSA9PT0gJ2RhcmsnID8gJ2RhbmdlcicgOiBnLnRoZW1lID09PSAnaW5mbycgPyAnaW5mbycgOiAnc3VjY2VzcyciLAogICAgICAgICIkdGV4dCI6ICJnLnRoZW1lID09PSAnZGFyaycgPyAnRGFyayBtb2RlOiBjb2xvciBzY2hlbWUgZm9yIG5pZ2h0IHJlYWRpbmcuJyA6IGcudGhlbWUgPT09ICdpbmZvJyA/ICdJbmZvIG1vZGU6IGVtcGhhc2l6ZXMgdGVjaG5pY2FsIGRldGFpbHMuJyA6ICdMaWdodCBtb2RlOiBkZWZhdWx0IGRvY3VtZW50IHJlYWRpbmcgY29sb3JzLiciCiAgICAgIH0KICAgIH0KICB9Cn0="><pre><code class="language-slex">slex: &quot;0.1&quot;,
  namespace: &quot;example_cross_doc_lab&quot;,
  layout: {
    &quot;card:a&quot;: {
      title: &quot;Observer Panel A — Text Styling&quot;,
      &quot;stat:size&quot;: { &quot;$label&quot;: &quot;'Font size: ' + g.size + 'px'&quot;, &quot;$value&quot;: &quot;g.color&quot; },
      &quot;callout:preview&quot;: {
        &quot;$tone&quot;: &quot;g.theme === 'dark' ? 'danger' : g.theme === 'info' ? 'info' : 'success'&quot;,
        &quot;$text&quot;: &quot;g.theme === 'dark' ? 'Dark mode: color scheme for night reading.' : g.theme === 'info' ? 'Info mode: emphasizes technical details.' : 'Light mode: default document reading colors.'&quot;
      }
    }
  }
}</code></pre></div>

## Observer Panel B

<div class="slex-prerender-placeholder" data-slex-source="c2xleDogIjAuMSIsCiAgbmFtZXNwYWNlOiAiZXhhbXBsZV9jcm9zc19kb2NfbGFiIiwKICBsYXlvdXQ6IHsKICAgICJjYXJkOmIiOiB7CiAgICAgIHRpdGxlOiAiT2JzZXJ2ZXIgUGFuZWwgQiDigJQgUGFyYW1ldGVyIERldGFpbHMiLAogICAgICAiZ3JpZDpwYXJhbXMiOiB7CiAgICAgICAgY29sdW1uczogMSwgbWRDb2x1bW5zOiAzLAogICAgICAgICJzdGF0OmNvbCI6IHsgbGFiZWw6ICJDb2xvciIsICIkdmFsdWUiOiAiZy5jb2xvciIgfSwKICAgICAgICAic3RhdDpzeiI6IHsgbGFiZWw6ICJTaXplIiwgIiR2YWx1ZSI6ICJnLnNpemUiLCB1bml0OiAicHgiIH0sCiAgICAgICAgInN0YXQ6dGgiOiB7IGxhYmVsOiAiVGhlbWUiLCAiJHZhbHVlIjogImcudGhlbWUiIH0KICAgICAgfSwKICAgICAgImJhZGdlOnN5bmMiOiB7ICIkbGFiZWwiOiAiJ1N5bmNlZDogJyArIGcuY29sb3IiLCAiJHRvbmUiOiAiZy5jb2xvciA9PT0gJ2JsdWUnID8gJ2luZm8nIDogZy5jb2xvciA9PT0gJ2dyZWVuJyA/ICdzdWNjZXNzJyA6IGcuY29sb3IgPT09ICdvcmFuZ2UnID8gJ3dhcm5pbmcnIDogJ2luZm8nIiB9CiAgICB9CiAgfQp9"><pre><code class="language-slex">slex: &quot;0.1&quot;,
  namespace: &quot;example_cross_doc_lab&quot;,
  layout: {
    &quot;card:b&quot;: {
      title: &quot;Observer Panel B — Parameter Details&quot;,
      &quot;grid:params&quot;: {
        columns: 1, mdColumns: 3,
        &quot;stat:col&quot;: { label: &quot;Color&quot;, &quot;$value&quot;: &quot;g.color&quot; },
        &quot;stat:sz&quot;: { label: &quot;Size&quot;, &quot;$value&quot;: &quot;g.size&quot;, unit: &quot;px&quot; },
        &quot;stat:th&quot;: { label: &quot;Theme&quot;, &quot;$value&quot;: &quot;g.theme&quot; }
      },
      &quot;badge:sync&quot;: { &quot;$label&quot;: &quot;'Synced: ' + g.color&quot;, &quot;$tone&quot;: &quot;g.color === 'blue' ? 'info' : g.color === 'green' ? 'success' : g.color === 'orange' ? 'warning' : 'info'&quot; }
    }
  }
}</code></pre></div>

**Three fence blocks**, one `namespace: "example_cross_doc_lab"`, all components share the `g` object. Change color and size in the control panel above, and the two observer panels update instantly.

---

### What does this mean?

Imagine a long Markdown document:

[Control panel — select industry/metrics/time range] ... 30 paragraphs of Markdown narrative ... [Chart A — automatically reflects control panel options] ... more analysis text ... [Chart B — different visualization of the same state]


Each ` ```slex ` block renders independently, but as long as the namespace is the same, they share state. This is useful for:

- **Technical white papers**: top selects parameters, middle analysis, bottom conclusions — all coordinated
- **Project collaboration docs**: status tracking table at top, team task cards scattered through the body
- **AI output enhancement**: multiple visualization nodes generated by a model sharing the same reasoning results

This is an extremely powerful pattern. This isn't something a "component library" can do — this is SlexKit's core design.