Streamdown 接入

如果 React 页面已经使用 Streamdown 渲染 Markdown，可以用 @slexkit/streamdown 接入 SlexKit。该示例复用官网的 RC 低通滤波器内容，演示 SlexKit 组件在 Streamdown 页面中的渲染方式。

本地运行：

bun run build:core
bun run --filter @slexkit/streamdown build
bun examples/dev-server.mjs streamdown

源码位于 examples/streamdown。Streamdown 与 Tiptap 示例使用同一份 RC 低通滤波器内容，便于对照两种宿主的接入方式。

打开集成指南 · 查看可运行源码

接入方式

普通 Markdown、公式、表格和非 slex 代码块继续由 Streamdown 渲染。只写状态的 slex fence 不渲染独立 UI，但会写入同一 artifact state，供后续可渲染 fence 读取。

最小配置：

import { Streamdown } from "streamdown";
import { createSlexKitRenderer } from "@slexkit/streamdown";
import "@slexkit/theme-shadcn/style.css";
import "@slexkit/streamdown/style.css";

const slexkitRenderer = createSlexKitRenderer({
  domain: "message-1",
  showChrome: false
});

export function Message({ markdown }: { markdown: string }) {
  return (
    <Streamdown plugins={{ renderers: [slexkitRenderer] }}>
      {markdown}
    </Streamdown>
  );
}

如果项目已经以 Streamdown 作为 Markdown 渲染层，使用 @slexkit/streamdown。如果宿主有自己的 Markdown parser 或 renderer，直接接入自定义 Markdown host API。