Fluxdown for React

Streaming Markdown, ready for your React app.

fluxdown renders Markdown with base styles, code highlighting, and copy buttons included. It supports GFM tables, task lists, strikethrough, and autolinks. During generation, it can smooth incoming text, repair unfinished syntax, and fade in trailing characters.

Documentation · Playground · 简体中文

Install

In a React 18 or 19 app:

pnpm add fluxdown

Render a message

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, accumulating chunks in your request handler if necessary. Set isStreaming to false when the request completes, is cancelled, or fails. Fluxdown then shows all received text and stops its streaming effects. Your app handles the request, cancellation, and errors.

For static Markdown, use <Fluxdown text={text} />. In a message list, give each component a stable message ID as its key.

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

import "fluxdown/styles.css";

Make it your own

streaming={true} enables trailing repair and smooth output. Add an optional visual effect:

<Fluxdown text={text} streaming={isStreaming && { effect: "shad" }} />

Documentation

• Quick start
• Streaming content
• Styling guide
• Configuration
• Using and writing plugins

For a custom renderer outside React, see @fluxdown/core.

Contributing and license

See CONTRIBUTING.md. Licensed under MIT.