mdedit.io ist ein browserbasierter Markdown-Editor mit Live-Vorschau, Outline-Baum, Mermaid, KaTeX, Layout-Editor, PDF/DOCX-Export, optionaler Kollaboration und integriertem KI-Panel.
Die Seite ist bewusst kompakt aufgebaut: Nutze links das Inhaltsverzeichnis oder springe direkt zu den häufigsten Themen.
Editor & Navigation
Die Hauptoberfläche besteht aus Sidebar, Markdown-Editor und rechter Arbeitsfläche für Vorschau, Baumansicht und KI-Chat.
Sidebar, Historie und Ordner
- Die Sidebar zeigt Dokumenthistorie und den aktuellen Ordner.
- Über die Suche filterst du Dokumente in der Historie.
- Ordner trennen Dokumentgruppen, lassen sich umbenennen, exportieren und löschen.
- Die Sidebar kann angeheftet oder eingeklappt werden.
Vorschau, Baum und Seitenansicht
- Die Vorschau rendert Markdown, Mermaid und KaTeX live.
- Die Baumansicht visualisiert die Dokumentstruktur als Netz oder Outline.
- Die Seitenansicht zeigt eine drucknahe Paged-Preview mit Seitenumbrüchen.
- Preview-Presets: Wissenschaftlich, Kompakt, Literarisch und Dokument.
Teilen & Export
Über das Share-Menü im Editorkopf lassen sich Inhalte kopieren, herunterladen und als Link teilen.
| Funktion |
Beschreibung |
| Permalink |
Erstellt einen teilbaren Link zum aktuellen Dokument. |
| Markdown / Word kopieren |
Kopiert Markdown oder formatierten Text direkt in die Zwischenablage. |
| Markdown / DOCX / PDF herunterladen |
Exportiert das aktuelle Dokument in die wichtigsten Formate. |
| ZIP-Export |
Exportiert den aktuellen Ordner oder alle lokalen Daten inklusive Assets als ZIP. |
Kollaboration
Freigegebene Dokumente können gemeinsam bearbeitet werden. Präsenz, Anzeigename und optionale Passwortsicherung sind in der Oberfläche und in den Einstellungen verankert.
Was sichtbar ist
- Präsenz-Indikatoren zeigen, wer aktuell im Dokument aktiv ist.
- Der Anzeigename für Kollaboration wird in den Einstellungen hinterlegt.
- Für geteilte Dokumente kann ein Passwort gesetzt werden.
Wichtige Hinweise
- Die Option Gemeinsame Bearbeitung erlauben steuert die automatische Teilnahme an geteilten Dokumenten.
- Teilen und Kollaboration greifen sauber zusammen: zuerst Link erstellen, dann gemeinsam bearbeiten.
KI-Assistent
Der KI-Assistent sitzt als drittes Panel neben Vorschau und Baumansicht. Er kann mit dem aktuellen Dokumentkontext arbeiten und neue Chat-Sitzungen verwalten.
Im Arbeitsbereich
- Öffnen und schließen per Panel-Umschalter, Alt+Space oder Ctrl+Space.
- In Mermaid-Codeblöcken bleibt Ctrl+Space für Auto-Completion reserviert.
- Mehrere Chats pro Dokument sind möglich.
- Änderungen durch KI können rückgängig gemacht werden.
In den Einstellungen
- Modelle und API-Zugänge für mehrere Anbieter werden im Tab KI-Modelle verwaltet.
- Die Aktivierung einzelner Provider erfolgt pro Anbieter.
Basis-Markdown
Die Grundsyntax entspricht klassischem Markdown für Texte, Überschriften, Listen, Links, Bilder und Code.
Typische Elemente
# Überschrift
- Punkt 1
- Punkt 2
[Link](https://example.com)

Code und Zitate
`inline`
```js
console.log("Hallo")
```
> Zitat
GitHub Flavored Markdown (GFM)
GFM steht für GitHub Flavored Markdown. In mdedit.io gehören dazu vor allem Tabellen, Aufgabenlisten, automatische Links und Durchstreichung.
| Element |
Beispiel |
Hinweis |
| Aufgabenlisten |
- [ ] Offen, - [x] Erledigt |
Geeignet für Checklisten und Planungsdokumente. |
| Tabellen |
| A | B | |
Unterstützt auch Ausrichtung und komplexere Tabellen-Plugins. |
| Autolinks |
https://example.com |
Webadressen werden automatisch verlinkt. |
| Durchstreichung |
~~veraltet~~ |
Nützlich für Review und Status-Markierung. |
Mermaid-Diagramme
Mermaid wird direkt aus Codeblöcken gerendert. Zusätzlich gibt es einen visuellen Mermaid-Editor mit Vorschau, Eigenschaften und Zoom.
Unterstützte Diagrammtypen
Flowchart, Sequence, State, Class, Entity-Relationship, Gantt, Journey, Pie, Mindmap, Timeline, QuadrantChart, GitGraph und Requirement Diagram.
Beispiel
```mermaid
flowchart TD
A[Start] --> B{Entscheidung}
B -->|Ja| C[Weiter]
```
Mathe mit KaTeX
Formeln lassen sich inline oder blockweise schreiben und werden mit KaTeX gerendert.
Inline
$E=mc^2$
Block
$$
\int_0^\infty e^{-x^2} \, dx = \frac{\sqrt{\pi}}{2}
$$
Erweiterte Syntax
Neben Basis-Markdown und GFM stehen zusätzliche Plugins für strukturierte Dokumente zur Verfügung.
| Feature |
Beispiel |
Nutzen |
| Fußnoten |
Text[^1] und [^1]: Fußnote |
Quellen, Erläuterungen und Anmerkungen. |
| Definition Lists |
Begriff\n: Definition |
Glossare und Begriffslisten. |
| Admonitions |
::: warning … ::: |
Hinweis-, Warn- und Tippboxen. |
| Emoji |
:rocket: |
Kurze visuelle Marker im Text. |
| Subscript / Superscript |
H~2~O, x^2^ |
Formeln und wissenschaftliche Notation. |
| Mark |
==Wichtig== |
Text hervorheben. |
| Abkürzungen |
*[HTML]: HyperText Markup Language |
Tooltips für Kürzel. |
| TOC |
[[toc]] |
Automatisches Inhaltsverzeichnis im Dokument. |
| Attribute |
### Titel {#id} |
IDs, Klassen und Attribute direkt im Markdown. |
Wissenschaftliche Dokumente
Für strukturierte wissenschaftliche Arbeiten unterstützt mdedit.io Abschnittsnummern, typisierte Abschnitts-IDs und interne Querverweise sowie Literaturverwaltung mit BibTeX/CSL.
Frontmatter-Schlüssel
| Schlüssel | Wert | Wirkung |
number-sections | true | Überschriften werden automatisch dezimal nummeriert (1, 1.1, 1.1.1 …). |
citation-source | embedded | Aktiviert die BibTeX/CSL-Zitationspipeline. Literatur wird am Dokumentende als Bibliografie gerendert. |
Abschnitts-IDs und Querverweise
Weise einer Überschrift eine typisierte ID zu und verweise im Text darauf:
ID vergeben
## Methodik {#sec:methodik}
### Datenerhebung {#sec:daten}
Querverweis im Text
Wie in [@sec:methodik] beschrieben,
siehe auch [@sec:daten].
Die Vorschau ersetzt [@sec:id] durch einen klickbaren Link mit der aufgelösten Abschnittsnummer, z. B. Abschnitt 2.1.
Zitationen und Bibliografie
Wenn citation-source: embedded gesetzt ist, liest mdedit.io die Bibliografie direkt aus einem mdedit-bibliography-Block. Der Block akzeptiert BibTeX oder CSL-JSON:
---
citation-source: embedded
number-sections: true
---
## Einleitung {#sec:intro}
Nach [@Autor2024] gilt …
```mdedit-bibliography
@article{Autor2024,
author = {Autor, A.},
title = {Titel},
year = {2024}
}
```
Alternativ kann der Block auch ein CSL-JSON-Array enthalten. Mit #refs wird die Referenzsektion explizit an der gewuenschten Stelle eingesetzt.
Bibliografie-Modal: Quellen verwalten
Über das Bibliografie-Icon in der Werkzeugleiste öffnet sich ein Modal zum Verwalten aller Quellen im eingebetteten Block.
| Funktion | Beschreibung |
| DOI suchen | DOI eingeben → Crossref-Metadaten werden automatisch abgerufen und als neue Quelle eingetragen. |
| Suchen (OpenAlex) | Titel oder Autor suchen → öffentliche Literaturdatenbank, kein Account nötig. |
| Zotero | Zotero User-ID und API-Key eingeben → Quellen aus der eigenen Zotero-Bibliothek importieren. Zugangsdaten bleiben im Browser (sessionStorage). |
| Neue Quelle | Quelle manuell mit Formular anlegen. |
| Importieren | .bib (BibTeX) oder .json (CSL-JSON) Datei öffnen → Einträge werden in den Block gemergt (keine Duplikate). |
| JSON / BibTeX | Den aktuellen Block als CSL-JSON- oder BibTeX-Datei herunterladen. |
PDF vs. DOCX Export im wissenschaftlichen Workflow
mdedit.io exportiert wissenschaftliche Dokumente in zwei Formaten mit unterschiedlichem Zweck:
- PDF (Paged-Preview): Drucknahe Ausgabe für Abgabe und Archivierung. Layout, Seitenränder und Typografie werden exakt übernommen.
- DOCX (Word): Editierbares Review-Format für Betreuer-Feedback und Track-Changes-Kommentierung. Überschriften, Fließtext, Listen, Tabellen, Zitationen und Literaturverzeichnis bleiben vollständig editierbar. Mermaid-Diagramme und komplexe Layouts sind Best-Effort.
Layout, Druck & Bilder
Für drucknahe Dokumente verbindet mdedit.io Markdown mit dokumentlokalen Layoutregeln, Preview-Presets und Paged-Preview.
Layoutfunktionen
- Dokument-Preset nutzt Layoutvorgaben direkt aus dem Markdown.
- Layout-Editor für Seitenränder, Typografie, Tabellen und visuelle Regeln.
- Spalten mit
:::: columns und Umbruchmarker für Zeile, Spalte, Abschnitt und Seite.
- Seitenansicht mit Druck-/PDF-nahem Rendering.
Bilder einfügen
- Bilder lassen sich per Einfügen oder Drag & Drop in den Editor übernehmen.
- Die App speichert das Asset und erzeugt den passenden Markdown-Bildlink.
- Assets werden bei ZIP-Exporten mitgenommen.
Tastenkürzel
| Kürzel |
Aktion |
| F1 | Hilfe öffnen |
| F2 | Zufälligen Tipp anzeigen |
| Escape | Modal oder Einstellungen schließen |
| Alt+Space / Ctrl+Space | KI-Assistent öffnen oder schließen |
| Ctrl+Shift+L | Layout-Editor öffnen |
| Ctrl+→ / Ctrl+← | Zwischen Ordnern wechseln |
| Ctrl+↑ / Ctrl+↓ | Zwischen Dokumenten der Historie wechseln |
| Ctrl+0 | Ordner-Übersicht öffnen |
| Ctrl+Space | Mermaid Auto-Completion im Editor innerhalb von Mermaid-Codeblöcken |