flowdown renders an AI reply in React as it streams: GitHub Markdown plus steps, tabs, figures, diagrams and math. Its own parser, no dependencies, 32 KB.
npm install @localix-ai/flowdownReact 18 and 19 · MIT · Docs · also outside React
npm install @localix-ai/flowdown
streaming while the text is still arriving.import { Markdown } from '@localix-ai/flowdown'
import '@localix-ai/flowdown/styles.css'
export function Reply({ text, done }) {
return <Markdown streaming={!done}>{text}</Markdown>
}
answerFormatPrompt() to the system prompt, and it writes these forms.The same reply, outside React:
import { renderToHtml } from '@localix-ai/flowdown/static'
const html = renderToHtml(reply)
import { mount } from '@localix-ai/flowdown/dom'
const view = mount(document.querySelector('#reply'))
view.update(text, { streaming: true })
import { renderToAnsi } from '@localix-ai/flowdown/tui'
process.stdout.write(renderToAnsi(reply))
| Streaming 100k characters | Time |
|---|---|
| flowdown | 0.14 s |
| markdown-to-jsx | 2.4 s |
| Streamdown | 6.5 s |
Read more
Six things it does
Streaming
A reply arrives mid-word. Unfinished **bold, a half-typed link and an open code fence are repaired as they come, so raw syntax never shows and nothing flickers when it closes.
arrivesis drawn asThe **answer isThe answer is (bold)see [the guisee the gui```ts⏎const a =a code block, still open| a | b |⏎| -a table, its first row$$ \frac{1held until it can be setonly the block being written is parsed again
Dialect
Steps, tabs, headline figures, the case for and against, callouts, folded sections, sources and file trees, on top of GitHub Markdown. Each is a quote line and a list: where it is not rendered, it still reads.
git log --oneline --first-parent mainbun run deploy --ref v1.4.2A revert builds and ships a new release, which takes minutes. A rollback points current at a
release that is already built.
Simplicity is prerequisite for reliability. — Edsger W. Dijkstra
Read more
Speed
A 100k-character reply streams in 0.14 s of main-thread time; the next fastest of six React renderers takes 2.4 s. No update takes more than 5 ms, so a stream never drops a frame.
streaming, mschat 5kcode 50kanswer 100kflowdown1249138markdown-to-jsx15632,393markstream411,0765,714Streamdown515,9266,529marked-react37807,709react-markdown2133,808stopped32 KB gzipped, one package, no dependencies
Targets
As HTML text on a server, in a page with no framework, as a <flow-down> element, or as the rows of a terminal: this one is @localix-ai/flowdown/tui, live. One parser draws them all, and none of these entries imports React.
Move the API to Bun▌ Warning▌ Back up package-lock.json first.1 Install│ Run bun install.│2 Swap the scriptsReplace node with bun in package.json.src/server.tsimport { serve } from 'bun'serve({ port: 3000, fetch: () => new Response('ok') })- "start": "node dist/server.js"+ "start": "bun src/server.ts"│ Check │ Before │ After │├────────────┼────────┼───────┤│ Cold start │ 410 ms │ 95 ms ││ p95 │ 38 ms │ 21 ms │✓ lockfile backed up☐ deploy to stagingThroughput is r = n / t, and over k samplesr̄ = 1/k ∑ᵢ₌₁ᵏ rᵢFurther reading[1] Bun runtime — what differs from Nodehttps://bun.sh/docs/runtime
Diagrams and math
A mermaid fence is drawn once it is whole, in the page’s colours, and opens in a viewer that zooms and pans: try it. Formulas are set by KaTeX. Both load only for a reply that has one.
The page draws while the model writes:
sequenceDiagram
participant You
participant App
participant Model
You->>App: Send a message
App->>Model: The conversation
loop Every token
Model-->>App: The text so far
App-->>You: Draw the last block again
end
Model-->>App: DoneHover the diagram for its toolbar: Enlarge opens a viewer that zooms and pans.
With $n$ characters arriving at $r$ a second, the reply takes
$$ t = \frac{n}{r} $$
and each update costs the last block, not the whole text.
Safety
A model’s text is untrusted. Raw HTML is parsed and sanitized, scripts and handlers are dropped, and a link keeps only a safe protocol. It needs no setup and no second library.
the reply<img src=x onerror="steal()">[click](javascript:alert(1))<script>fetch('/token')</script>the page<img src="x"/><p><a>click</a></p>(nothing)
v0.5.2
The package's repository is localixai/flowdown: the links of its page on npm and of its README
1 change
v0.5.1
document.querySelector('flow-down') is typed as the element, so markdown and streaming are there without a cast once @localix-ai/flowdown/element is imported. - 72542f8: A long reply streams faster in Chrome, Edge and Node. Each token, the parts that remember a growing text first check that the new text continues the last one. That check was startsWith on a slice, which V8 walks a character at a time: seventy microseconds on a 35 KB reply, three times per token. It is === on two slices now, which V8 compares as memory, in one microsecond. Bun and Safari (JavaScriptCore) were already fast either way, which is why the benchmark, run on Bun, never saw it.
5 changes
v0.5.0
<Markdown> draws what it drew. It now loads 31.7 KB gzipped, from 30.5: the renderer is shared by every target.
3 changes
v0.4.3
A shorter README and package description
1 change
v0.4.2
Two replies that stream at once no longer slow each other down. The scan for a fence left open remembered one text for the whole page, so each reply made the other's start over on every token: two 100k-character replies side by side cost twice what they cost one after the other. Each <Markdown> now has a scan of its own.
1 change
Free · MIT license
npm install @localix-ai/flowdown. React is its only peer, and only for <Markdown>.
Import @localix-ai/flowdown/styles.css once, then <Markdown streaming={!done}>{text}</Markdown>.
Add answerFormatPrompt() from @localix-ai/flowdown/prompt to the system prompt.