86 tips for writing serious documents in mdedit.io

Table alignment

Use :--- for left-aligned, :---: for centered, and ---: for right-aligned cells in tables.

| Left | Center | Right |
|:-----|:------:|------:|
| A    |   B    |     C |

Insert footnotes

Create footnotes with [^1] in the text and [^1]: footnote text at the end.

This is some text[^1].

[^1]: This is the footnote.

Task lists

Create interactive checklists with - [ ] for open and - [x] for done.

- [ ] Todo
- [x] Done

Emoji shortcuts

Use :smile:, :heart:, :rocket: for quick emojis.

:smile: :heart: :rocket: :+1:

Columns layout

Create a two-column layout with :::: columns and ::: for each column.

:::: columns
::: column
Left column
:::
::: column
Right column
:::
::::

Admonitions

Emphasize important content with ::: note, ::: warning, ::: danger, or ::: success.

::: warning
Caution: Important note!
:::

Definition lists

Create structured definitions with Term : Definition.

Markdown
: Lightweight markup language

HTML
: Hypertext Markup Language

Superscript & subscript

Use ^superscript^ and ~subscript~ for formulas.

H~2~O and E=mc^2^

Highlight text

Highlight important text with ==highlighted text==.

This is ==very important==!

Abbreviations

Define abbreviations with *[HTML]: Hypertext Markup Language at the end of the document.

HTML is great!

*[HTML]: Hypertext Markup Language

Page break

Insert ---pb--- to force a page break for PDF export.

Page 1

---pb---

Page 2

KaTeX math

Use $inline$ for inline formulas and $$block$$ for multi-line formulas.

Einstein: $E=mc^2$

$$\sum_{i=1}^n x_i$$

Mermaid diagrams

Create flowcharts, sequence diagrams, and more with Mermaid syntax.

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

Add attributes

Add CSS classes and IDs with {.class #id}.

## Heading {.important #section1}

Text {style="color: red;"}

Table of contents

Insert [[toc]] to automatically generate a table of contents.

[[toc]]

## Chapter 1
## Chapter 2

Typographic replacements

Automatic conversion: ... → …, -- → –, --> → →, (c) → ©

This is a test... (c) 2026

Code with syntax highlighting

Use triple backticks with language: ```javascript for highlighted code.

```javascript
const x = 42;
console.log(x);
```

Links with title

Add tooltips to links: [Text](url "Tooltip").

[Google](https://google.com "Search engine")

Nested blockquotes

Use multiple > for nested quotes.

> Quote level 1
>> Quote level 2
>>> Quote level 3

Create a table

Create tables with pipes | and dashes - for the header row.

| Column 1 | Column 2 |
|----------|----------|
| Value A  | Value B  |
| Value C  | Value D  |

Image alignment and width

Use <!-- img: align=right width=40% --> directly before an image to control alignment (left, right, center) and width. Right-aligned images are wrapped by text.

<!-- img: align=right width=45% -->
![Figure 1: My diagram](image.png)

This text flows to the left of the image.

Auto-numbered figure captions

If an image's alt text starts with Figure N:, it is automatically numbered and receives a figure caption. The entry also appears in the list of figures.

![Figure 1: System overview with data pipeline](schema.png)

Image frames and visual effects

Image markers support frame for a subtle border, shadow for a drop shadow, and filter=grayscale or filter=sepia for color effects.

<!-- img: align=center width=70% frame shadow -->
![Figure 2: With frame and shadow](image.png)

Insert a list of figures

Use <!-- list-of-figures --> at the desired location to automatically generate a list of all numbered figures.

<!-- list-of-figures -->

# List of Figures

Insert a list of tables

Use <!-- list-of-tables --> to generate a list of tables. Tables are automatically detected when preceded by a paragraph like Table 1: My table.

**Table 1: Layout overview.**

| Area | Status |
|---|---|
| Margins | ☑ |

Auto-detected table captions

A paragraph immediately before a table that begins with Table N: is automatically recognized as a table caption, numbered, and added to the list of tables.

Table 2: Comparison of layout options.

| Option | Value |
|---|---|
| Margin | 2.1 cm |

Section IDs and cross-references

Assign a typed ID to a heading with {#sec:id} and reference it in the text with [@sec:id]. The preview resolves the reference into a clickable link, e.g. *Section 2.1*.

## Methodology {#sec:methodology}

As described in [@sec:methodology] …

Semantic figure IDs and cross-references

Assign a typed ID to a figure using {#fig:id} directly after the image or with an <!-- img: #fig:id --> marker. Reference it in the text with [@fig:id] — the preview turns this into a clickable link, e.g. *Figure 2*.

<!-- img: #fig:schema align=center -->

![System overview](schema.png)

As shown in [@fig:schema] …

Semantic table IDs and cross-references

Assign a typed ID to a table using <!-- tbl: #tbl:id --> directly before the table caption. Reference it in the text with [@tbl:id] — the preview turns this into a clickable link, e.g. *Table 1*.

<!-- tbl: #tbl:results -->
Table 1: Measurement results overview.

| Metric | Value |
|---|---|
| Accuracy | 94 % |

See [@tbl:results] for details.

Page footnote or endnote

Normal footnote labels such as [^1] or [^note] become page footnotes in PDF. Labels starting with end- or endnote- stay as endnotes at the end of the document.

Text with a page footnote[^1] and an endnote[^end-source].

[^1]: This note lands at the bottom of the page.
[^end-source]: This note stays in the document-end endnotes block.

Preview presets

Switch between Scientific, Compact, Literary, and Document. - Document uses layout rules directly from your Markdown file - otherwise it falls back to the default document layout from settings - ideal for print-like preview and PDF export

Outline tree

Use the outline tree view to move quickly through large documents. Tip: It is especially useful for long documents with many headings and sub-sections.

Page view

Enable page view for a print-like preview with visible page breaks. It uses document layout rules instead of the normal screen presets, so it is the best final check before PDF export.

Auto-save

Your documents are saved automatically — no fear of data loss!

Export formats

Export your documents as PDF or DOCX — Mermaid diagrams are converted automatically.

Pin the sidebar

Use the pin function to keep the sidebar always open.

Multilingual

The app supports German and English — switch in the settings.

Document history

All saved documents remain in the history — search them with the search box.

Startup tips

Enable or disable startup tips in the settings.

Resize panes

Drag the divider between the editor and preview to adjust the size.

Custom preview styles

Define your own CSS styles in the settings under 'Custom Styles' to tailor preview and export.

Disable tips

You can disable tips in the settings if you no longer want to see them.

Expand sidebar

Click the sidebar to expand it and see your document history. Click again to minimize it.

Reorder files

Use drag & drop in the sidebar to change the order of your documents.

Delete files

Hover over a document in the history and click the delete X to remove it.

Outline via double-click

Double-click a document card in the sidebar to show the outline (table of contents).

Organize folders

Click the folder name above the history to open the folders overview and move documents between folders.

Sort documents in folders

In the folders overview you can drag and drop to reorder documents within a folder or move them between folders.

Edit folder names

Double-click a folder name in the overview to edit it inline. The default folder cannot be renamed.

Create a new folder

Click the '+' icon in the folders overview to create a new folder to organize your documents.

Control document layouts globally

In settings you can allow or disable document-local layout blocks globally. When disabled, the Document option also disappears from layout selectors.

Default layout for documents

Choose whether new document layouts should start from Scientific, Compact, or Literary defaults.

Hide the layout block

You can hide the layout block in the editor while document-local layouts are allowed, keeping the Markdown cleaner without losing print rules.

Visual layout editor

The layout editor (palette icon in preview, or Ctrl+Shift+L) lets you set page size, fonts, margins, and columns with a few clicks.

Real-time collaboration

Share a document via a collaboration link and write together with others. Cursors and changes are synchronized in real time.

Automatic section numbering

Add number-sections: true to the YAML frontmatter to automatically number headings in decimal form (1, 1.1, 1.1.1 …).

---
number-sections: true
---

## Introduction

### Background

Citations and bibliography

Set citation-source: embedded in the frontmatter and place BibTeX entries in a fenced code block at the end of the document. Citations like [@Key2024] are resolved automatically.

---
citation-source: embedded
---

As shown by [@Author2024] …

``` bibtex
@article{Author2024,
  author = {Author, A.},
  title  = {Title},
  year   = {2024}
}
```

Bibliography panel

Documents with embedded sources show a book icon in the editor header. Click it to open the bibliography panel with an overview of all sources. From there you can add, edit, delete, and insert sources at the cursor position.

---
citation-source: embedded
---

See [@Mueller2024].

Collapse the bibliography block in the editor

A large mdedit-bibliography block can take up a lot of space in the editor. In settings (Editor tab) you can collapse it to a single placeholder line — the content is preserved and the block remains accessible via the bibliography panel.

Scientific containers (Theorem, Definition, Proof)

Use :::theorem, :::definition, :::proof, :::remark, and :::example to create semantic containers. An optional title can follow the type: :::theorem Mean Value Theorem. Containers are automatically numbered and visually styled in preview and PDF.

:::definition Uniform Continuity

A function $f$ is uniformly continuous on $I$ if...

:::

Appendix mode

Place <!-- appendix --> anywhere in your document to switch all following ## headings into appendix sections labeled A, B, C … In the PDF each appendix starts on a new page.

## Conclusion

<!-- appendix -->

## Raw Data

(Content of Appendix A)

Author comments (hidden in export)

Text between %% and %% is completely stripped from preview and export. Ideal for notes, TODOs, and editorial remarks that should not appear in the final document.

%% TODO: verify sources %%

This paragraph appears normally.

Mermaid diagrams with caption and ID

A paragraph directly before a Mermaid block in the format Figure N: Title {#fig:id} is detected as a figure caption. The diagram is wrapped in a <figure> element with automatic numbering and can be referenced via @fig:id.

Figure 1: System overview {#fig:overview}

```mermaid
graph LR
  A --> B
```

Mermaid: Flowchart

Create flowcharts with graph TD (top-down) or graph LR (left-right). Nodes: A[Text], arrows: -->

```mermaid
graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Action 1]
  B -->|No| D[Action 2]
```

Mermaid: Sequence diagram

Show interactions with sequenceDiagram. Participants with participant, messages with ->> or -->.

```mermaid
sequenceDiagram
  participant A as Alice
  participant B as Bob
  A->>B: Hello!
  B-->>A: Hi!
```

Mermaid: Gantt chart

Plan projects with gantt. Define tasks with section, time spans with :start date, duration.

```mermaid
gantt
  title Project plan
  section Phase 1
  Task 1 :a1, 2026-01-01, 30d
  Task 2 :after a1, 20d
```

Mermaid: Class diagram

Model classes with classDiagram. Classes: class Name, relationships: <|-- (inheritance), --> (association).

```mermaid
classDiagram
  class Animal {
    +String name
    +makeSound()
  }
  class Dog {
    +bark()
  }
  Animal <|-- Dog
```

Mermaid: State diagram

Show state transitions with stateDiagram-v2. States: state Name, transitions: -->.

```mermaid
stateDiagram-v2
  direction LR
  [*] --> Idle
  Idle --> Active: Start
  Active --> Idle: Stop
  Idle --> [*]
```

Mermaid: ER diagram

Model entities with erDiagram. Relationships: ||--o{ (1:n), }o--o{ (n:m).

```mermaid
erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ ITEM : contains
  CUSTOMER {
    string customer_id
    string name
  }
  ORDER {
    string order_id
    string status
  }
  ITEM {
    string sku
    int quantity
  }
```

Mermaid: Pie chart

Create pie charts with pie. Format: "Label" : value.

```mermaid
pie title Distribution
  "Category A" : 42
  "Category B" : 35
  "Category C" : 23
```

Mermaid: Git graph

Visualize Git branching with gitGraph. Commands: commit, branch, merge, checkout.

```mermaid
gitGraph
  commit
  branch develop
  checkout develop
  commit
  checkout main
  merge develop
```

Mermaid: User journey

Show user flows with journey. Steps: section Name, tasks with rating 1-5.

```mermaid
journey
  title Customer buys product
  section Search
    Visit website: 5: Customer
    Find product: 3: Customer
  section Purchase
    Add to cart: 4: Customer
    Pay: 2: Customer
```

Mermaid: Mindmap

Create mindmaps with mindmap. Hierarchy by indentation, nodes with text.

```mermaid
mindmap
  root((Project))
    Planning
      Tasks
      Timeline
    Development
      Frontend
      Backend
```

Embed bibliography directly in the document

With citation-source: embedded in the frontmatter, mdedit.io reads the bibliography from a mdedit-bibliography block inside the document. The block accepts BibTeX or CSL JSON. This keeps the bibliography part of the Markdown file — no separate .bib file needed.

---
citation-source: embedded
---

See [@doe2024].

```mdedit-bibliography
@book{doe2024,
  author={Doe, Jane},
  title={Example},
  year={2024}
}
```

DOI lookup: fetch metadata automatically

Click 'DOI search' in the bibliography modal and enter a DOI (e.g. 10.1000/xyz). mdedit.io fetches the metadata from Crossref and creates the entry automatically — no manual typing required.

DOI: 10.1038/s41586-020-2649-2
→ Entry imported automatically from Crossref.

Zotero connector: import from your library

Click 'Zotero' in the bibliography modal, enter your Zotero user ID and API key, and search for sources. Selected results are added directly to the embedded block. Credentials stay in the browser (sessionStorage only) and are never sent to the server.

Zotero User ID: 12345678
API Key: AbCdEfGhIjKlMnOpQrStUvWx
→ Search and import from your Zotero library.

Import and export bibliography

In the bibliography modal you can import .bib (BibTeX) and .json (CSL JSON) files — duplicate keys are skipped. Use the 'JSON' and 'BibTeX' buttons to download the current block as a file.

Import: existing.bib → entries are merged
Export JSON: bibliography.json
Export BibTeX: bibliography.bib

Quick copy

Copy Markdown with the copy button in the editor or copy text from the preview.

Switch between documents

Use Ctrl+→ and Ctrl+← to quickly navigate through your documents in the history.

Mermaid code completion

Use Ctrl+Space in the editor for Mermaid command auto-completion.

Switch between folders

Use Ctrl+↑ and Ctrl+↓ to quickly switch between your folders.

Quick open AI assistant

Press Alt+Space to open or close the AI assistant. If your browser or Linux window manager opens a menu instead, use Ctrl+Space as a fallback. Inside Mermaid code blocks, Ctrl+Space stays reserved for auto-completion.

Help & tips via keyboard

Press F1 to open the help page, and F2 to see a new tip at any time — even if the startup tip is disabled.

Layout editor via keyboard

Open the layout editor directly with Ctrl+Shift+L without touching the mouse.

AI assistant via keyboard

Alt+Space opens or closes the AI assistant instantly. If that opens the browser or window menu on your system, use Ctrl+Space instead. Inside Mermaid code blocks, Ctrl+Space stays reserved for auto-completion.

Folders overview via keyboard

Ctrl+0 opens the folders overview where you can move documents between folders.