mcp-md-html-pdf

MCP server that turns Markdown into branded HTML and PDF documents.

What it does

Takes your markdown content + your brand (logo, colors, fonts) and produces a self-contained HTML document (~10 KB) that:

• Opens on any device — phone, tablet, desktop
• Sends via WhatsApp, email, Slack — recipient clicks and sees it
• Prints to A4 — clean layout with proper margins and page breaks
• Looks like it was designed by a professional

No accounts. No subscriptions. No export workflows.

Setup

Step 1: Create your brand

Create a folder for your brand (e.g. ~/my-brand/) and put your brand.json in it:

{
  "name": "Your Company",
  "tagline": "We build great things.",
  "web": "yourcompany.com",
  "email": "[email protected]",
  "logo": "./logo.svg",
  "icon": "./icon.svg",
  "colors": {
    "primary": "#1E3A5F",
    "accent": "#C9A84C",
    "muted": "#7F8C8D",
    "surface": "#F4F6F7"
  },
  "fonts": {
    "heading": "Georgia, serif",
    "body": "-apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif"
  },
  "style": "modern",
  "footer": {
    "showContact": true,
    "note": ""
  }
}

Put your logo file (SVG or PNG) in the same folder. It gets automatically converted to base64 and embedded into the HTML — the output is always a single self-contained file.

All fields are optional. You can start with just name and colors and add the rest later.

Brand fields

| Field | What it does | |---|---| | name | Company name — shown in header and footer | | tagline | Short tagline below the logo | | web, email | Shown in footer (if footer.showContact is true) | | logo | Path to logo file (SVG, PNG) — shown in document header | | icon | Path to small icon — shown in document footer | | colors.primary | Headings, borders, strong elements | | colors.accent | Links, highlights, accent lines | | colors.muted | Captions, labels, secondary text | | colors.surface | Background of boxes, table headers | | fonts.heading | Font stack for headings (h1–h4) | | fonts.body | Font stack for body text | | style | Document style preset (see below) | | footer.showContact | Show web/email in footer | | footer.note | Small note at the bottom (e.g. "Confidential") |

Available fonts

Headings (serif): Georgia, Palatino, Cambria, Times New Roman Headings (sans-serif): System Sans, Calibri, Trebuchet, Verdana Body (sans-serif): System Sans, Calibri, Verdana Body (serif): Georgia, Palatino, Cambria

Step 2: Add the MCP server

Claude Code

Add to ~/.claude/settings.json or .mcp.json in your project:

{
  "mcpServers": {
    "mcp-md-html-pdf": {
      "command": "npx",
      "args": ["-y", "mcp-md-html-pdf", "mcp"],
      "env": {
        "MODDOC_BRAND": "/absolute/path/to/brand.json"
      }
    }
  }
}

Claude Desktop

Add to Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json on Mac, %APPDATA%\Claude\claude_desktop_config.json on Windows):

{
  "mcpServers": {
    "mcp-md-html-pdf": {
      "command": "npx",
      "args": ["-y", "mcp-md-html-pdf", "mcp"],
      "env": {
        "MODDOC_BRAND": "/absolute/path/to/brand.json"
      }
    }
  }
}

VS Code

Add to .vscode/mcp.json:

{
  "servers": {
    "mcp-md-html-pdf": {
      "command": "npx",
      "args": ["-y", "mcp-md-html-pdf", "mcp"],
      "env": {
        "MODDOC_BRAND": "/absolute/path/to/brand.json"
      }
    }
  }
}

Step 3: Use it

Tell Claude:

"Make a proposal for ACME Corp, web redesign for $5,000, executive style"

Claude calls build_document → you get a branded HTML file → done.

The MODDOC_BRAND env var loads your brand automatically. You set it once and every document gets your logo, colors, and fonts without having to specify them each time.

How the brand layers work

You can override the brand at multiple levels. Each layer overrides the one below:

brandOverrides     ← highest priority (inline in tool call)
brand path         ← tool call parameter (path to a different brand.json)
MODDOC_BRAND       ← env var (your default brand)
built-in default   ← fallback (generic neutral style)

This means you can set up your default brand via MODDOC_BRAND and still override specific fields per document — e.g. use a different style or accent color for a particular client.

MCP Tools

| Tool | Description | Key inputs | |---|---|---| | build_document | Markdown → branded HTML | content, outputPath, brandOverrides | | export_pdf | HTML → A4 PDF | htmlPath, format (A4/Letter) | | full_pipeline | Markdown → HTML + PDF in one step | content, filename, formats | | list_components | List all 21 HTML components with examples | — | | list_styles | List all 8 style presets | — |

build_document inputs

| Input | Type | Description | |---|---|---| | content | string | Markdown or HTML content | | title | string? | Document title | | brand | string? | Path to brand.json (overrides MODDOC_BRAND) | | brandOverrides | object? | Inline overrides: name, colors, fonts, style, etc. | | outputPath | string? | Where to save the HTML file | | isHtml | boolean? | Set to true if content is already HTML |

Style presets

Styles define layout personality — typography, spacing, density. They never override your brand colors or fonts.

| Style | Personality | Best for | |---|---|---| | modern | Airy, large light headings | Proposals, presentations | | formal | Compact, conservative | Contracts, legal documents | | minimal | Clean, bold headings, max whitespace | Reports, tech docs | | executive | Authoritative, accent lines | Board reports, C-level | | creative | Bold, high contrast | Agency proposals, portfolios | | technical | Data-dense, monospace accents | Analyses, audits, API docs | | invoice | From/to blocks, line items, totals | Invoices | | compact | Maximum content per page | SOWs, contracts, specs |

Components

21 HTML components available in documents. Claude uses them automatically when building your content:

Layout: columns (2, 3, 60/40), comparison, cover page, page break, signatures

Content: box (4 variants), note, pull quote, badge (4 variants), checklist

Data: key-value pairs, metrics grid, progress bars, tables (4 styles), timeline, steps

Images: figure with caption, inline, full-width, float left/right, gallery grid

Invoice: invoice label, parties (from/to), total box, payment details

CLI

Also works as a standalone CLI tool:

# Install
npm install -g mcp-md-html-pdf

# Build HTML from markdown
moddoc build proposal.md --style executive --brand ./brand.json

# Full pipeline: MD → HTML + PDF
moddoc pipe report.md --style technical

# List components and styles
moddoc components
moddoc styles

PDF export requires Puppeteer: npm install puppeteer

As a library

import { build, mergeBrand } from "mcp-md-html-pdf";

const brand = mergeBrand({
  name: "ACME Corp",
  colors: { primary: "#1E3A5F", accent: "#C9A84C" },
  style: "executive",
});

const html = build("# My Proposal\n\nContent here...", brand);
// → self-contained HTML string

License

MIT