florianlotte/markdown-paged-studio

Write Markdown, add your own CSS, and get a paginated, print-ready document with a cover page, a table of contents, headers, footers, page numbers and Mermaid diagrams.
Everything runs in the browser. No backend, no account, no tracking.
Try it online: florianlotte.github.io/markdown-paged-studio (deployed from main by GitHub Actions; your documents stay in your browser).
## Features
Live paged preview powered by Paged.js: what you see is what prints.
Bundled font: Inter ships with the studio and is embedded in every export, so the preview, the print and the PDF look the same on any machine.
Cover page with title, subtitle, author, date and an optional logo, in four templates with an accent colour.
Table of contents with page numbers from [[toc]], page breaks from \newpage, footnotes at the foot of the page, and an anchor on every heading for links.
Running header (left and right, or the current chapter), footer, and an automatic Page X / Y counter.
A4, Letter or A5 with configurable margins, mirrored on facing pages if you print double-sided.
Syntax highlighting of code blocks, light or dark, and captions under images and diagrams.
Mermaid diagrams from mermaid code fences, rendered to SVG and embedded in exports, resizable by dragging in the preview.
Document language (BCP 47 tag) driving hyphenation, typographic quotes (« » in French, „ “ in German…), the titles of alerts and the words of the numbering.
Images uploaded, dropped or pasted, matched to the Markdown by file name, resizable like the diagrams.
Custom CSS editor with import, applied to the document only.
Interface in English or French, and a light or dark theme for the studio, each following the system or your choice; the pages stay white.
Automatic numbering and cross-references: headings, figures, tables and equations are numbered for you, and @fig:plan in the text becomes "figure 3", with a link, wherever the figure ends up.
Formulas, alerts and more: TeX formulas drawn by KaTeX ($E = mc^2$), GitHub alerts (> [!NOTE]), highlighted text, subscript, superscript and definition lists.
A document in several files: chapters as tabs above the editor, assembled into one paged document and one PDF, with shared settings, table of contents and page numbers.
A real editor: Markdown colours, line numbers, search and replace (Ctrl+F), an outline of the headings with a filter (Ctrl+Shift+O), Prettify to format the file the way Prettier does, and the preview scrolling along with the text; a double-click in the preview shows the source. The problems of the render (a diagram Mermaid cannot draw, a formula KaTeX refuses, a missing image, an unknown reference) are counted in the toolbar, each leading to its line; the custom CSS has a code editor of its own.
Edit, Split or View: the editor and the paged preview share the window with a draggable splitter, or one of them takes it all; plus one page or two pages side by side, zoom, fit to width, Ctrl + wheel, and a collapsible settings sidebar.
Autosave in the browser, plus export and import of the whole configuration as JSON.
Personal defaults (your name, company logo, stylesheet, template) from a gitignored local/ folder.