hexmora/fluxdown

English | 简体中文

Documentation | Playground

A reactive Markdown rendering library built for streaming.

Render Markdown as it arrives, from AI chat responses to live previews. Fluxdown keeps growing content responsive and gives you control over how it looks and behaves.

Start with the React component, or use the framework-independent core to build your own renderer.

• High performance. Reuses unchanged blocks and limits rendering work as new text arrives.
• Fully reactive. Text, configuration, and plugins react to state changes, keeping the output up to date without manual refreshes.
• Highly customizable. Bring your own styles and components, from links to code blocks.
• Pluggable. Extend Markdown syntax and rendering with composable plugins.
• Framework-independent core. @fluxdown/core is built on the framework-free stative package and can power renderers for different UI frameworks.

The examples below use the React component provided by the fluxdown package.

In an existing React project:

npm install fluxdown

import { Fluxdown } from "fluxdown";

export default function App() {
  return <Fluxdown text={"# Hello, Fluxdown\n\nMarkdown that **keeps up**."} />;
}

Pass the accumulated Markdown to text as chunks arrive. Enable streaming to reveal new content gradually, with any streaming API.

import { Fluxdown } from "fluxdown";

export function StreamingMessage({ text }) {
  return <Fluxdown streaming text={text} />;
}

Use "light" (default), "dark", or [preset, overrides]. Partial token configurations extend light.

<Fluxdown
  text="# Your Markdown"
  theme={["dark", { tokens: { heading: { h1: { fontSize: "2.25rem" } } } }]}
/>

Bug reports, documentation improvements, and pull requests are welcome. When reporting a bug, include a minimal reproduction and the Markdown input that triggers it.

See CONTRIBUTING.md for development commands and pull request guidelines.

MIT