@xemahq/ui-markdown

@xemahq/ui-markdown Opt-in rich Markdown renderer for the Xema frontend. xema.dev

Website · npm

@xemahq/ui-markdown

Opt-in rich Markdown renderer for the Xema frontend.

Overview

A Layer 1 SDK/UI package that ships one component — MarkdownRenderer — with the same rich rendering the Xema host uses: GitHub-flavoured Markdown, Mermaid diagrams (with fullscreen), syntax-highlighted code blocks with copy-to-clipboard, and knowledge-base deep links. It is deliberately kept out of @xemahq/ui-kernel so its heavier dependencies (Mermaid, react-markdown, react-syntax-highlighter) never bloat biomes that don't need them. It carries no bundler, router, or host-specific wiring — internal-link navigation is surfaced as an optional callback, so the same component renders identically under any host.

When to use it

• Use it in a biome page that renders authored or agent-produced Markdown and wants Mermaid diagrams, highlighted code, and tables out of the box.
• Reach for it instead of hand-rolling a renderer when you need visual parity with the built-in Xema surfaces.
• Skip it when a page only shows short, plain text — @xemahq/ui-kernel already covers basic content styling.

Installation

pnpm add @xemahq/ui-markdown

Usage

import { MarkdownRenderer } from '@xemahq/ui-markdown';
import { useRouter } from 'next/navigation';

function ArticleBody({ markdown }: { markdown: string }) {
  const router = useRouter();

  return (
    <MarkdownRenderer
      content={markdown}
      // The component never imports a router; the host drives in-app
      // navigation when an internal link is clicked.
      onInternalLink={(href) => router.push(href)}
    />
  );
}

The renderer resolves the styling classes against the host theme at render time, which is what gives it parity with the built-in surfaces. Optional props tune the output: compact for narrow rails, framed for the article card, wrapCodeBlocks for soft-wrapped code, diagramMap to inline named Mermaid diagrams, basePath to resolve kb:// knowledge-base links, and resolveInternalHref to map relative links to in-app paths.

Peer requirements

• react — the shared component model.

License

Apache-2.0 Xema — xema.dev