fluxdown

Fluxdown — Streaming Markdown for AI apps

Website · Playground · Documentation · 简体中文

Fluxdown renders streaming Markdown for AI chat and live writing in React, Vue 3, Svelte 5, Angular, React Native, React Lynx, Vue Lynx, SolidJS, Taro, and Uni App. Its shared core keeps content readable from unfinished syntax to the final response.

• Smooth streaming. Reveal incoming text gradually and handle unfinished links, emphasis, and code.
• Less repeated work. Block-level caching reuses stable content as the message grows.
• Familiar Markdown. Render GFM tables, task lists, strikethrough, and autolinks, with code highlighting and optional math.
• Adaptable presentation. Customize themes, replace components, or extend parsing and rendering with plugins.
• A framework-independent core. Share parsing, syntax repair, and reactive content blocks across frameworks, or build your own renderer.

Get started

In a React 18 or 19 app:

pnpm add fluxdown

import { Fluxdown } from "fluxdown";

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

export function Message({ text, isStreaming }: MessageProps) {
  return <Fluxdown text={text} streaming={isStreaming} />;
}

Pass the full message received so far as text. Set isStreaming to false when generation finishes, is cancelled, or fails. For static content, omit streaming.

If your bundler does not load the styles automatically, add this to your app’s global style entry:

import "fluxdown/styles.css";

See the quick starts for React, Vue 3, Svelte 5, Angular, React Native, React Lynx, Vue Lynx, SolidJS, Taro React, and Uni App for more examples.

Packages

Package	Use it for
fluxdown	Ready-to-use Markdown rendering in React.
@fluxdown/vue	Ready-to-use Markdown rendering in Vue 3.
@fluxdown/svelte	Ready-to-use Markdown rendering in Svelte 5.
@fluxdown/angular	Ready-to-use Markdown rendering in Angular.
@fluxdown/react-native	Ready-to-use Markdown rendering in React Native.
@fluxdown/react-lynx	Ready-to-use Markdown rendering in React Lynx.
@fluxdown/vue-lynx	Ready-to-use Markdown rendering in Vue Lynx.
@fluxdown/solid	Ready-to-use Markdown rendering in SolidJS.
@fluxdown/taro	Ready-to-use Markdown rendering in Taro React.
@fluxdown/uni-app	Ready-to-use Markdown rendering in Uni App x Vapor.
@fluxdown/core	Parsing, repair, and reactive content blocks for a custom renderer.
stative	Composable state and derived computations, also used by Core.

Documentation

• React streaming — connect incoming text and control streaming effects.
• React styling — adjust themes, typography, and layout.
• React plugins — customize syntax, content, and interactions.
• Core — work with reactive content blocks directly.
• Stative — create and compose state flows.

Contributing

Bug reports, documentation improvements, and pull requests are welcome. Use issues to report bugs or discuss ideas. A minimal reproduction helps us investigate a problem.

See CONTRIBUTING.md for development setup and pull request guidelines. Report vulnerabilities privately as described in SECURITY.md.

Contributors

Thanks to everyone who contributes code, documentation, bug reports, and ideas.

License

MIT