markdown-document-renderer

Render Markdown documents to styled HTML or PDF.

The converter uses Pandoc for markdown-to-HTML and Playwright/Chromium for PDF output. HTML is the default emit mode.

Fenced ```mermaid code blocks are rendered to inline SVG before the final HTML/PDF is produced, so generated HTML is static and self-contained — no browser-side Mermaid runtime is required when viewing the output.

Install

bun add markdown-document-renderer

Pandoc must also be installed and available on PATH.

For PDF output or documents that contain Mermaid diagrams, install Playwright's Chromium browser once in the consuming environment:

bunx playwright install chromium

CLI

markdown-render document.md
markdown-render document.md --emit pdf
markdown-render document.md --emit both
markdown-render document.md --preset coral
markdown-render document.md --preset tech-coral
markdown-render document.md --preset maia-mauve
markdown-render document.md --preset tech-docs
markdown-render document.md --emit html --output out/document.html
markdown-render document.md --emit both --html-output out/document.html --pdf-output out/document.pdf

Options:

• --emit <html|pdf|both>: output format. Defaults to html.
• --preset <name>: style preset. Defaults to coral.
• --list-presets: print available presets.
• -o, --output <path>: output path for single emit modes.
• --html-output <path>: explicit HTML output path.
• --pdf-output <path>: explicit PDF output path.
• --exact-colors: use screen color media when generating PDF.

Library

import { renderMarkdown } from "markdown-document-renderer";

await renderMarkdown({
  input: "document.md",
  emit: "both",
  preset: "coral"
});

Mermaid Diagrams

Fenced code blocks tagged mermaid are rendered to inline SVG figures during conversion:

```mermaid
graph TD
  A --> B
```

Behavior:

• Diagrams are rendered offline through the bundled mermaid runtime, loaded into the Playwright Chromium instance the package already requires.
• The resulting HTML embeds static <svg> markup wrapped in <figure class="mermaid-diagram">; no Mermaid JavaScript is shipped to the viewer.
• Documents without mermaid fences skip launching Chromium when emitting HTML only.
• Invalid Mermaid syntax fails the render with a message such as Mermaid diagram #2 failed: ....

Presets

The first bundled preset is coral. It is a compact A4 document style and is the default.

The tech-coral preset keeps the same compact document density as coral while using the shared mauve-neutral color schema.

Tailwind CSS v4 is the shared styling foundation for compiled presets. Preset sources live in presets/source/*.preset.css, import shared source files such as presets/source/shadcn-document.css, and compile to presets/<name>.css.

The maia-mauve preset follows the matching shadcn preset:

• style: base-maia
• base/theme/chart color: mauve
• font: figtree
• radius: default
• menu accent/color: subtle / default

The tech-docs preset is a responsive technical-documentation theme tuned for both desktop and mobile screens:

• system font stack with monospaced code (no font bundle required)
• fluid 820px content column with mobile-friendly padding and sm/md/lg breakpoints
• horizontally scrollable code blocks and tables on narrow viewports
• mauve-neutral palette with light and .dark token sets
• falls back to A4 page styling for PDF output

The compiled CSS files under presets/*.css are what the renderer embeds. Rebuild them after changing preset sources:

bun run build:css

Publishing

Before publishing, update name, version, and author metadata in package.json if needed.

bun install
bun run build:css
bun run build
npm publish --access public