Markdown

Headless Markdown renderer. Bring your own parser (remark / marked) — Wire UI exposes the render parts via the components map so you control every element. Pass a pre-parsed nodes tree, or content plus a parse function.

Features

Example

npm i @wire-ui/react

import { Markdown } from '@wire-ui/react'
import type { MarkdownNode } from '@wire-ui/react'
 
const nodes: MarkdownNode[] = [
{ type: 'heading', depth: 2, children: [{ type: 'text', value: 'Wire UI' }] },
{ type: 'paragraph', children: [{ type: 'text', value: 'A headless library.' }] },
]
 
<Markdown nodes={nodes} />

import { Markdown } from '@wire-ui/react'
import type { MarkdownComponents } from '@wire-ui/react'
 
const components: MarkdownComponents = {
  heading: ({ children }) => <h2 className="mb-2 text-lg font-semibold text-black">{children}</h2>,
  paragraph: ({ children }) => <p className="mb-3 text-sm leading-relaxed text-[#374151]">{children}</p>,
  strong: ({ children }) => <strong className="font-semibold text-black">{children}</strong>,
  inlineCode: ({ node }) => (
    <code className="rounded border border-black bg-[#f5f5f5] px-1 py-0.5 font-mono text-[0.8em] text-black">
      {node.value}
    </code>
  ),
  code: ({ node }) => (
    <pre className="overflow-x-auto rounded-[8px] border border-black bg-black p-3 font-mono text-xs text-white">
      <code>{node.value}</code>
    </pre>
  ),
}
 
<Markdown
  nodes={nodes}
  components={components}
  className="rounded-[8px] border border-black bg-white p-5"
/>

Styling

Markdown ships unstyled, semantic HTML. The cleanest way to style it is to override renderers through the components map — each entry receives { node, children } and returns your own element. Overrides merge over the built-ins, so you only need to supply the node types you care about.

The default renderers set a few data attributes you can also target with CSS: data-inline on inline code, data-language on fenced code, and data-task / data-checked on task-list items.

/* Default fenced-code block */
pre[data-language] code { font-family: ui-monospace, monospace; }
 
/* Inline code */
code[data-inline] { background: #f5f5f5; padding: 0 0.25rem; }
 
/* Task-list items */
li[data-task]    { list-style: none; }
li[data-checked] { text-decoration: line-through; }

Wiring a real parser

parse turns a raw string into the normalized node tree. Wrap remark (whose mdast output matches the MarkdownNode shape) or map another parser’s output onto it.

import { Markdown } from '@wire-ui/react'
import { unified } from 'unified'
import remarkParse from 'remark-parse'
 
const parse = (content: string) =>
  unified().use(remarkParse).parse(content).children
 
<Markdown content="# Hello\n\nWorld" parse={parse} />

When content is provided without parse, the raw string is rendered as a single paragraph as a graceful fallback.

Markdown props

Markdown also accepts all standard <div> HTML attributes (except children).

MarkdownNode

Component props (renderer)

Each entry in components is a component receiving these props:

Data attributes

These come from the built-in renderers; supply your own via components to change them.