JPKCom DB

Markdown Editor

What the JPKCom Markdown Editor does: live preview, GFM, KaTeX, Mermaid, and export — your starting point for the manual, examples, and tips.

Write Markdown and see the result instantly

The Markdown Editor is a full editor with live preview: you type Markdown on the left and watch the rendered result update in real time on the right. The two columns scroll in sync, so even in long documents you always keep the spot you're working on in view. There's nothing to save, nothing to compile, no build step — you write, and the preview follows.

This solves a real everyday problem: Markdown is easy to read, but small mistakes — a missing blank line before a list, a crooked table column, a code fence that never closes — only surface when the document renders. With live preview you see the mistake the moment you make it, not after the commit or the upload to your CMS.

The tool is built for everyone who writes Markdown regularly: developers maintaining READMEs, changelogs, or API docs; writers drafting blog posts or notes; and anyone who needs a cleanly formatted document fast, without opening a heavy office suite. Everything runs in the browser — no account, no installation.

What the editor can do — at a glance

  • Live preview with synchronized scrolling — editor and preview side by side, or editor only / preview only; on a phone you switch between "Markdown" and "Preview" with tabs. By default, scrolling tracks the rendered blocks line by line (headings, images, diagrams); a proportional mode is available too. The preview comes in three reading themes: Dark, Light, and Sepia.
  • GitHub Flavored Markdown and more — tables, strikethrough, task lists, and auto-linked URLs (GFM) plus a whole set of extensions: footnotes, definition lists, subscript/superscript, highlight, abbreviations, emoji shortcodes, front matter, KaTeX math, and Mermaid diagrams. Code blocks render with syntax highlighting.
  • A convenient toolbar — buttons for every formatting option (headings, bold, italic, lists, links, images, code) that undo themselves on a second click; a table dialog that also takes CSV data; a searchable emoji picker; a table-of-contents panel with a word count per section; and find/replace.
  • One File menu for everything document-level — new, open, load from a URL, six document templates (README, Changelog, Blog Post, Meeting Notes, API Docs, MIT License), Tidy up Markdown to clean up the source (align tables, strip stray spaces and blank lines), plus saving and export.
  • A real code editor underneath — the ACE editor with line numbers, syntax highlighting, undo/redo, line moving, fullscreen, and configurable themes. A status line shows bytes, words, lines, and the estimated reading time.
  • Paste whatever you have — cells copied from Excel or Google Sheets turn into a Markdown table on paste, and images from the clipboard or dropped onto the editor are embedded straight into the document.
  • Auto-save and snapshots — your text is kept in your browser's localStorage and is back after a reload. On top of that you can keep up to 20 named snapshots; one is taken automatically before a document gets replaced.
  • Import and export — open and save .md files, load Markdown from a URL, save the result as an HTML file or PDF, copy it as HTML or as formatted text (for email, Word, or Google Docs), and print it.

Exactly what each button does, which Markdown syntax is supported, and the keyboard shortcuts are all in the manual.

Runs in the browser — what goes to the server, and what doesn't

The editor works entirely in your browser. Your text is rendered, saved, and exported without anything being sent to a server — auto-save and snapshots live in your own browser's localStorage, and the PDF and HTML exports are produced locally too. The preview passes through the DOMPurify sanitizer: embedded HTML is displayed, but scripts and event handlers from untrusted content are stripped.

There is exactly one feature that sends anything of yours to the server: Load from URL… in the File menu. When you enter an address, an internal, token-protected proxy on the JPKCom server fetches the content of that URL and drops it into the editor. This is necessary because your browser isn't allowed to load foreign pages directly for security reasons (CORS). All that goes to the server is the URL you want to load — never the text you type yourself. One side note on export: a saved HTML file that contains formulas loads the KaTeX fonts from the JPKCom server when you open it later. Details and the limits of the proxy are in the manual.

Try it now

→ Open the Markdown Editor — type, watch the preview, done. No account, free, right in the browser. If you'd rather not start from scratch, File → New from template loads a ready-made skeleton for a README, changelog, blog post, and more.

  • WYSIWYG Editor — the closest relative: a rich-text HTML editor based on TipTap with Markdown import and export. If you'd rather work visually than in Markdown syntax, that's the alternative — and you can move content back and forth between the two tools.
  • Source Viewer — view source code for 100+ languages with syntax highlighting. Handy for inspecting the editor's HTML output.
  • Beautify — format JavaScript, CSS, and HTML; useful for tidying up exported HTML.
  • llms.txt Generator — Markdown is the natural format for AI context; use this tool to build a valid llms.txt for your content.

There's more on the subpages: the manual with every function, every button, and the full syntax range; hands-on examples; and a collection of tips & tricks.