Markdown

A Markdown text on the tokens — headings, lists and tasks, quotes, tables, links, images, footnotes, fenced code in CodeBlock — parsed by TanStack Markdown, safe by default (raw HTML is never rendered), with a streaming mode for a text that arrives in pieces: an AI answer. React Native draws the same AST in Text and View.

Web + MobileBetaData display

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

Why it is here. The AI answers of Orazaka's chat and the written help of every product: rendered Markdown that streams without half-written lines (PS4).

When to use

An AI answer, a message, a release note, a description written by a person or a model.
A text that arrives in pieces (streaming): the unfinished end is closed, so no ** or half a link ever shows.
Content that comes from a user or a model, which must never run HTML.

When not to use

For the documentation of a product: its own MDX pipeline (Fumadocs on krizaka.com) renders it, with components.
For one sample of code on a page.Use instead: Code block
For a few words with a bold part: write the JSX.

Installation

Install

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Markdown, parseSource, healStreaming } from "@krizaka/ui/markdown";

Examples

A document

A heading, a list, a table and a titled code block.

What changed in 3.9

The queue now retries a failed upload with a backoff, and pause keeps its place.

Pause, resume and retry per file
A 429 waits for its Retry-After

Entry	Size
`@krizaka/pacer`	2 kB

tsuploads.ts

const queue = createQueue({ retries: 3 });

An AI answer arriving

streaming: the end of the text is closed at every cut, with a caret; the button plays it from the start.

Use a queue, not a loop: createQueue runs two files at once, retries a failure after a pause and lets you pause one file.

Props

A Markdown text on the tokens: headings, paragraphs, lists (and tasks), quotes, tables, code, links, images, footnotes.

Prop	Type	Default	Description
`children`required	`string`	—	The Markdown source.
`codeLabels`	`{ copy: string; copied: string; }`	—	The words of the copy button of the code blocks, passed translated. Without them a code block has no copy button.
`headingIds`	`boolean`	—	Gives every heading an `id`, for `#section` links.
`linkAs`	`ElementType<DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, keyof IntrinsicElements>`	—	Your router's link (Next's `Link`) for the links that stay on the site (`/docs`, `#section`); the others are plain `a`.
`streaming`	`boolean`	—	The text is still arriving: the unfinished end is closed and a caret marks the end.

Accessibility

The structure is real elements: headings in order, lists, a table with column headers, figure and figcaption for a titled code block.
A task list is disabled checkboxes inside their labels, so each item reads as done or not done.
While streaming, the root carries aria-busy; the caret is decorative (a CSS pseudo-element) and still under reduced motion.
Raw HTML in the source is shown as text, and links or images with an executable address (javascript:, data:) are dropped.

Keyboard

Keys	Action
`Tab`	Moves through the links and the code blocks (which scroll sideways with the arrow keys).

Best practices

Pass the words of the code blocks' copy button with codeLabels (translated); without them a block has no button.
Give your router's link to linkAs: the links that stay on the site go through it, the others open as plain links with rel="noopener noreferrer".
Set streaming while the text is arriving and drop it when it is complete: the caret goes away and the text is read as written.
Write the source in the user's language; the component adds no words of its own.
On a phone, give onLinkPress to open a link in your app's browser; the default opens http(s) links with the system.

Generated from the code of @krizaka/ui 3.9.0: its meta.ts, its examples and its types.Edit this documentation on GitHub