SlexKit

Streaming Live EXpressions Kit

"Docs as tools, tools as docs" renders explicit Markdown fences as stateful UI blocks.

SlexKit is an interactive UI runtime for Markdown hosts. Write explicit slex fences in the document; the runtime mounts forms, metrics, calculators, and previews without adding a build step for each artifact.

Runtime scope

  • Zero-build — Write slex fences directly in Markdown; the host loads the runtime and CSS.
  • Streaming — Works with message and document streams; fences mount as content arrives.
  • Reactive state — Components in one artifact can share state and update together.
  • Component set — Built-in document components: cards, forms, tables, code blocks, tabs, and more.
  • Secure sandbox — Run untrusted content in a secure runtime isolated from the host page.
  • Tool-call rendering — ToolHost renders confirmations, choices, and forms as submit-ready UI.

Quick Example

Write an interactive calculator in Markdown:

```slex
{
  namespace: "seo_home_calculator",
  g: { price: 99, qty: 3 },
  layout: {
    "row:inputs": {
      "input:price": {
        type: "number",
        label: "Price",
        "$value": "g.price",
        onchange: "g.price = Number($event || 0)"
      },
      "input:qty": {
        type: "number",
        label: "Qty",
        "$value": "g.qty",
        onchange: "g.qty = Number($event || 0)"
      },
      "stat:total": {
        label: "Total",
        "$value": "g.price * g.qty"
      }
    }
  }
}
```

Get Started

  • Introduction — Learn about SlexKit's design philosophy
  • Quick Start — Get up and running in 5 minutes
  • Component Docs — Browse all available components
  • Examples — Browse use-case examples
  • npm — Install with npm install slexkit
  • GitHub — Source code and contributions

AI / LLM Documentation

Index, full context, and MCP entry points for agents:

MCP server: npx -y @slexkit/mcp (read-only: docs search, examples browsing, Slex source validation)