Paste raw Markdown from an AI chat and get a clean, faithful render, a paginated PDF, a one-click Word copy and a native .docx.
AI tools such as Google AI Studio, ChatGPT and DeepSeek answer in Markdown with bold, nested lists, wide tables and LaTeX equations. Copying that raw text anywhere else usually breaks it. Markdown Render Studio renders it the way the chat UI showed it, then lets you print or export it without losing any formatting.
The renderer copies the DeepSeek Harness chat renderer: the same Markdown parser, KaTeX 0.16 math, typography and table styling. AI answers therefore look the same as they do there.
- GitHub-Flavoured Markdown: headings, bold/italic/
strike, nested bullet and numbered lists, task lists, tables with column alignment, code blocks, block quotes, links, footnotes. - LaTeX math with KaTeX, using every delimiter AI models produce:
$inline$,$$display$$(also on a single line, even inside list items),\(inline\)and\[display\]. - If an equation has a TeX error, it still renders leniently instead of breaking the page.
- Edit right on the rendered page: type, select, delete, or press Enter to add spacing directly on the paginated preview (or Flow view) on phone, tablet, and desktop.
- Formatting toolbar: bold, italic, underline, strikethrough, text colour & highlight palette, text size, paragraph styles (Normal, H1–H4, Quote, Code), alignment, bulleted & numbered lists, page breaks, clear formatting, and 150-step Undo/Redo.
- Pictures with non-destructive crop & corner resize:
- Insert pictures from the toolbar, paste, or drag-and-drop; crop on insert or re-crop at any time with aspect-ratio presets (Free, Original, 1:1, 4:3, 3:4, 16:9).
- Fixed on page (default): stays anchored at its exact spot on that page even when text above it changes; pushes text above and below it (Push text) like Microsoft Word, or floats In front of text. Drag anywhere (even across pages) with centre/margin snapping.
- In line with text: moves with the surrounding text; supports left, centre, right, and left/right text wrapping.
- Drag any corner handle to resize while preserving aspect ratio.
- Crash-safe browser autosave & Sessions:
- All Markdown, page edits, colours, pictures, crops, page setup settings, and your exact scroll position are saved automatically in IndexedDB with a synchronous
localStoragemirror, surviving refreshes, tab closes, or browser crashes. - Multi-session switcher: start a new session or switch between multiple saved sessions right in the browser without losing any work.
- Export & Import session (
.mdstudio.json): export your entire session (including all embedded pictures, crops, formatting, and settings) as a single.mdstudio.jsonfile and import it anytime to pick up right where you left off.
- All Markdown, page edits, colours, pictures, crops, page setup settings, and your exact scroll position are saved automatically in IndexedDB with a synchronous
- Pages view shows exactly what the PDF will contain, updating as you type.
- Real pagination: text flows to the next page line by line, lists continue across pages, long tables split between rows and repeat their header row on every page. Headings and bold lead-in lines (e.g.
**Applications:**) are never left stranded at the bottom of a page. - Export PDF opens the browser's print dialog with pages already set up at the right size (choose Save as PDF).
- Force a new page with a line containing
\newpageor<!-- pagebreak -->.
Page setup (all live, nothing hidden)
- Paper: A4, Letter, Legal, A5, A3 or a custom size; portrait or landscape.
- Margins: presets (Normal, Moderate, Narrow, Compact, Wide, None) or per-side sliders, with optional margin guides.
- Font family, font size and line spacing.
- Table style: Minimal (DeepSeek Harness look) or Grid (Word look).
- Page numbers on/off.
- Wide tables shrink to fit the page or window, keeping words whole, instead of overflowing or scrolling.
- Long equations scale down to fit the column.
- Fit width, Fit page, 50 – 200 %, Ctrl + mouse wheel, Ctrl +/−/0.
- Flow view: a continuous reading view that reflows to the window width.
- Resizable editor pane; editor and setup panels can be hidden for a full-width preview.
- Word copy puts the whole document on the clipboard in a format Word understands. Paste with Ctrl+V and you get bold text, lists, real Word tables and native, editable Word equations. Tested with Microsoft Word on Windows from Chrome.
- .docx downloads a native Word document: real lists, tables sized to the page, editable equations, page numbers, and the same paper size and margins as the preview.
Everything runs in your browser. Your text is never uploaded anywhere; it is only kept in the browser's local storage so it survives a refresh.
- Open the live app.
- In your AI chat, copy the raw Markdown of the answer (most chat UIs have a Copy or Copy as Markdown button).
- Paste it into the editor on the left (or click Paste). You can also open or drag in a
.md/.txtfile. - Adjust paper, margins and font in Page setup while watching the preview.
- Click Export PDF, Word copy or .docx.
Getting the best PDF: in the print dialog choose Save as PDF, set Margins to Default or None (the page margins are already built in), and under More settings tick Background graphics so table shading prints.
| Shortcut | Action |
|---|---|
| Ctrl+P | Export PDF |
| Ctrl+E | Show / hide the editor |
| Ctrl++ / Ctrl+− | Zoom in / out |
| Ctrl+0 | Fit width |
| Ctrl + mouse wheel | Zoom around the cursor |
Requires Node.js 20 or newer.
git clone https://github.com/likhonmain/markdown-render-studio.git
cd markdown-render-studio
npm install
npm run dev # http://localhost:5178| Script | Purpose |
|---|---|
npm run dev |
Development server with hot reload |
npm run build |
Type-check and build the static site into dist/ |
npm run preview |
Serve the built dist/ locally |
npm run deploy |
Build and publish dist/ to the gh-pages branch (GitHub Pages) |
The build is a plain static site and asset paths are relative (base: './'), so dist/ works from any host or sub-path.
- GitHub Pages (this repo): run
npm run deploy. Pages serves thegh-pagesbranch. - Cloudflare Pages: connect the repo with build command
npm run buildand output directorydist, or drag thedist/folder into Workers & Pages → Upload assets. - Netlify / Vercel / any static host: same build command and output directory.
index.html App shell (toolbar, editor, preview, page setup)
src/
main.ts UI controller: rendering, zoom, auto-fit, print, exports
editor.ts Direct page editor: toolbar, formatting, undo/redo, picture manipulation
flow.ts Paginated DOM <-> document flow, caret markers, picture & paste helpers
store.ts IndexedDB + localStorage autosave and picture store
crop.ts Interactive pointer/touch crop dialog
markdown.ts Markdown → HTML (GFM, math-delimiter normalisation, KaTeX)
paginate.ts Paginator: splits content between lines, list items, table rows & picture bands
wordcopy.ts Word-ready clipboard HTML (MathML equations, inline styles)
docx.ts Native .docx writer (Markdown AST & edited DOM, lists, tables, pictures, OMML)
omml.ts MathML → Office Math (OMML) converter for Word equations
settings.ts Paper sizes, margin presets, fonts, persisted settings
sample.md Built-in sample document
styles/
markdown.css DeepSeek-Harness-style typography
app.css Application & page-editor UI
print.css Print / PDF rules
Tech: TypeScript, Vite, unified / remark (micromark, GFM, math), KaTeX, JSZip. No UI framework.
Latest Chrome, Edge and Firefox; Safari 16.4+. Word copy works best from Chromium-based browsers.
MIT © Tanvir Ahamed Likhon
The phone layout (bottom tabs: Edit / Preview / Setup / Export) was tested only in a Chrome iPhone emulator, not on a real phone. Still to check:
- On a real Android/iPhone: the keyboard hiding the tab bar while typing, and pinch-to-zoom on the preview.
- Export PDF from a phone browser (mobile print dialogs vary), the .docx download, and Word copy (clipboard).
- Landscape orientation on phones and tablet sizes (switch point is 820px).