TK
Developer Tools

Markdown Preview

Type Markdown, see HTML. CommonMark plus tables, strikethrough, and Mermaid diagrams. Export a real PDF locally — no print dialog.

Inputs stay on this device. Every developer tool on TaskKit runs entirely in your browser. Tokens, payloads, and pasted text are not transmitted to TaskKit servers or third parties.

What this tool does

A Markdown editor with live HTML preview, Mermaid diagram rendering, and a real PDF export — all entirely in your browser. Type CommonMark on the left, see rendered output on the right. The renderer supports the standard block and inline elements plus GitHub-flavored tables and strikethrough. The output HTML is sanitized — raw HTML in the source is escaped, and javascript:/data: URLs are dropped before reaching the page.

When you'd use it

  • Drafting a README before pushing it to GitHub.
  • Previewing an issue or PR description without leaving the browser.
  • Authoring a technical doc with embedded Mermaid diagrams and exporting a single PDF you can email or attach.
  • Pasting Markdown from somewhere and confirming it renders the way you expect.
  • Producing clean HTML you can copy into a CMS that doesn't speak Markdown.

How it works

The renderer is hand-written, ~340 lines, with no third-party Markdown or sanitizer dependency. Block parsing handles ATX headings, paragraphs, fenced and indented code, lists (ordered and unordered), blockquotes, horizontal rules, and GFM pipe tables. Inline parsing covers emphasis, strong, code spans, strikethrough, links, images, autolinks, and hard line breaks.

Security is enforced at two layers. First, every text run goes through HTML-entity escaping before reaching the output buffer — so a literal <script> in the source becomes &lt;script&gt;, never an executing tag. Second, every URL in a link or image runs through an allow-list (http(s), mailto, tel, anchor, relative path) — anything else is dropped. This catches javascript:, data:, vbscript:, mixed-case schemes (JaVaScRiPt:), and control-character splicing (java\tscript:).

Mermaid diagrams

Fenced code blocks tagged mermaid are passed to the Mermaid library and rendered to SVG live in the preview. The library is dynamically imported the first time a diagram appears, so users who never write a chart never download it. Mermaid runs with securityLevel: "strict" — no inline JavaScript, no <foreignObject> HTML, no external image fetches.

Fully supported diagram types: flowchart, sequence, class, state, ER, journey, gitGraph, timeline, mindmap, gantt, pie. The architecture-beta and icon-pack variants render their geometry but their icons are stripped (icon packs are fetched from CDNs by default — incompatible with the privacy posture of this tool, which never makes a network call during render or export).

PDF export

The Export PDF button produces a real downloadable PDF — not a print-dialog handoff — by:

  1. Cloning the live preview DOM (with already-rendered Mermaid SVGs intact).
  2. Rasterising every <svg> into a flat PNG <img> to avoid SVG-handling edge cases in the canvas pipeline.
  3. Walking top-level blocks and inserting transparent spacers so paragraphs, tables, lists, and diagrams don't get sliced through the middle on a page boundary.
  4. Capturing the off-screen stage with html2canvas-pro and slicing the resulting canvas into A4-sized PNG pages.
  5. Embedding each page into a pdf-lib document with proper title/producer metadata.
  6. Triggering a normal browser download.

No upload, no window.open, no print dialog. The whole pipeline is browser-only and dynamically imported on first export, so the editor stays light otherwise. Long inline code spans (e.g. profile.locationId === jwt.locationId ) stay on one line via white-space: nowrap and box-decoration-break: clone so they never split into disconnected pills.

Notes

Why no syntax highlighting in code blocks? A real highlighter (Prism, highlight.js, Shiki) is 50–500 KB shipped to every page. We left it out to keep the bundle small. The language tag still becomes a class name (language-js), so you can layer highlighting on top of the copied HTML if you need it.

Does it render images? Yes, but only with sanitized URLs. Local file paths (./image.png) are allowed; data: image URIs are not.

How close to CommonMark is it? Close on the common 90%. Edge cases — link reference definitions, setext headings, nested lists with blank lines — may differ from the full spec.

What about wide diagrams (gantt, large flowcharts)? They're scaled to fit the A4 content width, which can make text labels small. Per-page landscape orientation for wide diagrams is on the roadmap; for now, split the chart in the source if labels become unreadable.

Is the PDF text selectable? No — the export rasterises the preview, so text inside the PDF is part of a bitmap. The trade-off is universal styling fidelity (every font, every color, every diagram exactly as it looked in the preview). A vector text export would need a different layout engine.