MarkdownRenderer

Safely render CommonMark and GFM with streaming repair, link review, and shared image policy.

MarkdownRenderer is the migration path for an existing AI response view. It supports headings, emphasis, lists, quotes, task lists, tables, footnotes, fenced code highlighting, links, and images.

import { MarkdownRenderer } from "@rixx-ui/react/markdown";
import "@rixx-ui/react/styles.css";

<MarkdownRenderer
  status={streaming ? "streaming" : "complete"}
  options={{ theme: "system", locale: "en-US" }}
  urlPolicy={(url) => new URL(url).hostname.endsWith("example.com")}
  imagePolicy={({ src }) => new URL(src).hostname === "images.example.com"}
  onNavigate={(url) => router.push(url)}
>
  {accumulatedMarkdown}
</MarkdownRenderer>;

Safety behavior

• Raw HTML, MDX, scripts, styles, and generated executable behavior are not rendered.
• URL syntax and credentials are checked before host policies run.
• External HTTPS links use a review dialog by default.
• Markdown and catalog images use the same imagePolicy contract.
• A thrown urlPolicy is treated as a denial.

The status prop affects partial-Markdown repair and resource timing. It does not make rendered Markdown executable.

When to switch to RUI

Use RUIRenderer for structured layouts, charts, forms, trusted data, typed actions, or custom components. Markdown remains available inside RUI through RichText(format="markdown").