SlexKit Introduction

SlexKit renders Markdown fences marked as slex into small interactive UI. Use it for local interaction inside chat messages, documents, agent panels, and dashboards without adding a build step for those fragments.

SlexKit is v0/beta. The public surface is usable, but long-term compatibility is not yet guaranteed.

When To Use It

When Markdown needs a small amount of interaction:

• Status cards, counters, calculators, parameter panels, lightweight dashboards
• AI-generated UI fragments that should degrade to plain Markdown
• React, Svelte, Obsidian, or vanilla HTML hosts rendering the same fenced source

SlexKit is not a full application framework. It does not provide routing, server-side rendering, a data fetching layer, or a cross-platform pure JSON UI standard.

Source Format

A Slex source is a JavaScript object literal with state in g and the component tree in layout:

namespace: "intro_counter",
  g: {
    count: 0
  },
  layout: {
    "card:counter": {
      title: "Counter",
      "text:value": {
        "$text": "'Count: ' + g.count"
      },
      "button:add": {
        label: "+1",
        onclick: "g.count++"
      }
    }
  }
}

• namespace identifies the state domain
• g contains reactive state, functions, and small calculations
• layout contains component nodes keyed as type:name
• $-prefixed props are read expressions, such as "$text": "'Count: ' + g.count"
• on* props are write expressions, such as onclick: "g.count++"

The runtime also accepts a bare component tree as shorthand, but the full envelope is preferred for documentation and shared examples.

Fence Convention

Hosts must process only fences explicitly marked as slex:

<div class="slex-prerender-placeholder" data-slex-source="bmFtZXNwYWNlOiAic3RhdHVzIiwKICBsYXlvdXQ6IHsKICAgICJiYWRnZTpzdGF0ZSI6IHsgbGFiZWw6ICJSZWFkeSIsIHRvbmU6ICJzdWNjZXNzIiB9CiAgfQp9"><pre><code class="language-slex">namespace: &quot;status&quot;,
  layout: {
    &quot;badge:state&quot;: { label: &quot;Ready&quot;, tone: &quot;success&quot; }
  }
}</code></pre></div>

**Status:** Ready

The Markdown after the fence is the fallback. Plain Markdown readers show the fallback text; SlexKit-capable hosts replace the fence with interactive UI.

Plain JavaScript, JSON, or untagged code blocks must not be scanned or executed.

Runtime Modes

Trusted mode executes Slex source in the host page. Use it for application-generated content, local documents, and repository-maintained examples.

Secure mode executes untrusted or agent-generated source in a sandbox iframe. Sensitive capabilities such as network, timers, animation, and canvas are exposed only through host policy and api.*.

Use secure mode when rendering third-party or unreviewed content. See Secure Runtime Setup.

Display UI And Tool Calls

Display UI renders via slex fences or mount(). These fragments show information and local interaction but are not function calls.

ToolHost is for confirmations, option pickers, and forms that must return structured input to the host. The submit component ends a tool template and submits the result.

This separation prevents ordinary display UI from being mispackaged as tool invocations.

Core APIs

Type details and beta compatibility notes are in the Slex Specification.

Keep Reading

• Getting Started: developer integration path
• Integration: Streamdown and Obsidian host plugins
• Design Guidelines: authoring public examples and component usage
• Secure Runtime Setup: untrusted content boundary
• Component Reference: built-in component catalog
• AI / Agents: SlexKit context for models and agents