Optizon Markdown

Streaming-safe Markdown for Optizon UI: an incremental CommonMark 0.31.2 and GitHub Flavored Markdown parser rendered straight to React, safe by default for model output, with a plugin contract for code, math and diagrams.

• Correct: every CommonMark and GFM spec example passes; tables, task lists, strikethrough, extended autolinks and footnotes included.
• Streaming: each update costs work in proportion to the new text; closed blocks never re-render; half-typed syntax never flashes.
• Safe: raw HTML shows as text, one URL policy decides every link and image, external links get rel="noopener noreferrer nofollow", and remote images wait for the reader.
• Accessible: semantic elements, task lists read as done or not done, footnotes that link both ways, dir="auto" on every block.

Use

Install it next to @optizon/ui and @optizon/tokens, at the same version, with React 19 and Tailwind CSS 4:

npm install @optizon/[email protected] @optizon/[email protected] @optizon/[email protected] react@^19 react-dom@^19

In your application stylesheet, scan the packages' source (paths are relative to the stylesheet):

@import "@optizon/tokens";
@source "../node_modules/@optizon/ui/src";
@source "../node_modules/@optizon/markdown/src";

import { UIProvider } from "@optizon/ui";
import { Markdown, MarkdownProvider } from "@optizon/markdown";

export function Reply({ text, streaming }: { text: string; streaming: boolean }) {
  return (
    <UIProvider>
      <MarkdownProvider images={{ allow: ["self"] }}>
        <Markdown source={text} streaming={streaming} headingOffset={2} />
      </MarkdownProvider>
    </UIProvider>
  );
}

Render one MarkdownProvider at the app's root and register plugins there once: codeFencePlugin() from @optizon/code, mathPlugin() from @optizon/math, diagramsPlugin() from @optizon/diagrams. The agent skill for Codex and Claude Code ships in @optizon/ui and covers Markdown too: npx @optizon/[email protected] install-skill. The guide (setup, streaming, security, settings and writing a plugin): https://github.com/optzn/ui/blob/main/docs/MARKDOWN.md

The package is ESM-only, ships compiled JavaScript, TypeScript declarations and source, and has @optizon/tokens and @optizon/ui (same version) and React 19 as peers. Licensed under Apache-2.0. The spec examples it is tested against are CC-BY-SA 4.0 (CommonMark, GFM) and BSD-2-Clause (cmark-gfm's extension tests); they are test data in the repository, not part of the package.

Documentation, examples and source: https://github.com/optzn/ui