WYSIWYG-HTML-Editor

Geprüft im Oktober 2026 · vom Mobirise-Team, das mobirize.com betreibt

So bearbeiten Sie

Ziehen Sie Blöcke auf die Seite, tippen Sie Texte direkt dort um und ersetzen Sie Bilder per Klick. Jeder Block hat einen eigenen Parameterbereich: Abstände, Hintergrund, sichtbare Elemente und Spaltenanzahl.

Was entsteht

HTML, CSS und etwas JavaScript, alles auf Basis von Bootstrap 5. Die Blöcke sitzen im Bootstrap-Raster, das sich auf schmalen und breiten Displays von selbst anpasst.

Preis

Kostenlos für private und geschäftliche Websites, mit einem Starter-Theme und rund 200 Blöcken. Abos beginnen bei 149 $ pro Jahr.

Systeme

Windows 7 und neuer, macOS 10.13 und neuer mit je einem Installer für Apple Silicon und Intel sowie Linux auf Debian-Basis wie Ubuntu. Eine Browser-Version des Baukastens gibt es ebenfalls.

Zugriff auf den Code

Die fertigen Dateien gehören Ihnen in jedem Plan. Das HTML eines Blocks von Hand umzuschreiben, erfordert die Erweiterung Code Editor, ein kostenpflichtiges Add-on.

Hauptgrenze

Es lassen sich nur Mobirise-Projekte öffnen. Eine Seite oder Vorlage aus einem anderen Tool kann nicht zur weiteren visuellen Bearbeitung geladen werden.

Der Begriff umfasst Tools für sehr unterschiedliche Menschen. Wer weiß, welche Familie er braucht, spart den größten Teil der Suche.

Eine ehrliche Auswahl nach Situation. Wir machen Mobirise, lesen Sie unsere eigene Zeile also mit diesem Hintergrund.

Eine ganze Website, ohne Code, kostenlos

Mobirise: aus Blöcken aufgebaut, installierbar unter Windows, Mac und Linux, und der kostenlose Plan exportiert Bootstrap-5-Dateien.

Arbeit an vorhandenem HTML

Pinegrow: übernimmt jedes bestehende Projekt und lässt sich visuell oder im Code bedienen; gedacht für Leute, die HTML und CSS sicher beherrschen.

Bootstrap-Arbeit gegen Einmalzahlung

Bootstrap Studio: einmalige Zahlung ab 29 $, importiert fertige Seiten, läuft nach der Aktivierung offline.

Freie Platzierung von Objekten unter Windows

WYSIWYG Web Builder: eine Arbeitsfläche mit freier Positionierung, einmal gekauft, 30 Tage zum Ausprobieren.

Ein nativer Block-Baukasten für den Mac

Blocs: kostenlos zum Testen, Export und Veröffentlichung gehören zu einer einmaligen Lizenz.

Code schreiben mit gerenderter Ansicht

Adobe Dreamweaver: ein professioneller Code-Editor, vertrieben über Creative Cloud.

Ein Formatierungsfeld in Ihrer eigenen App

Eine der einbettbaren Bibliotheken wie TinyMCE oder TipTap; keines der hier genannten Desktop-Tools erfüllt diese Aufgabe.

Sieben Tools in einer Tabelle, mit den Zeilen, die für die Konkurrenz sprechen.

Angaben vom 13. bis 16. Oktober 2026 von den Preis- und Dokumentationsseiten der jeweiligen Anbieter, in Dollar ohne Steuern, sofern nicht anders vermerkt. Angebote ändern sich häufig, prüfen Sie daher vor dem Kauf die Seite des Anbieters.

Wer nach einem Echtzeit-HTML-Editor sucht, will eines von zwei Dingen: die Seite ändern und das Ergebnis sofort sehen, oder Code tippen und eine Vorschau aktualisieren lassen. Das sind verschiedene Tools.

Mit der kostenpflichtigen Erweiterung Code Editor deckt Mobirise beide Stile ab: HTML und CSS eines Blocks oder einer Seite öffnen, ändern und zusehen, wie die Arbeitsfläche sich aktualisiert.

Jeder HTML-Generator macht aus Klicks oder einem getippten Satz Markup, und sein Wert hängt vom Ergebnis ab. Das Beispiel unten zeigt die Art von Bootstrap-5-Struktur, die ein Block-Baukasten für einen einfachen zweispaltigen Abschnitt ausgibt. Es ist allgemeines Markup zur Veranschaulichung des Musters, keine Datei eines Mobirise-Themes.

<section class="features">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-12 col-lg-6">
        <h2>Fresh bread every morning</h2>
        <p>Baked on site from 6 am, six days a week.</p>
        <a class="btn btn-primary" href="menu.html">See the menu</a>
      </div>
      <div class="col-12 col-lg-6">
        <img src="../assets/images/bakery.webp" alt="Loaves cooling on a rack"
             class="img-fluid" loading="lazy">
      </div>
    </div>
  </div>
</section>

Auf Smartphones stapeln die Raster-Klassen die Spalten, ab dem großen Breakpoint stehen sie nebeneinander. Die Überschriftenebene wählen Sie im Editor, Bilder werden automatisch zu WebP, und der Alt-Text wird aus den Bildeinstellungen übernommen.