Markdown Help & Feature Reference

All important mdedit.io features in one place, with jump links, syntax examples, and notes on layout, AI, and collaboration.

mdedit.io is a browser-based Markdown editor with live preview, outline tree, Mermaid, KaTeX, a layout editor, PDF/DOCX export, optional collaboration, and an integrated AI panel.

This page is intentionally compact: use the table of contents on the left or jump directly to the most common topics.

Use-case guides

If you are evaluating mdedit.io for a specific workflow, start with one of these focused pages instead of reading the full reference first.

Thesis writing

Why mdedit.io works for thesis and research documents: structured Markdown, citations, outline navigation, and print-ready export.

Self-hosting

Run mdedit.io with Docker for private browser-based writing, collaboration, and PDF/DOCX export on infrastructure you control.

Markdown citations

Use embedded bibliography data, citation rendering, and reliable PDF/DOCX export for serious citation workflows in the browser.

Editor & navigation

The main interface consists of a sidebar, the Markdown editor, and a right-hand area for preview, outline view, and AI chat.

Sidebar, history, and folders

  • The sidebar shows document history and the current folder.
  • Use search to filter documents in the history.
  • Folders separate groups of documents and can be renamed, exported, and deleted.
  • The sidebar can be pinned or collapsed.

Preview, outline, and page view

  • The preview renders Markdown, Mermaid, and KaTeX live.
  • The outline view visualizes the document structure as a graph or outline tree.
  • Page view shows a print-like paged preview with visible page breaks.
  • Preview presets: Scientific, Compact, Literary, and Document.

Sharing & export

The share menu in the editor header lets you copy content, download files, and share a link to the current document.

Function Description
Permalink Creates a shareable link to the current document.
Copy Markdown / Word Copies either Markdown or formatted text directly to the clipboard.
Download Markdown / DOCX / PDF Exports the current document in the main output formats.
ZIP export Exports the current folder or all local data, including assets, as a ZIP archive.

Collaboration

Shared documents can be edited together. Presence, display name, and optional password protection are integrated into both the UI and the settings.

What is visible

  • Presence indicators show who is currently active in the document.
  • The collaboration display name is set in the settings.
  • A password can be set for shared documents.

Important notes

  • The Allow shared editing option controls whether you automatically join shared documents.
  • Sharing and collaboration are designed to work together cleanly: create the link first, then edit together.

AI assistant

The AI assistant lives in a third panel next to preview and outline. It can work with the current document context and manage multiple chat sessions.

In the app

  • Open and close it with the panel toggle, Alt+Space, or Ctrl+Space.
  • Inside Mermaid code blocks, Ctrl+Space remains reserved for auto-completion.
  • Multiple chats per document are supported.
  • Changes made by AI can be undone.

In settings

  • Models and API access for multiple providers are managed in the AI Models tab.
  • Each provider is enabled individually.

Basic Markdown

The core syntax follows classic Markdown for text, headings, lists, links, images, and code.

Typical elements

# Heading

- Item 1
- Item 2

[Link](https://example.com)
![Image](image.png)

Code and quotes

`inline`

```js
console.log("Hello")
```

> Quote

GitHub Flavored Markdown (GFM)

GFM stands for GitHub Flavored Markdown. In mdedit.io this mainly includes tables, task lists, automatic links, and strikethrough.

Element Example Note
Task lists - [ ] Open, - [x] Done Useful for checklists and planning documents.
Tables | A | B | Also supports alignment and more advanced table plugins.
Autolinks https://example.com Web addresses are linked automatically.
Strikethrough ~~obsolete~~ Useful for review workflows and status marking.

Mermaid diagrams

Mermaid is rendered directly from code blocks. There is also a visual Mermaid editor with preview, properties, and zoom.

Supported diagram types

Flowchart, Sequence, State, Class, Entity Relationship, Gantt, Journey, Pie, Mindmap, Timeline, QuadrantChart, GitGraph, and Requirement Diagram.

Example

```mermaid
flowchart TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Continue]
```

Math with KaTeX

Formulas can be written inline or as blocks and are rendered with KaTeX.

Inline

$E=mc^2$

Block

$$
\int_0^\infty e^{-x^2} \, dx = \frac{\sqrt{\pi}}{2}
$$

Extended syntax

In addition to basic Markdown and GFM, mdedit.io includes extra plugins for more structured documents.

Feature Example Use
Footnotes Text[^1] and [^1]: Footnote Sources, explanations, and annotations.
Definition lists Term\n: Definition Glossaries and term lists.
Admonitions ::: warning ... ::: Note, warning, and tip callout boxes.
Emoji :rocket: Short visual markers in text.
Subscript / superscript H~2~O, x^2^ Formulas and scientific notation.
Mark ==Important== Highlight text.
Abbreviations *[HTML]: HyperText Markup Language Tooltips for abbreviations.
TOC [[toc]] Automatic table of contents inside the document.
Attributes ### Title {#id} IDs, classes, and attributes directly in Markdown.

Scientific documents

For structured academic and scientific writing, mdedit.io supports automatic section numbering, typed section IDs, internal cross-references, and bibliography management via BibTeX/CSL.

Frontmatter keys

KeyValueEffect
number-sectionstrueHeadings are automatically numbered in decimal form (1, 1.1, 1.1.1 …).
citation-sourceembeddedEnables the BibTeX/CSL citation pipeline. References are rendered as a bibliography at the end of the document.

Section IDs and cross-references

Assign a typed ID to a heading and reference it anywhere in the text:

Assign an ID

## Methodology {#sec:methodology}

### Data collection {#sec:data}

Cross-reference in text

As described in [@sec:methodology],
see also [@sec:data].

The preview resolves [@sec:id] into a clickable link with the section number, e.g. Section 2.1.

Citations and bibliography

When citation-source: embedded is set, mdedit.io reads the bibliography from an mdedit-bibliography block inside the document. The block accepts BibTeX or CSL JSON:

---
citation-source: embedded
number-sections: true
---

## Introduction {#sec:intro}

As shown by [@Author2024] …

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

You can also place a CSL JSON array in the same block. Use #refs when you want to place the references section explicitly.

Bibliography modal: manage sources

Click the bibliography icon in the toolbar to open the modal for managing all sources in the embedded block.

ActionDescription
DOI searchEnter a DOI → Crossref metadata is fetched and added as a new entry.
Search (OpenAlex)Search by title or author in the open academic literature database. No account required.
ZoteroEnter your Zotero user ID and API key → import sources from your Zotero library. Credentials stay in the browser (sessionStorage only).
New sourceAdd a source manually using the form.
ImportOpen a .bib (BibTeX) or .json (CSL JSON) file → entries are merged into the block (no duplicates).
JSON / BibTeXDownload the current block as a CSL JSON or BibTeX file.

PDF vs. DOCX in the scientific workflow

mdedit.io exports scientific documents in two formats for different purposes:

  • PDF (Paged preview): Print-ready output for submission and archiving. Layout, margins and typography are rendered precisely.
  • DOCX (Word): Editable review format for supervisor feedback and track-changes annotation. Headings, body text, lists, tables, citations and bibliography remain fully editable. Mermaid diagrams and complex layout elements are best-effort.

Scientific containers

Semantic environments for theorems, definitions, proofs and similar structures. Use Pandoc fenced divs with a type name and optional title:

::: theorem Fundamental Theorem of Calculus
Let $f$ be continuously differentiable on $[a,b]$, then …
:::

::: definition
A set $M$ is called **compact** if …
:::

::: proof
From compactness it follows that …
:::

Supported types: theorem, definition, proof, remark, example, lemma, corollary, proposition. Containers are numbered and visually set apart in preview and PDF.

Appendix mode

Place <!-- appendix --> or ::: appendix anywhere in the document to have all subsequent ## headings automatically labelled Appendix A, B, C …. In the PDF each appendix starts on a new page:

## Conclusion

<!-- appendix -->

## Raw measurement data

(Contents of Appendix A)

## Interview transcripts

(Contents of Appendix B)

Mermaid diagrams with captions

A caption and figure ID can be specified directly inside the Mermaid code block as comments:

```mermaid
%% caption: System architecture overview
%% id: fig:architecture
flowchart LR
  A[Client] --> B[Server]
  B --> C[Database]
```

In the PDF the diagram is placed as a numbered figure. Use [@fig:architecture] to cross-reference it in the text.

Footnotes in PDF

Standard Markdown footnotes are placed as true page footnotes in the PDF — Paged.js automatically positions them at the bottom of the correct page:

This claim is disputed.[^1]

[^1]: See Müller (2023), pp. 45–48 for an extended discussion.

Author comments

Text between %% is treated as an internal author comment and stripped entirely from both preview and export. Useful for working notes, TODOs, and editorial remarks:

%% TODO: expand this section %%

The finished paragraph goes here.

%% REVIEW: check citation — page number missing %%

Single-line comments without a closing %% are also removed.

Layout, print & images

For print-oriented documents, mdedit.io combines Markdown with document-local layout rules, preview presets, and paged preview.

Layout features

  • The Document preset uses layout rules directly from the Markdown file.
  • The layout editor controls margins, typography, tables, and visual rules.
  • Columns are supported with :::: columns plus break markers for row, column, section, and page.
  • Page view provides print- and PDF-like rendering.

Inserting images

  • Images can be inserted into the editor by paste or drag and drop.
  • The app stores the asset and inserts the matching Markdown image link.
  • Assets are included in ZIP exports.

Figures & tables

mdedit.io automatically detects numbered figures and table captions and can generate figure and table lists from them.

Image attributes

Place <!-- img: ... --> directly before an image link to control alignment, size, and visual effects:

OptionExampleEffect
alignalign=rightleft, right, or center (default). Left/right images are wrapped by text.
widthwidth=60%Explicit width in %, cm, pt, or px.
frameframeSubtle border around the image.
shadowshadowLight drop shadow.
filterfilter=grayscalegrayscale or sepia for print optimization.

Image with marker

<!-- img: align=right width=40% frame -->
![Figure 1: Description](image.png)

Centered with grayscale

<!-- img: align=center width=80% filter=grayscale -->
![Figure 2: Print test](schema.png)

Figure captions

If the alt text starts with Figure N:, the image is automatically numbered with a caption.

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

Table captions

A paragraph immediately before a table that starts with Table N: is recognized as a table caption:

Table 1: Comparison of layout areas.

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

List of figures and list of tables

Place one of the following markers at the desired location in the document:

List of figures

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

# List of Figures

List of tables

<!-- list-of-tables -->

# List of Tables

Keyboard shortcuts

Shortcut Action
F1Open help
F2Show a random tip
EscapeClose a modal or the settings
Alt+Space / Ctrl+SpaceOpen or close the AI assistant
Ctrl+Shift+LOpen the layout editor
Ctrl+ / Ctrl+Switch between folders
Ctrl+ / Ctrl+Move through documents in the history
Ctrl+0Open the folder overview
Ctrl+SpaceMermaid auto-completion in the editor inside Mermaid code blocks