WYSIWYG-HTML-Editor
Ein WYSIWYG-HTML-Editor lässt Sie eine Seite gestalten, während Sie sie ansehen, und schreibt das Markup dazu selbst. Sehen Sie, wo die Vorschau in die Irre führen kann und wie Mobirise, unser kostenloser blockbasierter Editor, im Vergleich zu fünf anderen Tools abschneidet.
Kostenlos für private und kommerzielle Websites.
für die App und ihren HTML-Export
Die Mobirise-Desktop-App exportiert Ihre Website in jedem Plan als statische Dateien. Den Code im Editor zu öffnen setzt einen kostenpflichtigen Plan voraus.
WYSIWYG-HTML-Editoren im Überblick
Angaben zu den Editoren, zusammengetragen vom Mobirise-Team, Oktober 2026.
WYSIWYG steht für „What you see is what you get“ („Was Sie sehen, bekommen Sie“). In einem solchen Editor arbeiten Sie an der Seite, wie sie aussieht, nicht an ihrem Quelltext: Sie klicken auf eine Überschrift und tippen, ziehen ein Bild hinein oder ändern eine Farbe, und das Programm schreibt zu jeder Aktion das HTML und CSS. So lassen sich HTML-Seiten gestalten, ohne Tags zu tippen. Der Bildschirm zeigt allerdings eine nahe Vorschau und keine Garantie.
Klassische Editoren mit Entwurfsansicht, blockbasierte Baukästen, visuelle CSS-Designer und Code-Editoren mit Live-Vorschau.
Der visuelle Editor und sein HTML-Export kosten unter Windows, Mac und Linux nichts, und Sie starten mit 200+ Blöcken. Im kostenlosen Plan enthalten veröffentlichte Seiten das Mobirise-Branding.
Einfache .html-Seiten, die mit Bootstrap 5 gestaltet sind, samt ihren Skripten. Jeder Host, der einfache Dateien ausliefert, kann sie bereitstellen; serverseitig läuft kein Code.
Um das Markup selbst zu lesen oder zu ändern, brauchen Sie die Erweiterung Code Editor, die in den Plänen KIT, BASE und GROW enthalten ist und pro Block oder pro Seite funktioniert.
Mobirise kann keine Website und keine Vorlage laden, die anderswo erstellt wurde. Pinegrow, Dreamweaver, Bootstrap Studio und CoffeeCup können das.
Die Blöcke passen sich Smartphone, Tablet und Desktop an, und Sie sehen jede Breite in der Vorschau. Ein separates Smartphone-Layout gibt es nicht.
Welcher visuelle HTML-Editor zu Ihrer Aufgabe passt
Den einen besten Editor gibt es nicht, wählen Sie also nach der Arbeit, die ansteht. Bei einigen dieser Aufgaben ist ein Konkurrent die bessere Antwort, und seine Karte sagt es.
Mobirise
Sie sehen das fertige Aussehen, während Sie Blöcke an ihren Platz ziehen, deren Text neu tippen und Blockparameter anpassen; die kostenlose App schreibt daraus eine statische Bootstrap-5-Website. Der Haken: Fremdes HTML lässt sich nicht laden, und den Code anzusehen kostet einen Plan.
Pinegrow Web Editor
Lädt jede vorhandene .html-Datei und zeigt neben dem Markup eine visuelle Live-Ansicht; Tailwind CSS wird ebenfalls unterstützt. Der Haken: 18 $ pro Monat, 149 $ pro Jahr oder einmalig 199 $.
Bootstrap Studio
Bootstrap-Komponenten per Drag-and-Drop, ein integrierter Code-Editor und Offline-Projekte, für einmalig 29 $ oder 59 $. Der Haken: Sie bleiben im Komponentenmodell von Bootstrap.
Adobe Dreamweaver
In Live View klicken Sie in die gerenderte Seite und ändern Wortlaut, Bilder und Klassen, wobei der Quelltext das Sagen behält. Der Haken: ein Abo, 22,99 $ pro Monat im Tarif für eine einzelne App, und keine Linux-Version.
CoffeeCup HTML Editor
Eine geteilte Vorschau zeichnet die Seite beim Tippen neu; es gibt eine kostenlose Edition, die Vollversion kostet einmalig 29 $. Der Haken: nur Windows, und jedes Tag schreiben Sie selbst.
Webflow
Ein auf CSS aufgebauter visueller Designer, bei dem jeder Breakpoint von Hand eingestellt wird; für den Code-Export brauchen Sie einen kostenpflichtigen Plan. Der Haken: Die Bedienfelder bilden CSS ab, deshalb lohnt sich das vor allem für Leute, die es schon kennen.
8B AI
Sie tippen einen Satz und erhalten ein komplettes Website-Design; im kostenlosen Plan sehen Sie das echte HTML und CSS dahinter. Der Haken: Es läuft im Browser, und Veröffentlichung, vollständiger Export und Chat-Änderungen setzen den Pro-Plan voraus (9 $ pro Monat bei jährlicher Abrechnung).
Elementor
Ein Page-Builder-Plugin für WordPress-Websites. Der Haken: Sie erhalten keinen eigenständigen HTML-Ordner, denn die Seiten brauchen ein laufendes WordPress auf Ihrem Server.
Eine Einschränkung: Mobirise stammt von uns, lesen Sie diese Liste also als Text einer interessierten Partei. Die Angaben zu den Konkurrenten stammen aus den Produkt- und Preisseiten der jeweiligen Hersteller, und wo ein Konkurrent eine Aufgabe besser löst, nennen wir ihn.
Sechs visuelle HTML-Tools im direkten Vergleich
Zeilen für Leute, denen das HTML selbst wichtig ist: was Sie am Bildschirm bearbeiten, wie offen der Code ist und ob fremde Dateien geladen werden.
| Funktion | Mobirise | Pinegrow Web Editor | Adobe Dreamweaver | 8B AI | Bootstrap Studio | CoffeeCup HTML Editor |
|---|---|---|---|---|---|---|
| Was Sie am Bildschirm bearbeiten | Die Seite selbst: hineingezogene Blöcke, direkt eingetippter Text, Einstellungen pro Block | Die gerenderte Seite neben ihren Quelldateien | Überwiegend Code; Live View erlaubt Änderungen an der gerenderten Seite | Ein generiertes Design, das im Pro-Plan per KI-Chat überarbeitet wird | Bootstrap-Komponenten auf einer Arbeitsfläche, mit Code-Bereich | Code, mit Live-Vorschau im geteilten Bildschirm |
| Eigenen Code tippen | Über die Erweiterung Code Editor (KIT, BASE, GROW), für einen Block oder eine Seite | Ja, mit Zwei-Wege-Synchronisierung zu VS Code | Ja, das ist der Hauptmodus, mit Code-Hinweisen | Kein Handbearbeiten angegeben; der kostenlose Plan zeigt das echte HTML und CSS | Ja: HTML, SASS, JavaScript und JSON in einem Editor nach dem Vorbild von VS Code | Ja; er vervollständigt Code und prüft Ihr Markup |
| Lädt eine vorhandene .html-Website | Nein, nur in Mobirise begonnene Projekte | Ja, jede vorhandene Website | Ja, auch vorhandene Bootstrap-Seiten | Vom Hersteller nicht angegeben | Ja, indem Sie vorhandene Seiten, Stylesheets, Skripte und Bilder in ein Projekt ziehen | Ja, lokale Dateien oder direkt auf einem Server geöffnete Seiten |
| Framework des exportierten HTML | Bootstrap 5 | Tailwind CSS, Bootstrap oder keines | Beliebig; wird mit Bootstrap 5.3.8, 4.4.1 und 3.4.1 geliefert | Eigenes Markup; kein Bootstrap | Bootstrap 5, 4 oder 3 | Ihr eigenes Markup; kostenlose responsive Vorlagen zum Einstieg |
| Läuft unter | Windows, macOS (Build für Apple Silicon oder Intel), Debian-basiertes Linux, Browser, Android | Windows, macOS, Linux; auch als Browser-Edition | Windows und macOS | Nur im Browser | Windows, macOS, Linux | Nur Windows |
| Preis und Abrechnung | 0 $ für den Editor und seinen HTML-Export. Jahrespläne: KIT für 149 $ schaltet den Code Editor und Premium-Themes frei; BASE (199 $) und GROW (249 $) bringen zusätzlich gehostete Websites und KI | 18 $ pro Monat, 149 $ pro Jahr oder einmalig 199 $; kostenlose Testversion | Tarif für eine einzelne App: 22,99 $ pro Monat, Jahresvertrag mit monatlicher Zahlung; kostenlose Testversion | Entwerfen ist kostenlos; Pro, nötig zum Veröffentlichen, kostet 9 $ pro Monat bei jährlicher Abrechnung | Einmalzahlung: 29 $ Standard oder 59 $ Lifetime | Kostenlose Edition oder unbefristete Lizenz für 29 $ mit einem Jahr Upgrades |
Wo „was Sie sehen“ nicht mehr stimmt
Der Editor zeichnet die Seite einmal, auf Ihrem Bildschirm. Jeder Besucher bringt einen anderen Browser, ein anderes Gerät und andere Schriften mit.
In den meisten heutigen visuellen Editoren ist die Arbeitsfläche eine echte Seite, die von einer Browser-Engine gezeichnet wird; vieles, was Sie sehen, ist also echt: dieselben Tags, dieselben Stile. Die Lücken öffnen sich dort, wo die Ausstattung eines Besuchers von Ihrer abweicht. Drei davon erwischen fast jeden.
Schriften
Besucher sehen Ihre Schrift nur, wenn die Seite sie aus dem Web lädt oder mit der Website ausliefert. Andernfalls weicht ihr Gerät auf eine andere Schriftart aus, und Überschriften brechen anders um. Prüfen Sie, ob das Theme seine Schriften mitliefert.
Bildschirmgrößen
Die Arbeitsfläche zeigt jeweils eine Breite. Eine Überschrift, die auf einen Laptop passt, kann auf dem Smartphone über mehrere Zeilen umbrechen, und eine Reihe von Spalten kann sich stapeln. Gehen Sie vor dem Veröffentlichen alle Breiten in der Vorschau durch.
Skripte
Slider, Menüs, Formulare, Karten und eingebettete Videos verhalten sich in einem Editor oft anders oder sind absichtlich angehalten. Betrachten Sie sie dort als Platzhalter, testen Sie die exportierte Seite in echten Browsern und senden Sie ein Testformular vom Live-Host.
Vier Arten von WYSIWYG-HTML-Editoren
Alle zeigen die Seite, während Sie arbeiten. Sie unterscheiden sich darin, was Sie anfassen: die Seite, fertige Blöcke, CSS-Eigenschaften oder den Code.
Klassische Entwurfsansicht
Eine dokumentähnliche Arbeitsfläche über dem HTML, meist neben dem Code; Live View von Dreamweaver ist die heutige Form davon. Geeignet für alle, die von Hand gebaute Websites pflegen und Text korrigieren wollen, ohne sich durch Tags zu suchen.
Blockbasierte Baukästen
Seiten entstehen aus fertigen Abschnitten oder Komponenten, wie in Mobirise oder Bootstrap Studio, während das Programm das Markup schreibt. Viele nennen diese Art HTML-Seiten-Baukasten. Richtig für alle, die eine Website ohne Code wollen; auch viele einfache Homepage-Baukästen für Einsteiger arbeiten so.
Visuelle CSS-Designer
Webflow oder Pinegrow auf Ihren eigenen Dateien: Sie gestalten Elemente in Bedienfeldern, die CSS-Eigenschaften entsprechen. Geeignet für Designer, die ohnehin in Boxen, Klassen und Breakpoints denken.
Code-Editoren mit Live-Vorschau
CoffeeCup HTML Editor und seinesgleichen, oft als WYSIWYG-HTML-Editoren mit Vorschau aufgeführt: Sie tippen das HTML, und ein Bereich daneben zeichnet die Seite neu. Sie eignen sich für Leute, die HTML lernen, und für Entwickler, die jedes Tag schreiben, die Wirkung aber gern sofort sehen.
Sie bauen eine eigene App statt einer Website? Dann ist der gesuchte Editor eine Komponente: ein Rich-Text-Feld, das Sie in ein Formular, ein CMS oder ein Helpdesk einbetten, damit Ihre Nutzer Text formatieren können. TinyMCE und CKEditor 5 sind die funktionsreichen Veteranen, mit kostenpflichtigen Cloud-Plänen und Add-ons; Quill ist ein leichterer Open-Source-WYSIWYG-HTML-Editor; TipTap ist ein Headless-Toolkit auf Basis von ProseMirror, dessen Toolbar Sie selbst gestalten. Sie liefern HTML-Schnipsel innerhalb Ihres Produkts, keine ganzen Seiten, weshalb sie in der Tabelle oben nicht vorkommen.
Was Sie in Mobirise visuell einstellen und wofür Code nötig ist
Das meiste einer Seite entsteht durch Zeigen und Klicken. Die Erweiterung Code Editor deckt ab, was die Bedienfelder auslassen.
Blöcke
Jede Seite im Editor ist eine Spalte aus vorgefertigten Abschnitten. Ziehen Sie einen neuen aus der Seitenleiste herein und löschen Sie jeden, den Sie nicht brauchen.
Text und Überschriften-Tags
Tippen Sie direkt auf die Seite. Jeder Titel erhält das H-Tag, das Sie wählen, die Gliederung der Seite bestimmen also Sie.
Fotos
Klicken Sie ein Foto an, um Ihr eigenes einzusetzen. Verkleinern Sie große Dateien vor dem Hinzufügen; die Tipps weiter unten erklären, warum.
Blockparameter
Ein Bereich pro Block legt Abstände, Hintergrund, sichtbare Teile wie Titel oder Schaltflächen und die Spaltenzahl fest.
Schriften und Farben
Im Style Editor wählen Sie die Schriftarten und die Farbpalette, die die Blöcke verwenden.
Code, wenn Sie ihn brauchen
Ein zusätzliches Attribut, eine eigene CSS-Regel oder überarbeitetes Markup läuft über die Erweiterung Code Editor, die in KIT, BASE und GROW enthalten ist.
Eine Grenze, die Sie kennen sollten: Das HTML, das Sie anlegen, ist das HTML, das jedes Gerät erhält. Mobirise bietet kein Layout nur für Smartphones, und kein Element lässt sich bei nur einer Bildschirmgröße ausblenden.
Die Dateien, die Sie beim Export erhalten
Der Export aus der Desktop-App kostet in keinem Plan etwas. Sie bauen stattdessen im Browser? Dort setzt der Code-Download BASE oder GROW voraus.
Seiten und Bilder
Eine HTML-Datei pro Seite, mit gewöhnlichen Überschriften, Absätzen und Links, dazu Ihre Fotos und die Grafiken des Themes im exportierten Ordner.
Stile und Skripte
CSS und JavaScript von Bootstrap 5, die eigenen Stile des Themes, die Entscheidungen aus den Bedienfeldern und die Skripte hinter Menüs und Slidern.
Nichts auf dem Server
Kein PHP, keine Datenbank, kein Admin-Bereich, die Website läuft also bei jedem gewöhnlichen Webhost oder auf GitHub Pages.
Der Export funktioniert nur in eine Richtung. Mobirise baut aus seinem eigenen Projekt, nicht aus HTML, deshalb bleiben Änderungen an den exportierten Dateien in einem anderen Editor außerhalb davon. Nehmen Sie Code-Änderungen im Code Editor vor, oder behandeln Sie Handänderungen als letzten Schritt.
So bleibt visuell erstelltes HTML sauber und schnell
Visuelle Tools bringen von Haus aus etwas Gewicht mit. Diese Gewohnheiten halten es niedrig, in Mobirise oder jedem anderen Editor.
Mit Überschriften gliedern, nicht mit Größen
Geben Sie jeder Seite genau ein H1, ordnen Sie H2 und H3 darunter ein und wählen Sie jedes Tag nach seinem Rang in der Gliederung. Wie groß es aussieht, ist eine Frage des Stylings.
Fotos zuerst verkleinern
Passen Sie jedes Bild auf etwa die größte Breite an, in der es erscheint, und speichern Sie es als WebP oder gut komprimiertes JPEG. Ein einziges Kameraoriginal kann schwerer sein als der Rest der Seite.
An einer Stelle gestalten
Wer Schaltflächen einzeln umgestaltet, hinterlässt eine Spur von Einzelregeln. Legen Sie Schriften und Farben zentral fest, im Style Editor oder dem Gegenstück Ihres Tools, dann bleibt das CSS kurz.
Außerhalb des Editors testen
Öffnen Sie die exportierte Seite in mehr als einem Browser, lassen Sie den W3C-Validator und einen Geschwindigkeitstest wie PageSpeed Insights laufen und beheben Sie vor dem Start, was sie bemängeln.
Ein Mobirise-Theme oder kostenlose HTML-Website-Vorlagen?
Beides gibt Ihnen am ersten Tag ein fertiges Aussehen. Der Unterschied liegt darin, wer das Markup verfasst und welche Editoren es danach laden können.
Eine heruntergeladene Vorlage
Ein Ordner mit Dateien, die jemand anderes geschrieben hat. Bearbeiten Sie ihn in einem Code-Editor oder einem visuellen Tool, das HTML von außen öffnet, etwa Pinegrow, Dreamweaver, Bootstrap Studio oder CoffeeCup. Lesen Sie die Lizenz: Manche kostenlosen Vorlagen verlangen einen Link zum Urheber.
Ein Mobirise-Theme
Eine Bibliothek aus Blöcken, die in der App lebt statt in einem Ordner mit Dateien. Sie setzen Seiten daraus visuell zusammen, und der Export erzeugt das HTML. Kostenlose Nutzer erhalten 200+ Blöcke in einem einzigen Basis-Theme; KIT schaltet alle Premium-Themes und Erweiterungen frei, insgesamt über 220.
Das Aussehen einer Vorlage übertragen
Mobirise kann keine anderswo erstellte Vorlage öffnen, auch keine auf Bootstrap 5 basierende. Bauen Sie das Aussehen mit Blöcken nach, oder geben Sie Mobirise AI einen Screenshot als Prompt und bearbeiten Sie die vier Designs, die es liefert, sofern die Lizenz der Vorlage das erlaubt.
Wem Mobirise als visueller Editor für HTML nützt
Mobirise passt zu manchen Aufgaben und zu anderen nicht. So erkennen Sie, auf welcher Seite Ihre liegt.
Passt gut
- Sie möchten Seiten visuell aufbauen und nie ein Tag tippen
- Sie brauchen einfache Dateien für Ihren eigenen Host, ohne für einen Plan zu zahlen
- Sie bauen Kundenwebsites aus einheitlichen, responsiven Blöcken
- Sie arbeiten offline am Laptop und veröffentlichen später
- Sie möchten zuerst einen KI-Entwurf und danach Handarbeit im selben Editor
Ein anderes Tool passt besser, wenn
- Sie eine alte handcodierte Website oder eine heruntergeladene Vorlage reparieren sollen: Dreamweaver, Pinegrow oder CoffeeCup HTML Editor
- Ihr Projekt Tailwind oder gar kein Framework verlangt: Pinegrow
- Sie pixelgenaue Kontrolle und Stile pro Breakpoint wünschen: Webflow
- Sie lieber einmal für Bootstrap-Arbeit bezahlen: Bootstrap Studio
- Sie Code kostenlos schreiben und in der Vorschau sehen möchten: die kostenlose Edition von CoffeeCup
- Die Website bereits auf WordPress läuft: Elementor
Fragen zum visuellen Bearbeiten von HTML
Was ist ein WYSIWYG-HTML-Editor?
Ein Editor, in dem Sie eine Seite so ändern, wie sie am Bildschirm erscheint, während das Programm HTML und CSS schreibt. Das Kürzel verspricht, dass die bearbeitete Seite der veröffentlichten entspricht. In der Praxis sind beide nah beieinander, aber nicht identisch, weil Schriften, Bildschirmbreite und Skripte vom Browser des jeweiligen Besuchers abhängen.
Ist Mobirise ein Drag-and-Drop-HTML-Editor?
Ja, auf der Ebene von Blöcken: Sie ziehen fertige Abschnitte aus einer Seitenleiste auf die Seite und tippen dann hinein. Einzelne Elemente setzen Sie nicht an beliebige Stellen; das Layout ergibt sich aus den Blöcken und ihren Parametern. Mehr zu dieser Arbeitsweise: kostenlose Drag-and-Drop-Website-Builder.
Kann ich den HTML-Code in Mobirise bearbeiten?
Ja, sobald Sie die Erweiterung Code Editor haben, die zu KIT (149 $ pro Jahr), BASE und GROW gehört. Sie zeigt Markup und CSS eines einzelnen Blocks oder der ganzen Seite. Im kostenlosen Plan exportierte Dateien lassen sich ebenfalls in jedem Texteditor öffnen, doch dort vorgenommene Änderungen fließen nie ins Projekt zurück.
Kann Mobirise eine heruntergeladene HTML-Vorlage öffnen?
Nein. Eine Vorlage aus einem Marktplatz oder eine handcodierte Website ist einfaches HTML, und Mobirise arbeitet nur mit Projekten, die in ihm selbst erstellt wurden. Dreamweaver, Pinegrow, Bootstrap Studio und CoffeeCup HTML Editor laden alle vorhandenes HTML; in Mobirise würden Sie das Aussehen aus Blöcken nachbauen.
Gibt es einen kostenlosen WYSIWYG-HTML-Editor?
Ja. Die Mobirise-Desktop-App kostet für private oder geschäftliche Websites nichts, und ihr Export ebenfalls nicht, auch wenn kostenlose Websites das Mobirise-Branding zeigen. CoffeeCup hat eine kostenlose Edition seines HTML Editor, falls Sie lieber Code tippen. 8B AI generiert Designs kostenlos, deren Veröffentlichung aber kostet. Weitere kostenlose Optionen vergleichen wir in unserer Liste der kostenlosen Webdesign-Software.
Ist HTML aus einem visuellen Editor schlechter als handgeschriebener Code?
Meist ist es schwerer, weil visuelle Tools Wrapper und Klassen ergänzen, die handgeschriebene Seiten weglassen. Ausgabe auf Basis eines Frameworks wie Bootstrap 5 bleibt lesbar und vorhersehbar; zur Framework-Seite siehe Bootstrap-Website-Builder. Für das kleinstmögliche Markup schreiben Sie es selbst in einem Code-Editor.
Gibt es einen Offline-WYSIWYG-HTML-Editor für Mac, Windows oder Linux?
Ja. Die Mobirise-Desktop-App gibt es als Build für Windows, für macOS (Apple Silicon und Intel) und für Ubuntu und andere Debian-basierte Linux-Systeme, und zum Bearbeiten brauchen Sie keine Verbindung. Auch Bootstrap Studio, das Projekte offline hält, und Pinegrow laufen auf allen drei Systemen, während Dreamweaver keine Linux-Version hat und CoffeeCup HTML Editor nur unter Windows läuft. Mac-Nutzer finden mehr Auswahl in unserem Ratgeber zu Website-Builder für Mac.
Funktioniert Mobirise offline?
In der Desktop-App ja: Visuelles Bearbeiten, Vorschauen und jedes bereits installierte Theme und jeder installierte Block funktionieren ohne Netzwerk weiter. Eine Verbindung brauchen KI, Veröffentlichen, Anmelden, Käufe sowie Updates oder Themes, die Sie noch nicht haben. Mehr zu dieser Aufteilung: Offline-Website-Software.
Gibt es einen Online-WYSIWYG-HTML-Editor für Android oder iPhone?
Für Apple-Geräte hat Mobirise keine App, aber auf iPhone und iPad läuft die Browser-Version online in Safari oder einem anderen mobilen Browser. Unter Android erzeugt die App Mobirise AI aus Google Play Designs, übersetzt, veröffentlicht und exportiert HTML. 8B AI läuft ebenfalls im Browser.
Erstellen Sie noch heute Ihre erste Seite
Starten Sie mit KI im Browser oder laden Sie die kostenlose App herunter. In beiden Fällen ist es dasselbe Mobirise.