Kategorien
Editoren Webdesign

Kostenlose HTML-Editoren: Die 11 Besten für Webentwickler unter macOS

Auch Webdesigner und Webentwickler, die mit macOS arbeiten, finden einige kostenlose HTML-Editoren am Markt. Nicht alle sind gleich gut. Bei einigen gilt das alte Prinzip von „was nix kostet, taugt auch nix”. Das gilt indes längst nicht für alle Editoren. Wir sagen dir, welcher sich eignet, welcher nicht.

Der HTML-Editor ist ein unverzichtbares Werkzeug, deshalb wähle weise

Wer Webseiten entwickeln möchte, braucht einen HTML-Editor. Sicherlich kannst du auch mit Hilfe des Texteditors aus deinem Betriebssystem eine Webseite erstellen – schön und komfortabel geht indes anders. Besonders wichtig bei einem HTML-Editor sind eine gute Einfärbung der Syntax – auch Syntax-Highlighting genannt – und eine brauchbare Code-Vervollständigung.

Natürlich wäre das ein oder andere Extra gut, zum Beispiel eine Auswahl an Themes für den Editor, damit du dir die Optik des Tools, das du ganzen Tag vor Augen hast, etwas gefälliger gestalten kannst. Das kommt dem eigenen Individualismus entgegen und, vorausgesetzt man wählt ein geeignetes Design, erlaubt ermüdungsfreieres Arbeiten über längere Zeit.

Schauen wir einfach mal vorurteilsfrei auf unsere Auswahl der besten kostenlosen HTML-Editoren für macOS.

Windows-Nutzer werden sich für diesen Beitrag interessieren, der die gleiche Übersicht an Editoren für das Betriebssystem aus Redmond liefert. Kleiner Spoiler: Für Windows gibt es mehr Auswahl…

CotEditor

Der CotEditor 2.0 für Mac OS X

Der CotEditor ist eine relativ junge Coding-Alternative für Menschen, die ihren Editor nicht täglich benötigen und einfach nur einen guten Editor mit Syntax-Highlighting brauchen. Der CotEditor darf praktisch als Notepad++ für OS X verstanden werden.

Er bietet neben einer brauchbaren Code-Vervollständigung auch eine wirklich gute „Suchen-und-Ersetzen“-Funktionalität an, Splitview zum Unterteilen des Editorfensters in mehrere Bereiche, gutes Syntax-Highlighting für 40 Programmiersprachen und kommt mit 8 Themes daher. Für einen einfachen Editor kann sehr viel angepasst werden, der Editor ist auf jeden Fall einen näheren Blick wert.

Hier ein Blick auf eines der 8 Themes:

coteditor-mit-dunklem-theme
Link zur Webseite mit Download

Visual Studio Code

Visual Studio Code von Microsoft

Visual Studio Code ist ein kostenloser HTML-Editor aus dem Hause Microsoft. Auch in der Vergangenheit hat sich Microsoft schon häufig durch kostenlose Webentwickler-Varianten ihrer Werkzeuge für den professionellen Entwickler hervorgetan. Leider waren die so entstandenen Tools bislang eher für den Hobby-Anwender und dort nicht mehr als ein akzeptabler Kompromiss.

Erst mit Visual Studio Code zeigen die Redmonder ein ernstzunehmendes Produkt, dass sich innerhalb kürzester Zeit eine Fangemeinde erarbeiten konnte, die den bisherigen Liebling Sublime Text fast schon vergessen lässt. Visual Studio Code gibt es nicht nur für macOS, sondern auch für Windows und sogar für Linux. Damit arbeitest du plattformübergreifend mit dem gleichen Komfort und Funktionsumfang.

VS Code kann mit Extensions bequem funktional erweitert werden. Optische Veränderungen führst du über Themes herbei, von denen es ebenfalls eine breite Vielfalt gibt. VS Code arbeitet direkt mit Github zusammen und bietet nicht nur ein außerordentlich gutes Syntax-Highlighting für diverse Sprachen, sondern auch eine fortgeschrittene Variante der Code-Vervollständigung. Bei der Arbeit mit VS Code habe ich mich schon häufig gewundert, wieso Microsoft dieses Produkt kostenlos abgibt. Aber, wollen wir uns mal nicht beschweren.

VS Code unterliegt einem vierwöchigen Update-Turnus. Die Changelogs sind Monat für Monat umfangreich. Das Produkt wird massiv fortentwickelt, wobei Wünsche der Nutzergemeinde ernsthaft einbezogen werden. Neben den optischen und funktionellen Erweiterungsmöglichkeiten, wird bei VS Code auch die Unterstützung der Verwender nicht vernachlässigt. So steht dir eine umfassende Dokumentation zur Verfügung und auch die beliebten Tutorial-Videos haben die Redmonder am Start.

Link zur Website mit Download

Brackets

Der Brackets HTML-Editor für Mac OS X

Bracket ist ein moderner, quelloffener Editor mit einigen extrem interessanten Funktionen. Zum Beispiel kann er in Zusammenarbeit mit der Adobe Creative Cloud Extract (= Vorschau) Designdaten wie Farbe, Schriftarten, Verläufe, Farbe und ähnliches direkt aus einer PSD-Datei herauslesen und in minimalistisch korrekten CSS-Code umsetzen. Ebenso können Ebenen als Bild extrahiert, Informationen aus der PSD als Variable in einem Präprozessor genutzt, und bequem Abstände und Proportionen von Elementen ermittelt werden. Alles, ohne den Editor verlassen zu müssen.

Bitte beachten: Die Nutzung der Adobe Creative Cloud ist kostenpflichtig. Brackets ist aber nicht auf die Creative Cloud angewiesen. Du kannst ihn auch vollkommen abseits der Adobe-Welt verwenden. Adobe hat das Projekt damals angestoßen, dann aber weitgehend in die freie Wildbahn entlassen.

Ein weiterer großer Vorteil von Brackets ist die inzwischen riesige Menge an Erweiterungen, mit denen der Editor auf die eigenen Bedürfnisse angepasst werden kann. Alle drei bis vier Wochen kommen neue Erweiterungen dazu. Erwähnt werden sollte auch die vollständige Unterstützung von Präprozessoren.

In Brackets kannst du „Schnelles Bearbeiten“ sowie „Live-Vorschau“ auch zusammen mit LESS- und SCSS-Dateien verwenden, was das Arbeiten damit wesentlich vereinfacht. Zusammen mit den richtigen Erweiterungen und der Adobe Creative Cloud Extract deckt dieser Editor auch die Bedürfnisse von Profis ab.

brackets-editor-mit-psd-funktion

Link zur Webseite mit Download

Atom

Atom: Open Source für die drei bestimmenden Betriebssysteme. (Screenshot: Dr. Web)

Beim kostenlosen HTML-Editor Atom ist der Name Programm. Denn Atom ist vollständig modular aufgebaut. Um einen minimal großen Programmkern gruppieren sich Open-Source-Kontributionen in rauen Mengen. Sogenannte Packages sind das, die den Funktionsumfang des Tools aus dem Hause Github fast beliebig erweitern können.

Vom Start weg unterstützt Atom Node.js so weitgehend, dass du sogar eine Node-Instanz direkt aus Atom starten kannst. Atom arbeitet direkt mit Gibthub zusammen, so dass die Arbeit mit Versionskontrolle nahtlos möglich ist. Weitere Features rüstest du über die bereits erwähnten Packages nach, die du im Übrigen auch selbst erstellen und der Communitly zur Verfügung stellen kannst.

Seit kurzem stehen für Atom zwei bahnbrechende Packages bereit, die besonders für Entwickler sehr interessant sein werden. Atom kann nämlich neuerdings fast zu einer echten IDE ausgebaut werden. Damit bist du dann in der Lage, komplette Projekte zu verwalten, um etwa festzustellen, welche Variable wo im Projekt noch vorhanden ist etc. Zusätzlich lässt sich die IDE mit Sprach-Packages zu jeder beliebigen Programmiersprache befähigen.

Atom steht für Windows, macOS und LInux zur Verfügung und erfreut sich ebenfalls einer sehr regen Fortentwicklung.

Link zur Website mit Download

Bluefish

Bluefish: Programmfenster

Der Editor Bluefish ist ein Open-Source-Projekt unter der GNU/GPL-Lizenz und damit wirklich komplett frei und ohne Kosten zu jedem Zweck verwendbar. Bluefish wird maßgeblich entwickelt und koordiniert vom Niederländer Olivier Sessink, der sich mit etlichen Publikationen einen Namen als Experte für die Programmierung sicherer Computeranwendungen gemacht hat.

Bluefish ist nicht nur ein reiner Texteditor mit Unterstützung für Dutzende von Sprachen, darunter selbstverständlich HTML nebst Syntaxhervorhebung, sondern bietet weit mehr. Das Tool kann Projekt verwalten und typische Projektaufgaben, wie übergreifendes Suchen und Ersetzen, ausführen. Der Editor ist in der Lage, Seiten auch entfernt zu bearbeiten und unterstützt zu diesem Zweck eine ganze Reihe gängiger Protokolle, darunter (S)FTP und WebDAV.

Neben der Autovervollständigung für die meisten unterstützten Sprachen schließt Bluefish offene Tags automatisch und sorgt auf diese Weise für weniger Kopfschmerzen durch intensives Suchen. Das Bluefish-Interface kann in 17 Sprachen bedient und auf den Plattformen Windows, macOS, LInux, FreeBSD, OpenBSD und Solaris gleichermaßen installiert werden.

Link zur Website mit Download

Sublime Text 2

Sublime Text 2 - Entwicklers Liebling

Sublime Text 2 ist der minimalistische Liebling der Entwickler, weil er ganz einfach mittels einer JSON-Datei komplett auf die eigenen Bedürfnisse anpassbar ist. Zudem gibt es etliche Erweiterungen, die den Editor „aufbohren“ können. Eine Must-Have-Erweiterung ist zum Beispiel Package Control, mit dem sich Erweiterungen und Plugins ganz bequem über den Editor finden und installieren lassen. Den Funktionsumfang von Sublime Text 2 zu beschreiben ist recht schwer, denn über die Plugins und Erweiterungen kann er grundsätzlich so ziemlich alles, was man von ihm verlangt. Als Beispiel für sinnvolle Plugins dienen der Bracket Highlighter (für das Auffinden von zusammengehörigen Klammern und Tags), Emmet (ehemals Zen Coding – für extrem schnelles Coden) und Sublime Linter (macht auf Fehler im Quelltext aufmerksam).

Eine sehr gute Autovervollständigung bringt Sublime Text 2 bereits von Haus aus mit. Einige Themes sind auch an Bord. Viele weitere können installiert werden. Alle Standardfunktionen wie Suchen und Ersetzen sind sowieso vorhanden. Der Editor wird als ständige Evaluierungsversion angeboten, dass heisst, dass er zeitlich unbegrenzt kostenfrei getestet werden kann. Trotzdem sollte man der Fairness halber eine Lizenz erwerben, wenn man sich sicher ist, dass man ihn behalten und ständig nutzen möchte.

Seit Ende September 2017 ist Sublime Text offiziell in der finalen Version 3 erhältlich. Aufgrund der jahrelang verschleppten Entwicklung und der mangelnden Kompatibilität zu Version 2 hat Sublime Text indes stark an Zustimmung und somit auch an Bedeutung verloren. Es bleibt abzuwarten, wohin die Reise geht. Ich würde derzeit den Umstieg auf Visual Studio Code oder Atom empfehlen, zumal die beiden genannten kostenlos sind.

Link zur Webseite mit Download

Komodo Edit

Komodo Edit im kleinen Schwarzen.

Aus dem Hause ActiveState stammt der freie Quelltext-Editor Komodo Edit, eine abgespeckte Variante der kostenpflichtigen Entwicklungsumgebung Komodo IDE. Komodo IDE ist eine der leistungsfähigeren Entwicklungsumgebungen für Programmierer. Die hat ihre Stärken besonders im Bereich der Entwicklung nativer Apps durch die INtegration mit Cordova und PhoneGap, aber auch Webentwickler werden durch die Integration mit Gulp, Grunt, Yarn oder npm optimal unterstützt.

All das bietet Komodo Edit nicht. Das Tool ist tatsächlich ein reiner Editor, der sich in verschiedenen Sprachen bedienen lässt und nur die wichtigsten Features, etwa Syntaxhighlighting und Autovervollständigung an Bord hat. Auch in der freien Version bietet Komodo bereits die Projektverwaltung, so dass die Arbeit an deiner Website nicht allzu mühselig wird.

Komodo Edit liegt aktuell in der Version 11.1 vor und steht für Windows, macOS und LInux gleichermaßen zum kostenlosen Download bereit.

Link zur Website mit Download

Google Web Designer

google-web-designer

Ja, Google macht auch Tools für Webdesigner. Der Google Web Designer geht dabei eher in Richtung Adobe Dreamweaver. Er ist kein reiner HTML-Editor, sondern ein kombinierter WYSIWYG- (What you see is what you get) und Text-Editor. Arbeiten sind unter beiden Oberflächen möglich, einmal in der grafischen Oberfläche und dann auch in der Code-Ansicht. Der Google Web Designer soll aus der grafischen Oberfläche heraus gültigen HTML5- und CSS3-Code generieren und steht für macOS, Windows und Linux kostenfrei zur Verfügung.

Link zur Webseite mit Download

jEdit

jEdit - HTML-Editor für Windows

jEdit kann so ziemlich jede erdenkliche Datei öffnen, bearbeiten und die Syntax entsprechend einfärben. Das Öffnen mehrerer Dateien als Tabs ist ebenfalls möglich und erleichtert die Arbeit an einem Projekt ungemein. Nicht vorhandene Optionen können mittels Plugins ergänzt werden.

jEdit beherrscht aber schon im Auslieferungszustand etliche wichtige Funktionen, darunter Code-Folding, das Markieren zusammenhängender Elemente und Tags, einen Dateimanager und eine gute „Suchen und Ersetzen“-Funktion. Hinzu kommt die Möglichkeit, den Editor anzupassen und zu erweitern, so dass sich jEdit durchaus nicht hinter dem Wettbewerb zu verstecken braucht.

Das Tool läuft auf allen Plattformen, für die es eine Java-Umgebung gibt, also auf macOS in jedem Falle.

Link zur Website mit Download

Arachnophilia

Arachnophilia ist eine Java-Anwendung.

Arachnophilia, aus der Feder des Washingtoners Paul Lutus, ist insofern interessant, als es neben den funktionalen auch moralische Aspekte zur Schau trägt. Lutus erstellte aus dem einstigen Windows-Programm Arachnophilia in den letzten Jahren eine rein auf Java basierende Version, die universell auf allen Betriebssystemen mit Java- Runtime funktioniert, weil er Microsoft nicht mehr unterstützen will. Er geht sogar so weit, zum Boykott von Microsoft-Produkten aufzurufen.

Arachnophilia ist nicht einfach Open Source, sondern nach Lutus Definition Careware. Voraussetzung für die Nutzung ist es, dass du aufhörst zu „heulen“ und dir bewusst wirst, wie schön das Leben eigentlich ist. Doch, das meint Lutus ernst.

Funktional bietet Arachnophilia Hausmannskost. Das unverzichtbare Autocomplete ist allerdings ebenso an Bord wie eine ansehnliche Syntax-Hervorhebung. Das Tool ist in erster Linie für die Webentwicklung konzipiert, unterstützt jedoch auch gängige Programmiersprachen anderer Couleur.

Für Windows existiert ein Installationsprogramm, alle anderen Nutzer müssen das JAR-Archiv verwenden. Wer Java-Anwendungen kennt, weiß, dass die Performance nicht zum Rasantesten gehört, was in der freien Wildbahn anzutreffen ist. Wer aber dem moralischen Ansatz des Lutus folgen will, kommt kaum an Arachnophilia vorbei.

Link zur Website mit Download

Du willst nicht coden? Dann schau dir Mobirise an

Der Begriff HTML-Editor wird auch von jenen verwendet, die dir damit das Editieren von HTML gar nicht erlauben, sondern dir stattdessen eine visuelle Umgebung für das Webdesign bieten. Solltest du entsprechend auf diesem Beitrag gelandet sein, weil du genau einen solchen suchst, wirst du inzwischen gemrkt haben, dass du am falschen Ort bist. Damit du uns nicht komplett frustriert wieder verlässt, will ich dich mit einem Werkzeug bekannt machen, das genau die Fähigkeiten hat, die du suchst.

Mobirise ist ebenfalls ein Editor, den du auf deiner Festplatte installieren musst, er lässt dich aber Seiten nur visuell gestalten. An den Code kommst du gar nicht ran. Dabei ist Mobirise extrem performant und einfach zu bedienen. Wenn du eine responsive Website schnell benötigst, solltest du dir den kostenlosen Editor Mobirise auf jeden Fall näher ansehen. Er steht für Windows und macOS zur Verfügung.

Fazit

Einige der besten HTML-Editoren für Mac OS X sind kostenlos oder als ständige Evaluierungsversion zu haben. Eine der meistgenutzten Entwicklungsumgebungen überhaupt findet sich mit Sublime Text 2 darunter. Sublime Text ist extrem schnell und an die eigenen Bedürfnisse ohne viel Frickelei anpassbar. Auch ich setze Sublime Text 2 ein.

Für Windows-Nutzer haben wir ebenfalls die besten HTML-Editoren vorgestellt, und zwar hier.

Links zum Beitrag

(Der Beitrag wurde am 12. Januar 2015 erstveröffentlicht und wird seitdem immer wieder aktualisiert, zuletzt am 17. Januar 2019.)

(Quelle Artikelbild: Depositphotos)

Von Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

18 Antworten auf „Kostenlose HTML-Editoren: Die 11 Besten für Webentwickler unter macOS“

Google WebDesigner würde ich nicht mit Dreamweaver vergleichen, sondern eher mit Flash. Die Tools für die Animationen sind hier das Herzstück.

Bei meinen letzten Tests gab es mit dem erzeugten Code Cross-Browser-Probleme (gut gings eigentlich nur in Chrome) und ansonsten scheint es mir auch sehr auf die Erstellung von Werbebannern für das Google-Universum spezialisiert. Aber das nur so ein erster Eindruck nach ein paar kürzeren Tests.

Ich benutze Brackets intensiv seit über 1 Jahr und bin sehr begeistert. Einige der Erweiterungen sind für mich unverzichtbar und sinnvoll.

Zu Google Web Designer

Wollte mit ihm eben eine Datei öffnen, was er mit folgender Fehlermeldung quitierte.

„Die Datei kann aufgrund des folgenden Fehlers nicht geöffnet werden: Die Datei wurde nicht in Google Web Designer erstellt.

Ich staunte nicht schlecht.. und schade, wieder keine Alternative zum Dreamweaver.

Ich kann Sublime Text 2 wirklich wärmstens empfehlen. Vielleicht braucht man etwas mehr Einarbeitungszeit als bei anderen Editoren. Dafür ist der Workflow später ein Genuss. Es gibt einige sehr schöne (deutschsprachige) Tutorials zu ST2, einfach den Suchmaschinenbetreiber seines Vertrauens fragen :)

Hallo,

danke Dir für die Ergänzung. Ich werde den Atom-Editor mal eingehend testen, er scheint sehr interessant zu sein. Übrigens schrieb ich zum Sublime Text 2, dass er so lange getestet werden kann, wie man möchte – was man quasi mit kostenfrei gleichsetzen kann. Natürlich sollte man der Fairness halber dann auch eine Lizenz erwerben, wenn man den Editor immer nutzen möchte.

Hallo Andreas,

genau das meinte ich mit „ST2 ist es nicht, […]“. Aber das sind nun natürlich Wortklaubereien. Dennoch hätte eigentlich Atom (erst recht durch die Möglichkeiten zur Erweiterung) anstelle von ST2 stehen sollen, finde ich.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.