DEV Community

Cover image for From Markdown to print-ready PDF in the browser — here's what the output actually looks like
Matthias
Matthias

Posted on

From Markdown to print-ready PDF in the browser — here's what the output actually looks like

#markdown #webdev #opensource #productivity

Most Markdown editors are great for writing. Very few care about what comes out the other end.

I've been building mdedit.io, a browser-based Markdown editor focused on document production: not notes, not quick drafts, but structured long-form documents you can actually hand in, send to a client, or publish — as PDF or DOCX, directly from the browser, without an account, without Word, without LaTeX.

This post isn't about features. It's about the output. Let me show you what a real export looks like.

The document

The demo document is a 27-page academic paper: "Markdown as a Writing and Production Environment for Scientific Work — a criteria-based evaluation of mdedit.io compared to Word and LaTeX." It's written entirely in Markdown, with:

  • YAML frontmatter (title, author, date, language, citation config)
  • An embedded CSL-JSON bibliography (Pandoc/Citeproc-compatible)
  • In-text citations ([@gruber2004markdown], [@pandoc2025], etc.)
  • Heading-based structure (H1–H4), outline-navigable
  • Multiple scientific tables with different layout presets
  • KaTeX math — inline ($E = mc^2$) and block (Gaussian integral)
  • A footnote
  • An embedded image with caption
  • A code block (YAML)
  • A long URL as a line-break stress test
  • Auto-generated table of contents, figure list, table list
  • Auto-generated bibliography at #refs

In other words: everything that typically breaks in a Markdown-to-PDF workflow.

What the PDF looks like

Title page — clean hierarchy: title in bold serif, subtitle in italic, author and metadata below. No manual formatting. It comes from this Markdown:

::: title-page

# Markdown als Schreib- und Produktionsumgebung ... {.no-toc}

## Eine kriteriologische Bewertung ... {.no-toc}

**Max Beispiel**  
Masterarbeit · Universität Beispiel · 2026-05-10

:::
Enter fullscreen mode Exit fullscreen mode

Table of contents — auto-generated from headings, with page numbers. Figure and table lists generated from captions. One line of Markdown each:

[[toc]]

## Abbildungsverzeichnis
<!-- list-of-figures -->

## Tabellenverzeichnis
<!-- list-of-tables -->
Enter fullscreen mode Exit fullscreen mode

Scientific tables — bordered, with distinct header styling. You pick the layout with a directive:

::: table{layout=scientific}
| Kriterium | Word | LaTeX | Markdown |
| --- | --- | --- | --- |
| ...
:::
Enter fullscreen mode Exit fullscreen mode

Math — KaTeX renders in preview, exports cleanly to PDF:

$$
\int_0^\infty e^{-x^2} \, dx = \frac{\sqrt{\pi}}{2}
$$
Enter fullscreen mode Exit fullscreen mode

Bibliography — placed at #refs, rendered automatically by Citeproc from the embedded JSON. Every citation in the text links to its entry. The bibliography is embedded directly in the document, not dependent on an external file or live Zotero connection.

Footnote — marker in text, content at page bottom. Stable across pages.

Page numbers — bottom of every page, via the layout's footer config.

The result is a document that looks like it came out of a publishing system — because under the hood, it did. mdedit.io uses Pandoc + Citeproc + a custom CSS/paged layout stack. But you never touch any of that directly.

The Markdown source

The complete source is plain .md. No LaTeX escapes, no special syntax beyond standard Markdown extensions (GFM, KaTeX, Mermaid, footnotes, custom directives). It's readable without rendering. It's diffable. It's pasteable into Claude, ChatGPT, or any other AI and stays structurally intact — headers, tables, citation markers and all.

That last point matters more than it sounds. AI models work on explicit text structure. A Markdown document lets a model replace a section, restructure an argument, or adjust a table without destroying the citation layer or the layout commands. A .docx file does not.

What mdedit.io is not

It's not Obsidian. It's not a second brain or a notes app. It's not Typora or iA Writer.

It's also not a LaTeX replacement for math-heavy papers, OSCOLA-style legal footnotes, or thesis templates where the university sends you a .cls file.

It's the gap between those two worlds: structured document production for people who want to write in Markdown and get a clean, print-ready output — without a desktop app, without a toolchain, without an account.

Try it

The beta is live at mdedit.io — open the demo document and hit "PDF download." The source is on GitHub under Apache 2.0, self-hostable with Docker.

I'd especially like to know:

  • Does the export quality meet your bar for real documents?
  • What's missing for your specific workflow (thesis, specs, reports)?
  • Does the no-account / browser-only approach work for your use case?

Feedback via GitHub Issues or in the comments here.

Top comments (0)