Documentation
flowdown docs
How to render a streaming reply with flowdown: the dialect a model writes, the React component, the targets outside React, and the reference.
Start
What flowdown is, a first reply on the page, and how it compares.
- IntroductionUltrafast, lightweight streaming Markdown for React and AI replies: its own parser, no dependencies, 31.7 KB gzipped, and the fastest to stream of six React renderers. It renders GitHub Markdown…
- Getting startedInstall flowdown, render a document, stream a reply and teach the model the dialect.
- Compared with similar librariesflowdown next to five other React Markdown renderers: Streamdown 2.7, react-markdown 10, markdown-to-jsx 9.10, markstream-react 2.0 and marked-react 4. Each one is set up the way its own README sets…
Writing
The forms a model can write, the prompt that teaches them, and what the parser passes.
- SyntaxEverything GitHub Markdown has works: headings, emphasis, lists, task lists, tables, footnotes, strikethrough, autolinks, code. On top of it, the dialect adds forms for what a plain list or heading…
- PromptingA model writes the forms it was told about and no others. flowdown/prompt holds the instructions that teach it the dialect, ready to place in a system prompt:
- Conformanceflowdown reads Markdown with its own parser. This page is what that parser is held to: every example of the specifications is run, and every piece of syntax below is drawn and looked for in the…
Rendering
A reply while it streams, its look, its components, and what a reply may not do.
- StreamingA model's reply arrives a few characters at a time. Rendering it naively has two problems: the whole reply is parsed again on every token, and its unfinished end flashes raw syntax — **bo shows two…
- StylingOne stylesheet, about 4 KB compressed, with no framework behind it. Every rule is scoped to the .flowdown element the renderer draws, so it touches nothing else on the page.
- Componentscomponents maps an element to the React component that draws it, the map react-markdown made familiar:
- MathMath is off by default: $…$ stays text and KaTeX is not in the page. With it on, three ways of writing a formula are typeset, the three GitHub reads: $…$ in a line, $$…$$ on lines of its own, and a…
- DiagramsA ```mermaid fence is a diagram. Without a Mermaid loader it is shown as its source; pass one to draw it:
- HighlightingHighlighting is off by default: fenced code is printed as plain text, with its language and a copy button above it. Pass a highlighter to colour it:
- SecurityA model's reply is untrusted text: it repeats what it read on a web page, in a file or in another user's message. flowdown renders it without running anything it contains. This page lists exactly…
Beyond React
The same reply as HTML text, a page, a custom element or a terminal, and in a remark pipeline.
- Other targets<Markdown> is one of five ways the package draws a reply. All of them read the same text with the same parser and the same dialect, and all are in the one package: an import path picks the target…
- Extensions and remarkflowdown reads Markdown with a parser of its own: <Markdown> has no dependencies. There are two ways to go beyond what it draws:
Recipes
A chat on the AI SDK, a docs site, and moving from another renderer.
- Vercel AI SDKA chat that streams the model's reply into <Markdown>, written for AI SDK 7 (ai and @ai-sdk/react) and the Next.js App Router. Any other transport works the same way: give <Markdown> the whole text…
- A documentation siteA site of Markdown pages, rendered with React and prerendered to HTML, the pages kept as Markdown files beside the code. This recipe shows the parts that are about flowdown.
- MigratingMoving from react-markdown or Streamdown: what maps one to one, what moves to CSS, and what has no equivalent.
Reference
Every export of every entry.