Fluxdown

为 AI 流式输出而生的 Markdown 渲染器。
高性能，高度可定制，跨平台，开箱即用。

pnpm install fluxdown

从第一段文字，到完整体验。

平滑每一段输出，照顾尚未闭合的语法。

更少重复，更快呈现

以内容块为单位缓存解析结果，复用稳定的部分，把计算留给正在变化的内容。长回答也能从容展开。

了解分块与更新

熟悉的 Markdown

支持 GFM 表格、任务列表、删除线与自动链接。写下你熟悉的语法，得到读者期待的样子。

查看 Markdown 支持

能力，按需组合

从解析到呈现，以插件组合能力。接入 remark、rehype 生态，也可以为自己的内容写一个小插件。

探索插件体系

做成你的风格

用语义化插槽、HTML 渲染与主题调整外观，继续定制平滑算法和动效。每个细节，都可以贴合你的产品。

开始定制

不被框架限制

框架无关的 Core 管理解析与响应式更新。直接构建自己的渲染方式，或从开箱即用的 React、Vue、Svelte、Angular、React Native、Lynx、Solid 与 Taro 组件开始。

认识 Fluxdown Core

不止于文字

公式渲染、代码高亮、HTML 过滤与链接安全检查，一起照顾真实内容。公式与高亮按需加载，减轻首次加载的负担。

浏览预设能力

几行代码，就能开始。

选择你的框架，把收到的文字交给 Fluxdown。

import { Fluxdown } from 'fluxdown';

type MessageProps = {
  text: string;
  isStreaming: boolean;
};

// text 是截至目前收到的完整消息
export function Message({ text, isStreaming }: MessageProps) {
  return (
    <Fluxdown
      text={text}
      streaming={isStreaming}
    />
  );
}

<script setup lang="ts">
import { Fluxdown } from '@fluxdown/vue';

// text 是截至目前收到的完整消息
defineProps<{
  text: string;
  isStreaming: boolean;
}>();
</script>

<template>
  <Fluxdown :text="text" :streaming="isStreaming" />
</template>

<script lang="ts">
  import { Fluxdown } from '@fluxdown/svelte';

  type MessageProps = {
    text: string;
    isStreaming: boolean;
  };

  // text 是截至目前收到的完整消息
  let { text, isStreaming }: MessageProps = $props();
</script>

<Fluxdown {text} streaming={isStreaming} />

import { Component, input } from '@angular/core';
import { Fluxdown } from '@fluxdown/angular';

@Component({
  selector: 'app-message',
  imports: [Fluxdown],
  template: `<fluxdown [text]="text()" [streaming]="isStreaming()" />`,
})
export class Message {
  // text 是截至目前收到的完整消息
  readonly text = input.required<string>();
  readonly isStreaming = input(false);
}

import { Fluxdown } from '@fluxdown/react-native';

type MessageProps = {
  text: string;
  isStreaming: boolean;
};

// text 是截至目前收到的完整消息
export function Message({ text, isStreaming }: MessageProps) {
  return (
    <Fluxdown
      text={text}
      streaming={isStreaming}
    />
  );
}

import { Fluxdown } from '@fluxdown/lynx';

type MessageProps = {
  text: string;
  isStreaming: boolean;
};

// text 是截至目前收到的完整消息
export function Message({ text, isStreaming }: MessageProps) {
  return (
    <Fluxdown
      text={text}
      streaming={isStreaming}
    />
  );
}

import { Fluxdown } from '@fluxdown/solid';

type MessageProps = {
  text: string;
  isStreaming: boolean;
};

// text 是截至目前收到的完整消息
export function Message(props: MessageProps) {
  return (
    <Fluxdown
      text={props.text}
      streaming={props.isStreaming}
    />
  );
}

import { Fluxdown } from '@fluxdown/taro';

type MessageProps = {
  text: string;
  isStreaming: boolean;
};

// text 是截至目前收到的完整消息
export function Message({ text, isStreaming }: MessageProps) {
  return (
    <Fluxdown
      text={text}
      streaming={isStreaming}
    />
  );
}

阅读接入指南