HTML-Editor Mac
Als HTML-Editor Mac brauchen Sie unter macOS eines von drei Dingen: einen Code-Editor, in dem Sie das Markup tippen, einen visuellen Editor, der bestehenden Code zeigt und ändert, oder einen Block-Baukasten, der das HTML für Sie schreibt. Entscheidend ist, ob Sie schon Dateien zum Bearbeiten haben.
Geprüft im Oktober 2026 · vom Mobirise-Team, das mobirize.com betreibt
HTML-Editor Mac: die kurze Antwort
- Sie haben schon HTML-Dateien
- Nutzen Sie einen Code-Editor oder einen visuellen Editor, der jede Seite öffnet. Visual Studio Code ist für private und kommerzielle Nutzung kostenlos und hat einen nativen Build für Apple Silicon. Pinegrow und Bootstrap Studio öffnen bestehende Websites visuell.
- Sie starten eine neue Website
- Ein Block-Baukasten spart Zeit: Sie setzen die Seite aus fertigen Abschnitten zusammen, und das Programm erzeugt das Markup. Mobirise und Blocs arbeiten auf dem Mac so.
- Was Mobirise ist
- Ein kostenloser Block-Baukasten, aktuell in Version 6.1.12. Ein Installer ist für M-Chips, ein anderer für Intel; beide setzen High Sierra (10.13) oder neuer voraus und sind jeweils etwa 134 MB groß.
- Was Mobirise nicht ist
- Es ist kein Code-Editor, und in einem anderen Programm erstellte Seiten lassen sich nicht hineinladen.
- Das HTML, das Sie erhalten
- Standarddateien auf Basis von Bootstrap 5, kostenlos in einen Ordner Ihrer Wahl geschrieben. Den Code innerhalb der App zu ändern, erfordert eine kostenpflichtige Erweiterung.
- Offline
- Im Zug oder im Flugzeug können Sie mit bereits installierten Themes weiter bearbeiten und die Vorschau nutzen. KI-Generierung, Hochladen und Updates warten auf eine Verbindung.
Drei Arten von HTML-Tools für den Mac
Wer nach HTML-Software für den Mac sucht, findet drei sehr verschiedene Programme. Wenn Sie wissen, welche Art Sie brauchen, schrumpft eine Liste von zwanzig Apps auf zwei oder drei.
Code- und Texteditoren
VS Code, Sublime Text, Nova und BBEdit färben die Tags ein, vervollständigen sie beim Tippen und fangen Fehler ab. Selbst TextEdit funktioniert, wenn Sie es vorher auf reinen Text umstellen. Sie kontrollieren jedes Zeichen, und HTML- und CSS-Kenntnisse sind Voraussetzung. Gut, um eine vorhandene Website zu bearbeiten.
Visuelle HTML-Editoren
In Pinegrow oder Bootstrap Studio erscheint die Seite neben ihrem Elementbaum. Sie klicken ein Element an, ändern Klassen oder Text, und die Datei wird aktualisiert. Sie öffnen bestehendes Markup und eignen sich daher für Entwickler und Designer, die echte Projekte pflegen.
Block-Baukästen
Mobirise und Blocs liefern fertige Bausteine wie eine Menüleiste, ein Fotoraster oder ein Kontaktformular. Sie ziehen sie auf eine Seite, ersetzen Texte und Bilder, und die App erzeugt beim Export HTML und CSS. Programmierkenntnisse sind kaum oder gar nicht nötig.
Welchen HTML-Editor Mac kostenlos oder bezahlt wählen?
Der beste HTML-Editor für den Mac hängt von der Aufgabe ab, nicht von einem Ranking. Das sind ehrliche Empfehlungen für häufige Fälle. Wir entwickeln Mobirise selbst, lesen Sie diese Zeile also mit diesem Wissen.
- Kostenlos, Code tippen, jedes Projekt
- Visual Studio Code: kostenlos, Build für Apple Silicon, integrierte HTML-Vervollständigung, Emmet und eine Live-Vorschau im integrierten Browser.
- Ein einfacher Texteditor, den Sie schon haben
- TextEdit, auf reinen Text umgestellt, reicht für eine einzelne Übungsseite. Hervorhebung und Vervollständigung fehlen.
- Visuelles Bearbeiten einer Website, die Sie nicht selbst gebaut haben
- Pinegrow: öffnet jede HTML-Website, arbeitet mit Bootstrap, Tailwind oder reinem HTML, Testversion mit vollem Funktionsumfang.
- Bootstrap-Seiten, einmal bezahlen
- Bootstrap Studio: importiert bestehende Seiten, hat ein Code-Fenster, 29 $ einmalig.
- Ein Block-Baukasten nur für Apple-Geräte
- Blocs: Das Bauen kostet nichts, Export und Upload erfordern dagegen die einmalige Lizenzgebühr.
- Programmieren mit Live-Ansicht in der Creative Cloud
- Adobe Dreamweaver: Code-Hinweise plus eine Ansicht, in der Sie Text und Klassen auf der gerenderten Seite bearbeiten.
- Eine neue Website kostenlos, ohne Tags zu schreiben
- Mobirise: Blöcke ziehen, direkt auf der Seite bearbeiten, sauberen Dateien exportieren und dort hosten, wo Sie möchten.
Mac-HTML-Editoren im direkten Vergleich
Sechs Programme, die auf dem Mac HTML erstellen oder bearbeiten, dazu ein Browser-Tool zum Kontrast. Zeilen, in denen Mobirise schlechter abschneidet, bleiben drin.
| Mobirise | Pinegrow | Bootstrap Studio | 8B AI | Blocs | Adobe Dreamweaver | VS Code | |
|---|---|---|---|---|---|---|---|
| Preis | Kostenlos; KIT 149 $ pro Jahr bringt Premium-Themes und den Code Editor dazu | 99 $ pro Jahr (bei der Prüfung im Angebot für 49,50 $); monatliche und einmalige Optionen | 29 $ einmalig; Lifetime 59 $ | Designen kostenlos; Pro 9 $ pro Monat, bei jährlicher Abrechnung | Bauen kostenlos; Standard 112,99 $ einmalig für den Export | 22,99 $ pro Monat bei jährlicher Bindung | Kostenlos, auch für kommerzielle Nutzung |
| Art des Tools | Block-Baukasten | Visueller HTML- und CSS-Editor | Visueller Bootstrap-Editor | KI-Design im Browser | Block-Baukasten | Code-Editor mit Live-Ansicht | Code-Editor |
| Mac-Unterstützung | macOS 10.13+, Builds für Apple Silicon und Intel | Downloads für Apple Silicon und Intel | macOS (auch Windows, Linux) | Nur Browser, keine App | macOS Big Sur+, Universal-App | macOS 13 oder neuer | Apple-Silicon-Build; aktuelles macOS und die zwei Vorgänger |
| Öffnet vorhandenes HTML | Nein, nur eigene Projekte | Ja, jede Website | Ja, importiert Seiten | Nicht angegeben | Inhaltsimport in der Plus-Edition | Ja | Ja, jede Datei |
| Code von Hand bearbeiten | Kostenpflichtige Erweiterung nötig | Ja, Code und Visuelles nebeneinander | Ja, integrierter Code-Editor | Nicht angegeben | Auf den geprüften Seiten nicht | Ja | Ja, genau dafür ist er da |
| HTML-Kenntnisse nötig | Keine | Ja | Einige | Keine | Keine | Ja | Ja |
| Funktioniert offline | Ja, für Bearbeitung und Vorschau | Nicht angegeben | Ja | Nein | Ja | Braucht Internet zur Aktivierung und Prüfung | Nicht angegeben |
| Kostenloser HTML-Export | Ja, in einen lokalen Ordner | Nur in der Testversion | Keine Testversion | Mit Pro | Nein, Export ist kostenpflichtig | Nur in der Testversion | Die Dateien gehören ohnehin Ihnen |
Quellen: die Preislisten und Support-Artikel der Hersteller, gelesen zwischen dem 13. und 16. Oktober 2026. Beträge in US-Dollar; Blocs nennt Preise inklusive Steuer, die übrigen ohne. Die Abrechnung unterscheidet sich: jährlich, monatlich oder einmalig. Rabatte kommen und gehen, prüfen Sie die Seite des Herstellers daher noch einmal, bevor Sie zahlen.
Wie exportiertes HTML aus einem Block-Baukasten aussieht
Wer etwas Markup kennt, fragt, ob ein Baukasten sauberen Code liefert oder ein Gewirr verschachtelter Wrapper. Hier ein vereinfachtes Beispiel für einen Abschnitt, in den ein Bootstrap-5-Block exportiert wird: gewöhnliche Tags und die Grid-Klassen, die Sie auch von Hand schreiben würden.
<section class="features" id="services">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-6 col-lg-4">
<h3>Laptop repair</h3>
<p>Screens, batteries and keyboards, usually within two days.</p>
</div>
<div class="col-12 col-md-6 col-lg-4">
<h3>Data recovery</h3>
<p><!-- your text --></p>
</div>
</div>
</div>
</section>
Ein allgemeines Bootstrap-5-Muster zur Veranschaulichung, keine Kopie eines bestimmten Mobirise-Blocks. Echte Blöcke bringen eigene Klassennamen für Abstände und Farben mit, die in einem separaten Stylesheet liegen.
Weil das Ergebnis aus Standarddateien besteht, sind Sie nicht festgelegt. Nach dem Export können Sie den Ordner in VS Code, einem kostenlosen Texteditor oder einem anderen Tool öffnen und dort weiterarbeiten. Bedenken Sie nur, dass Änderungen außerhalb der App nicht ins Mobirise-Projekt zurückfließen; entscheiden Sie also früh, wo Sie bearbeiten. Wer im Baukasten bleiben und trotzdem Tags anpassen möchte, kann die kostenpflichtige Erweiterung Code Editor nutzen. Ist die Website fertig, lädt die App sie per FTP oder FTPES auf Ihren Server, schickt sie an GitHub Pages oder schreibt sie einfach auf die Festplatte. Unser Ratgeber zum visuellen WYSIWYG-HTML-Editor, der die fertige Seite zeigt, geht näher darauf ein, wie generierter Code im Vergleich zu von Hand geschriebenem Markup abschneidet.
- Bootstrap-5-Grid, damit Spalten auf Smartphones ohne zusätzliche Media Queries untereinander stehen.
- Wahl der H-Tags für Titel, damit die Überschriften Ihrer Gliederung folgen.
- WebP-Bilder, die beim Hinzufügen von Fotos automatisch umgewandelt werden.
- Sichtbarer Fokusrahmen für Menschen, die sich per Tastatur durch die Seite bewegen.
Mobirise am Mac: wer profitiert, wer verzichten sollte
Einen Versuch wert
- Sie brauchen eine neue Website und möchten keine Tags von Hand schreiben
- Sie wollen die fertigen HTML-Dateien kostenlos, um sie bei jedem Host abzulegen
- Sie arbeiten am MacBook ohne zuverlässiges WLAN
- Sie kennen etwas CSS und möchten Blöcke später mit dem Code Editor anpassen
- Sie wollen außerdem mit einem KI-Entwurf beginnen und die Details selbst ausarbeiten
Schauen Sie sich anderswo um, wenn
- Ihre Seiten schon existieren und geändert werden müssen: VS Code, Pinegrow oder Bootstrap Studio laden sie
- Sie HTML lernen: Tippen im Code-Editor bringt mehr bei als ein Baukasten
- Sie Web-Apps mit Frameworks und Build-Schritt bauen: ein Code-Editor passt zu diesem Workflow
- Smartphones ein eigenes Layout bekommen sollen: Jeder Mobirise-Block passt ein Design an alle Breiten an
- Sie erwarten, Tags in der App kostenlos umzuschreiben: Dieser Teil ist kostenpflichtig
Acht HTML-Gewohnheiten am Mac
Welchen Editor Sie auch nutzen: Diese kleinen Gewohnheiten ersparen Ihnen unter macOS stundenlange Verwirrung.
Dateinamen in Kleinbuchstaben
Ein HTML-Editor am Mac warnt Sie nicht, dass das Dateisystem meist nicht zwischen Groß- und Kleinschreibung unterscheidet, die meisten Webserver aber schon. Ein Link auf About.html, der lokal funktioniert, kann online ins Leere laufen. Verwenden Sie Kleinbuchstaben mit Bindestrichen.
Reiner Text in TextEdit
Wählen Sie vor dem Speichern einer Seite Format, dann „In reinen Text umwandeln“. Sonst speichert TextEdit formatierten Text, und Ihre Tags erscheinen als sichtbare Zeichen.
Dateiendungen anzeigen
Schalten Sie in den Finder-Einstellungen alle Dateiendungen ein. So versteckt sich index.html.txt nicht hinter einem Namen, der richtig aussieht.
In zwei Browsern ansehen
Prüfen Sie jede Seite in Safari und in Chrome. Die meisten Dinge stellen beide gleich dar, aber Formulare, Schriften und Videos weichen oft genug ab, um eine Rolle zu spielen.
Markup validieren
Schicken Sie wichtige Seiten durch den W3C-Validator. Nicht geschlossene Tags und doppelte IDs übersieht man leicht, und sie können Screenreader verwirren.
Smartphone-Breite testen
Nutzen Sie den Responsive-Modus in den Entwicklertools von Safari oder Chrome und öffnen Sie die Seite vor der Veröffentlichung auf einem echten Smartphone.
Einen Projektordner behalten
Legen Sie Seiten, Bilder und Styles in einem Ordner mit relativen Links ab. Der Umzug auf einen Server oder einen anderen Mac braucht dann keine Korrekturen.
Mit Time Machine sichern
Nehmen Sie Ihre Website und die Projektdateien in die Backups auf. Ein Baukasten-Projekt oder ein Code-Ordner lässt sich aus der veröffentlichten Kopie nur schwer wiederherstellen.
Fragen zum Bearbeiten von HTML am Mac
Gibt es einen HTML-Editor Mac kostenlos?
Ja, gleich mehrere. Mit Code-Vervollständigung ohne Kosten gibt es Visual Studio Code, das für private und kommerzielle Nutzung kostenlos ist und nativ auf Apple Silicon läuft; TextEdit ist ohnehin auf jedem Mac vorhanden. Wenn Sie lieber keinen Code schreiben, ist Mobirise ein kostenloser Baukasten, der das HTML für Sie erzeugt.
Welcher HTML-Editor für den Mac ist für Einsteiger am besten?
Das hängt vom Ziel ab. Um HTML zu lernen, bringt Ihnen ein Code-Editor mit Vervollständigung und Live-Vorschau wie VS Code am meisten bei. Für eine fertige Website ohne Tags zu lernen geht es mit einem Block-Baukasten wie Mobirise oder Blocs schneller.
Welcher WYSIWYG-HTML-Editor für den Mac arbeitet mit vorhandenen Seiten?
Pinegrow oder Bootstrap Studio, die viele für bereits vorhandenes Markup wählen; Dreamweaver ergänzt sein Code-Fenster um eine Live-Ansicht. Mobirise und Blocs bearbeiten ebenfalls auf der gerenderten Seite, importieren aber keine fremden Dateien.
Gibt es einen HTML-Editor am Mac mit Vorschau?
VS Code zeigt eine Seite in seinem integrierten Browser und aktualisiert sie beim Tippen. Pinegrow und Dreamweaver stellen eine Live-Seite neben Ihren Quelltext. Mobirise hat gar kein Code-Fenster: Sie arbeiten auf der Seite selbst und schalten die Vorschau zwischen drei Gerätegrößen um.
Kann Mobirise meine vorhandenen HTML-Dateien öffnen und bearbeiten?
Nein. Die App liest nur ihr eigenes Projektformat; ein Entwurf von Mobirise AI kann über „Import by Link“ hereinkommen, ein Ordner mit Seiten aus einem anderen Tool aber nicht. Greifen Sie dafür zu einem Texteditor oder einem visuellen Tool, das Markup importiert.
Läuft die HTML-Bearbeitungssoftware auf einem MacBook Air mit Apple Silicon?
Ja. Es gibt einen Mobirise-Download für M-Chips (M1 bis M4) und einen zweiten für Intel-Modelle. VS Code, Pinegrow, Blocs und Dreamweaver laufen ebenfalls nativ auf Apple-Chips.
Was ist der einfachste kostenlose HTML-Texteditor für den Mac? (HTML-Editor für Mac deutsch kostenlos)
TextEdit im Reintext-Modus ist auf jedem Mac die einfachste Option. Sehr alte Mac-OS-X-Versionen führen heutige Apps selten aus, prüfen Sie also zuerst die Mindestanforderung jedes Anbieters; Mobirise verlangt mindestens High Sierra.
Welche HTML-IDE ist für den Mac gut?
Für ganze Projekte mit JavaScript, Git und Erweiterungen greifen Entwickler meist zu VS Code; Dreamweaver ist die kostenpflichtige Option mit visueller Ansicht. Für eine einfache Visitenkarten-Website braucht es beides nicht, dort geht es mit einem Baukasten schneller.
Gibt es einen Open-Source-HTML-Editor für den Mac?
Mehrere kostenlose Editoren aus älteren Mac-Listen werden nicht mehr weiterentwickelt: Atom zum Beispiel wurde im Dezember 2022 von GitHub archiviert. Welche Lizenz Sie auch bevorzugen, prüfen Sie das Datum der letzten Version und die unterstützten macOS-Versionen, bevor Sie sich auf einen Editor verlassen.
Kann ich das Markup in Mobirise ändern?
Ja, über die Erweiterung Code Editor: Sie ändert Markup und Styles eines einzelnen Blocks oder einer ganzen Seite. Jeder kostenpflichtige Plan ab KIT enthält sie. Kostenlose Nutzer können den Ordner exportieren und die Dateien anderswo ändern.
Wo finde ich den offiziellen Mac-Installer?
Auf der offiziellen Seite mit dem Versionsverlauf, die jede Version auflistet. Unsere Übersicht über Design-Apps für Mac-Nutzer erklärt, wie Sie herausfinden, welchen Chip Ihr Computer hat.
Die Seite bauen, die Dateien behalten
Laden Sie Mobirise für den Mac herunter, setzen Sie eine Website aus Blöcken zusammen und exportieren Sie die Dateien in einen beliebigen Ordner. Möchten Sie lieber mit einer Beschreibung starten? Der KI-Einstieg im selben Baukasten entwirft vier Designs, oder lesen Sie über den kostenlosen Download für jedes System.