Markdown-Editor

Markdown mit Live-Vorschau schreiben und als HTML herunterladen

Editor

Vorschau

So funktioniert es

Markdown-Editor — Markdown mit Live-Vorschau schreiben und als HTML herunterladen. Alle Verarbeitung erfolgt in deinem Browser — kein Upload, keine Anmeldung, keine E-Mail. Für immer kostenlos.

Zuletzt aktualisiert: 2026-05-06

Editor's note

Wir haben das gebaut, weil wir Blogposts und READMEs entwerfen wollten, ohne jeden Kommafix per git zu committen, nur um zu sehen, wie eine Überschrift gerendert aussieht. Lokale Markdown-Previewer gibt es, aber den Installier-eine-VS-Code-Erweiterung-Tanz für einen schnellen Post zu durchlaufen ist schwerer als das eigentliche Schreiben. Ein Browser-Tab, der die Vorschau in dem Moment zeigt, in dem du tippst, passt zu unserer realen Schreibgewohnheit — links tippen, rechts schauen, wiederholen — und der Split-Pane ist Absicht, kein Feature, das wir zu einklappen vergessen haben.

Die beiden Export-Buttons gibt es, weil sie in unserem eigenen Workflow tatsächlich unterschiedliche Jobs erfüllen. Copy HTML nutzen wir zum Ausliefern — in ein CMS einfügen, an eine E-Mail hängen, in eine statische Seite ablegen — und DOMPurify sitzt mitten in dieser Pipe, damit wir nicht die Leute sind, die eine XSS-Lücke in eine Marketing-Seite eingeschleust haben. Das Markdown-Copy ist fürs Archivieren der Quelle, die Version, die du wirklich behalten willst, wenn das gerenderte HTML in sechs Monaten unausweichlich gegen ein neues Stylesheet neu erzeugt werden muss.

Über Markdown-Editor

Dieser Markdown Editor ist eine zweispaltige Live-Schreibumgebung: Tippe links Markdown und beobachte rechts in Echtzeit die gerenderte HTML-Vorschau. Wenn dir das Ergebnis gefällt, kannst du das Markdown kopieren, das gerenderte HTML kopieren oder das HTML als eigenständige Datei herunterladen, die du in eine Website einbinden oder per E-Mail teilen kannst.

Über die Bibliothek marked unterstützt er GitHub-flavored Markdown — Überschriften, Listen, Tabellen, Fenced Code Blocks, Blockquotes, Links, Bilder, Inline-HTML und weiche Zeilenumbrüche — wobei die Ausgabe mit DOMPurify bereinigt wird, sodass das kopierte HTML ohne XSS-Risiken einbettbar ist.

Alles läuft in deinem Browser. Es gibt kein Konto, kein Auto-Save zu einem Server und keinen Datei-Upload — deine Notizentwürfe, Blogposts, READMEs und Meeting-Protokolle verlassen deinen Rechner nie. Ein Reload löscht den Editor, behandle ihn also als Notizblock und nicht als langfristigen Speicher.

So verwenden Sie Markdown-Editor

Klicke in den Editor-Bereich und beginne, Markdown zu schreiben. Ein Startdokument ist hinterlegt, damit du siehst, wie jede Konstruktion gerendert wird.
Wirf einen Blick auf den Vorschau-Bereich, um zu prüfen, ob Überschriften, Links, Listen und Bilder so aussehen, wie du es beabsichtigt hast.
Wechsle das Layout zwischen Both, Editor only und Preview only, je nachdem, ob du schreibst, prüfst oder präsentierst.
Nutze Copy Markdown, um die Rohquelle zu erhalten, oder Copy HTML, um das gerenderte, bereinigte HTML zu erhalten.
Klicke auf Download HTML, um die Vorschau als eigenständige .html-Datei zu speichern, die du an eine E-Mail anhängen oder im Browser öffnen kannst.
Lade die Seite neu, um ein brandneues Dokument zu starten — es gibt absichtlich kein Auto-Save.

Häufige Anwendungsfälle

GitHub-README-Dateien, Issue-Beschreibungen oder Pull-Request-Texte abseits der GitHub-Oberfläche entwerfen.
Blogposts in Markdown schreiben und sauberes HTML für eine statische Site oder eine Newsletter-Plattform exportieren, die Markdown nicht direkt versteht.
Release Notes oder Changelogs vorbereiten und genau sehen, wie die Formatierung in Slack, Notion oder einem CMS aussieht, bevor du sie einfügst.
Markdown unterrichten — Lernende können Syntax ausprobieren und das gerenderte Ergebnis daneben sehen, ohne etwas installieren zu müssen.
Einen aus der Doku gezogenen Markdown-Schnipsel schnell in HTML wandeln, um ihn in einem Help-Center-Artikel oder einer Wissensdatenbank zu nutzen.

Tipps und häufige Fehler

Verwende vier Leerzeichen oder einen Tab, um Listenpunkte zu verschachteln; eine Einrückungs-Diskrepanz ist der häufigste Grund, warum eine verschachtelte Liste in der Vorschau zu einer flachen kollabiert.
Fenced Code Blocks (```sprache) erhalten in der HTML-Ausgabe sprachgetaggte Klassennamen — verbinde sie auf deiner eigenen Seite mit einem Syntax-Highlighter wie Prism oder highlight.js für eingefärbten Code.
Inline-HTML ist erlaubt und wird gerendert, sodass du <kbd>, <details> oder andere Tags einsetzen kannst, die Markdown nativ nicht abdeckt. DOMPurify entfernt dennoch gefährliche Attribute und Script-Tags aus der Ausgabe.
Wenn du HTML kopierst, bekommst du ein Fragment, kein vollständiges Dokument. Hülle es in eine <html><body>-Struktur mit deinem eigenen Stylesheet, bevor du eine ausgefeilte Seite speicherst.

Häufig gestellte Fragen

Welcher Markdown-Dialekt wird unterstützt?

GitHub-flavored Markdown über die marked-Bibliothek — Überschriften, Listen, Tabellen, eingezäunte Codeblöcke, Blockzitate, Links, Bilder, Inline-HTML, weiche Zeilenumbrüche und mehr.

Ist die HTML-Ausgabe sicher in meine Site einzubetten?

Ja. Wir bereinigen sie mit DOMPurify, das gefährliche Attribute und Skripte entfernt. Du kannst das Ergebnis ohne XSS-Risiko in jede Seite einfügen.

Wird mein Markdown gespeichert oder hochgeladen?

Nein. Sowohl Rendering als auch Download geschehen lokal im Browser. Seite neu laden leert den Editor.

Kann ich der Vorschau eigenes CSS hinzufügen?

Die In-App-Vorschau verwendet die Standardtypografie der Site. Um die Ausgabe für deine eigene Seite zu stylen, kopiere das HTML und kombiniere es mit dem Stylesheet, das du ohnehin nutzt — das Markup ist sauberes semantisches HTML, also funktioniert jedes Markdown-freundliche CSS.

Unterstützt der Editor Tabellen und Aufgabenlisten?

Ja. GitHub-flavored Markdown-Tabellen (mit Pipes und Bindestrichen) sowie Aufgabenlisten-Einträge (- [ ] / - [x]) werden in der Vorschau korrekt gerendert und bleiben im exportierten HTML erhalten.

Kann ich eine bestehende Markdown-Datei importieren?

Öffne die Datei in einem beliebigen Texteditor, kopiere den Inhalt und füge ihn in den Editor-Bereich ein. Es gibt keinen Datei-Picker, was das Tool vollständig offline-fähig hält und den Aufwand von Upload-Dialogen für kurze Schnipsel erspart.