Markdown Renderer

Sanitized CommonMark and GFM renderer with safe protocols, prefixed headings, and highlighted code fences.

Preview

This is a live example. Interact with the available controls and use the keyboard to inspect the component's states and behavior.

Release checklist

aq-ui renders CommonMark with GitHub Flavored Markdown.

Preview content is sanitized before it reaches the page.

Keyboard navigation
Light and dark themes
Server rendering
Publish the alpha

Package	Status
Registry	Ready
CLI	Ready

tsx

import { Button } from "@/components/ui/button"

export function SaveButton() {
  return <Button>Save changes</Button>
}import { Button } from "@/components/ui/button"export function SaveButton() {  return <Button>Save changes</Button>}

Loading interactive preview…

Installation

pnpm dlx aq-ui@alpha add markdown-renderer

API reference

SSR-safe

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

import { MarkdownRenderer } from "@/components/ui/markdown-renderer"

<MarkdownRenderer />

markdownComponents

constSource L84

Public const export from Markdown Renderer.

const markdownComponents: Components

MarkdownRenderer

constSource L338

Sanitized CommonMark and GFM renderer with safe protocols, prefixed headings, and highlighted code fences.

const MarkdownRenderer = React.memo(…)

MarkdownRendererProps

interfaceSource L20

Type contract for MarkdownRendererProps.

interface MarkdownRendererProps extends Omit< React.ComponentProps<"div">, "children" >

Members

Name	Type
`value`	`string`
`components?`	`Components`
`allowHtml?`	`boolean`
`sanitizeSchema?`	`Schema`
`remarkPlugins?`	`PluggableList`
`rehypePlugins?`	`PluggableList`

safeMarkdownUrl

functionSource L61

Public function export from Markdown Renderer.

const safeMarkdownUrl: UrlTransform

Parameters

Name
`url`
`key`

Registry dependencies

code-block, utils

Package dependencies

hast-util-sanitize@^5.0.2, react-markdown@^10.1.0, rehype-raw@^7.0.0, rehype-sanitize@^6.0.0, remark-gfm@^4.0.1, unified@^11.0.5

Files

components/ui/markdown-renderer.tsx