# Markdown Editor — Examples

> Hands-on walkthroughs with the Markdown Editor: build a GFM table, keep a task list, draw a Mermaid diagram, load Markdown from a URL, and export to PDF.

Source: https://www.jpkc.com/db/en/tools/md/examples/

Back to the overview: [Markdown Editor](https://www.jpkc.com/db/en/tools/md/) · Open the tool live: [www.jpkc.com/tools/md/](https://www.jpkc.com/tools/md/)

The [manual](https://www.jpkc.com/db/en/tools/md/manual/) explains every button and the full syntax. This page adds **concrete workflows** — typical tasks, walked through step by step. The tool's interface is in English, so button and menu names are used as they appear.

## Example 1: Write a README from a template

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

1. Open the [editor](https://www.jpkc.com/tools/md/) and click the **Templates** menu in the toolbar. Choose **README.md** — the editor fills with a ready-made skeleton, and the preview on the right immediately shows the rendered result.
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 (e.g. for an options overview)? Click **Insert table** in the second toolbar row. A pipe-table skeleton is inserted that you just fill in.
4. When you're done, save the result with **Save as .md** (or `Ctrl`+`S`). The text is already auto-saved to `localStorage` anyway — it'll be back on your next visit.

## Example 2: Build a clean GFM table

Tables are the most common source of Markdown mistakes — live preview takes the guessing out of it.

1. Put the cursor on an empty line and click **Insert table**. You get a pipe-format skeleton:

   ```markdown
   | Column A | Column B |
   | -------- | -------- |
   | cell     | cell     |
   ```

2. Fill in the cells. The separator row of dashes under the header is mandatory — without it, markdown-it renders text with pipe characters instead of a table. The preview shows immediately whether it works.
3. Align columns with colons in the separator row: `:--` left, `:-:` center, `--:` right.
4. The columns don't have to be aligned in the source — that's purely for readability. If you like things tidy, keep them aligned anyway.

## 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:

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

2. The preview shows real checkboxes; `[x]` is checked, `[ ]` is open.
3. For structured notes, combine this with the **Meeting Notes** template from the Templates menu 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:

   ```mermaid
   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: on **Save as HTML** and **Save as PDF** export, 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. Click **Load Markdown from URL**. In the dialog, enter an absolute address (e.g. `https://example.com/README.md`) and confirm with **Fetch Content**.
2. The content is fetched **server-side** through the JPKCom proxy and **replaces** your current editor content — if you still have unsaved text there, save it first with **Save as .md**.
3. Mind the limits: public HTTP/HTTPS addresses only (no `localhost`/intranet), at most 950 KB, about 10 s timeout. Only the URL goes to the server, never your own text (see the [manual](https://www.jpkc.com/db/en/tools/md/manual/#architecture-storage-and-privacy)).
4. Now edit the loaded text as usual and export or save it anew.

## 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 choice doesn't matter, since code and diagrams are switched to a light theme anyway.
2. Open the **Export** menu (next to the Preview button).
3. **Save as PDF** produces a PDF file locally in the browser from the rendered preview. **Save as HTML** saves a complete, standalone HTML document with embedded styles (KaTeX, code highlighting, Mermaid) — the file looks correct on its own.
4. If you just need the HTML somewhere else briefly, use **Copy HTML** and paste it directly. For a plain paper output there's **Print**.

---

Going deeper: the [manual](https://www.jpkc.com/db/en/tools/md/manual/) for every function in detail, the [tips & tricks](https://www.jpkc.com/db/en/tools/md/tips/) for strategy and pitfalls. You can try it all directly in the [tool](https://www.jpkc.com/tools/md/).