Render Markdown without raw HTML

At a glanceCopy Anchor Link

• Who: App authors rendering untrusted notes or README-like copy as React.
• What: Turn CommonMark into React elements with sanitized, inert HTML and script vectors, info-coloured links, and wrapping fences.
• Use when: When the source is Markdown and must stay safe under a strict CSP (no raw HTML, no javascript: links). The host CSP is what stops CommonMark http/https images from loading unexpected content; this wrapper still renders those as <img> with referrerPolicy=no-referrer and loading=lazy. data: image src is stripped.
• Avoid when: For page titles and kit body copy you control — use Render headings and body text without raw tags. For GFM tables or highlighted code — those are out of this wrapper.
• See also: Render headings and body text without raw tags

InstallCopy Anchor Link

pnpm add @zedtech/zedkit-ui

Latest: 2.0.1 (via changesets).

ExampleCopy Anchor Link

import { Markdown } from "@zedtech/zedkit-ui";

<Markdown>
  {`## Note

A [docs](https://example.com) link and \`code\`.`}
</Markdown>

Wraps: react-markdown, rehype-sanitize

AccessibilityCopy Anchor Link

Headings come from the source (one h1 per page). Links open in the same tab (rel="noopener noreferrer" is defense-in-depth) and use focus-ring. Only a, pre, code, and img carry extra classes. Fenced code wraps (wrap-anywhere). Info colour marks references, not primary actions.