JPKCom DB

Markdown Editor — Examples

Hands-on walkthroughs with the Markdown Editor: a table from Excel, a task list, a Mermaid diagram, Markdown from a URL, PDF export, and snapshots.

Back to the overview: Markdown Editor · Open the tool live: www.jpkc.com/tools/md/

The manual explains every button and the full syntax. This page adds concrete workflows — typical tasks, walked through step by step. Button and menu names are given exactly as they appear in the interface.

Example 1: Write a README from a template

The fastest start is a template instead of a blank page.

  1. Open the editor and click File in the toolbar. Under New from template, pick README.md — if the editor already holds your own text, confirm the prompt. The editor fills with a ready-made skeleton, and the preview on the right immediately shows the rendered result. Your previous text isn't lost: it's kept as an automatic snapshot under File → Snapshots….
  2. Overwrite the placeholders. As you type, the Preview updates in real time; because both columns scroll in sync, the spot you're editing stays in view.
  3. Need a table (for an options overview, say)? Click Insert table in the second toolbar row, set columns and rows, and confirm with Insert (details in Example 2).
  4. When you're done, save the result with File → Save as Markdown (or Ctrl+S). The file name comes from the first heading: # My Project becomes my-project.md. The text is already auto-saved to localStorage anyway — it'll be back on your next visit.

Example 2: Bring in a table from Excel or CSV

Tables are the most common source of Markdown mistakes — and tedious to type by hand. The editor takes care of both.

  1. In Excel, LibreOffice, or Google Sheets, select a cell range including the header row and copy it.

  2. In the editor, put the cursor on an empty line and paste with Ctrl+V. The tab-separated cells automatically turn into an aligned Markdown table, and a message confirms "Pasted as Markdown table". If you wanted the raw text after all, take the table back out with Ctrl+Z and paste the cells into a code block, where nothing gets converted.

    | Name | Role     | City   |
| ---- | -------- | ------ |
| Ada  | Engineer | London |

  3. If the data is CSV (an export with commas or semicolons, for instance), click Insert table and paste it into the …or paste data field. The first row becomes the header; under Preview you see the Markdown before you take it over with Insert. Alignment sets all columns to left, center, or right.

  4. Without data, the dialog creates an empty table with the chosen number of Columns and Body rows; the header cells are named Column 1, Column 2 …

  5. The separator row of dashes under the header is mandatory — without it, markdown-it renders text with pipe characters instead of a table. Alignment works with colons: :-- left, :-: center, --: right.

  6. If you've extended the table by hand later and the columns are crooked, run File → Tidy up Markdown: every table in the document is aligned again, and the rendered output doesn't change.

Example 3: Keep a task list

Task lists (GFM) are ideal for meeting notes or a small to-do trail.

  1. Choose Task List in the Lists menu (second toolbar row), or type it directly:

    - [ ] Write draft
- [x] Gather sources
- [ ] Proofread

    If you already have a plain bulleted list, select the lines and choose Task List: the list markers are replaced, not doubled up. A second click on Task List removes them again.

  2. The preview shows real checkboxes; [x] is checked, [ ] is open.

  3. For structured notes, combine this with the Meeting Notes template (File → New from template) and list the open items as a task list.

Example 4: Draw a Mermaid diagram

Diagrams straight from text — no graphics program needed.

  1. Click Insert Mermaid diagram in the second toolbar row. A code block with the language mermaid and a sample graph is inserted:

    graph TD
    A[Start] --> B[End]

  2. The preview renders it as a flowchart right away. Extend the graph as needed — Mermaid can do flowcharts, sequence, class, state, ER diagrams, Gantt, and pie, among others.

  3. For formulas instead of diagrams, use the Math (KaTeX) menu: Math Inline for $E = mc^2$ inside the text, Math Block for a set-off formula like $$\sum_{i=1}^{n} x_i$$.

  4. Important for sharing later: when you export to HTML or PDF, copy, or print, Mermaid diagrams are automatically re-rendered in the light theme so they stay legible on a white background.

Example 5: Load existing Markdown from a URL and keep editing

You want to take a README from the web or a .md file on a server as a starting point.

  1. Open File → Load from URL…. In the "Load Markdown from URL" dialog, enter an absolute address (e.g. https://example.com/README.md) and confirm with Fetch Content or Enter. The proxy hands back the response as is: if the address points to an HTML page rather than the Markdown file itself, you get that page's HTML source in the editor. So use the direct address of the .md file — on GitHub, the raw view.
  2. The content is fetched server-side through the JPKCom proxy and replaces your current editor content. Your previous text is saved automatically as a snapshot under File → Snapshots… first, and Ctrl+Z brings it back as well.
  3. Mind the limits: public HTTP/HTTPS addresses only (no localhost/intranet), at most 950 KB, 10 s timeout per fetch (at most 30 s with redirects). If the proxy rejects the fetch (invalid or internal address, too large, empty, rate limit), the tool shows the error message and leaves your document untouched. If the target server delivers an error page instead (a 404, say), its text lands in the editor; your previous state is then in the automatic snapshot, and Ctrl+Z brings it back too. Only the URL goes to the server, never your own text (see the manual).
  4. Now edit the loaded text as usual and export or save it anew. If the file contains embedded HTML, the preview renders it — DOMPurify filters out scripts and event handlers beforehand.

Example 6: Export to PDF or standalone HTML

Turn your Markdown into a shareable document.

  1. Write and check your document in the preview. Optionally pick the reading theme (Dark, Light, Sepia) at the top right of the preview header — for exporting, the theme doesn't matter, because the export is always produced in a light design with code and diagrams switched over accordingly.
  2. Make sure there's a first heading: it supplies the file name (# Quarterly Report Q3 becomes quarterly-report-q3.pdf) and the title of the HTML file.
  3. Open the File menu and pick the format under Save & export. Save as PDF creates an A4 PDF from the rendered document, locally in the browser. Save as HTML saves a complete, standalone HTML document with embedded styles for layout, code highlighting, and KaTeX; only the formula fonts and images included by URL are loaded from the network when the file is opened.
  4. To take the text into an email, Word, or Google Docs, use Copy as formatted text and paste it there — the target application gets the rendered HTML with its formatting, while a plain text field receives the Markdown source instead. Copy as HTML, on the other hand, copies the document's complete HTML source, for example to paste into a CMS source-code field. For a paper copy there's Print preview….
  5. You can reach the same functions from the fullscreen preview (Preview button) via Copy, Save, PDF, and Print.

Example 7: Restructure safely with snapshots

You want to rework a long text radically without losing its current state.

  1. Open File → Snapshots…, enter a name like Before rework, and click Save current document.
  2. Rework the text. Auto-save keeps writing the latest state to localStorage; the snapshot isn't affected.
  3. Don't like the result? Open File → Snapshots… again and click Restore next to Before rework. The editor first takes a snapshot of the current state itself ("… — before restoring …"), so you can go back again too.
  4. Even without a snapshot of your own you're covered: before a template, an opened file, Load from URL…, New document, or Clear document replaces the text, a snapshot labeled "automatic" is created. The editor keeps up to 20 snapshots, and older automatic ones are dropped first.
  5. Snapshots live only in this browser. For a backup that outlives browser storage, also save with Save as Markdown.

Going deeper: the manual for every function in detail, the tips & tricks for strategy and pitfalls. You can try it all directly in the tool.