Koala UI

Markdown

Pro

The text of an AI reply, rendered as it streams. Half-written syntax never flashes on screen, the caret follows the last word, and only the block being written re-renders. Tables, task lists and code included, with no dependencies.

Rolling out the new pricing

The change ships behind a flag, so no customer sees it until you flip it. Three steps:

  1. Turn on pricing_v2 for the internal team.

  2. Check the checkout totals against the table below.

  3. Open it to everyone on Monday.

PlanTodayNew
Free€0€0
Solo€99€124.99
Bash
koala flags set pricing_v2 --team internal

Existing licenses keep their price. Only new checkouts see the new one.

Installation#

# One-time setup (tokens + lib helpers)npx koalaui-cli@latest init# Activate your Pro license (once per machine)npx koalaui-cli@latest login <key># Add this component (its dependencies come along)npx koalaui-cli@latest add markdown

Usage#

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

Streaming#

Set streaming while the reply arrives. An open ** or ` closes at the end, a link shows its words until the URL lands, a table waits for its divider row and the start of a code fence waits for the line to finish. Once the text is complete it parses exactly as it would have.

In a chat#

Inside a Chat MessageContent, Markdown picks up the message’s streaming and its type, so the reply reads like the rest of the thread. Set streaming once, on the message.

How do we roll out the new pricing?

Sizes#

On its own, Markdown reads as Prose. sm suits a panel or a card, md and lg a page.

size="sm"

Release notes

Version 2.4 adds density to every form control and fixes the Select focus ring.

  • Compact density for inputs

  • A faster date picker

size="md"

Release notes

Version 2.4 adds density to every form control and fixes the Select focus ring.

  • Compact density for inputs

  • A faster date picker

size="lg"

Release notes

Version 2.4 adds density to every form control and fixes the Select focus ring.

  • Compact density for inputs

  • A faster date picker

Custom elements#

components replaces what a link, an image or a code block renders to. Here a numbered link becomes a Citation chip.

This example is part of Koala UI Pro

The preview is yours to explore. Its code comes with a Pro license, paid once and used in every project.

Get the code

Have a license? Unlock it here

What it reads#

  • Headings, paragraphs, line breaks, block quotes and rules.
  • Ordered, unordered and nested lists, and GFM task lists.
  • GFM tables, with column alignment.
  • Fenced code, rendered by Code Snippet with a copy button.
  • Bold, italic, strikethrough, inline code, links, images, and bare URLs as links.
  • No raw HTML. A reply is data, not markup: a tag shows as text, and a javascript: link renders as its words.

API reference#

Markdown

Parses its text and renders it. On its own it reads as Prose; inside a MessageContent it leaves the typography to the message. Forwards native <div> props.

PropTypeDefaultDescription
children*string-The Markdown source.
streamingboolean-Set while the reply streams in: half-written syntax shows as plain text and a caret trails the last word. Inside a MessageContent, it follows the message's streaming unless set here.
size"sm" | "md" | "lg""sm"The Prose type scale. Ignored inside a MessageContent, which sets its own.
componentsMarkdownComponents-Replace what an element renders to: a, img, code (inline) and codeBlock ({ code, lang, open }). A link can open a Citation; a block can use your own highlighter.

parseMarkdown

The parser on its own: parseMarkdown(text, { streaming }) returns the blocks as data, for a table of contents, a plain-text preview or a renderer of your own.

FAQ#

react-markdown is a fine general renderer, but it parses the whole text on every token and shows half-written syntax as it arrives: a stray ** or a row of pipes until the line completes. Markdown here is built for the stream, re-renders only the block being written, and adds nothing to your dependencies.