flowdown

Ultrafast, lightweight streaming Markdown for React and AI replies
Its own parser · 0 dependencies · 32 KB gzipped · 17× faster on a long stream

flowdown.dev · Get started · Syntax · API · Comparison

_{One reply, streamed twice: by <Markdown> on a page and by @localix-ai/flowdown/tui in a terminal.}

GitHub Markdown, plus the forms a model can write and a reader can scan: steps, tabs, headline figures, pros and cons, callouts, folded sections, sources, file trees, titled code, diagrams and math. It is drawn as the text arrives, without flicker or raw syntax showing.

npm install @localix-ai/flowdown

import { Markdown } from '@localix-ai/flowdown'
import '@localix-ai/flowdown/styles.css'

export function Reply({ text, done }: { text: string; done: boolean }) {
  return <Markdown streaming={!done}>{text}</Markdown>
}

<Markdown> needs React 18 or 19. A model writes the forms once its system prompt has the dialect: answerFormatPrompt() from @localix-ai/flowdown/prompt is that text (prompting).

Why

• Fast. A 100k-character reply streams in 0.14 s. The next fastest renderer takes 2.4 s and Streamdown 6.5 s.
• Linear. A reply four times longer costs about three times more, not sixteen, and no update takes more than 5 ms.
• Repairs a reply mid-stream. Unfinished **bold, half-typed links and open code fences never show their raw syntax.
• Complete. Its parser passes every example of CommonMark and of GitHub's extensions.
• Light. One package with no dependencies, 32 KB gzipped, styled without Tailwind.
• Safe. Raw HTML from a reply is sanitized, and links are held to safe protocols.

Every figure, its method and where another renderer suits better are in the comparison.

Beyond React

The same reply, from the same package, by import path. None but the first imports React.

Import	Draws
@localix-ai/flowdown	React elements
@localix-ai/flowdown/static	HTML text, for a server or an email
@localix-ai/flowdown/dom	a page with no framework, kept up to date in place
@localix-ai/flowdown/element	<flow-down>, for Vue, Svelte, Solid or Angular
@localix-ai/flowdown/tui	the rows of a terminal

Other targets has each one's options.

Documentation

Everything is at flowdown.dev: getting started · syntax · prompting · streaming · styling · components · math · diagrams · highlighting · security · extensions · API · releases

Development

bun install
bun run test     # the library's tests
bun run check    # the build's exports, types and entry isolation
bun run bench    # the benchmarks, against other renderers

The library is in packages/flowdown, the documentation in docs/, the site in site/ and the benchmarks in bench/. How to work on it: CONTRIBUTING.md.

License

MIT