201209Apr

HTMLiveCode: HTML/CSS/JS-Prototyping im Browser

Ich hatte mich vor einigen Monaten etwas stärker mit CodeMirror beschäftigt und als die Notwendigkeit entstand, mehrere HTML-Prototypen zu erstellen, entwickelte ich einen kleinen Browser-Editor auf der Basis von CodeMirror. Mittlerweile gibt es unzählige Online-IDEs wie JS Bin, jsFiddle, Ideone oder Fiddle Salad, mit denen sich die verschiedensten Komponenten direkt im Browser entwickeln lassen. Hier dürften keine Wünsche offen bleiben, denn in den neuesten Versionen einiger Editoren werden auch erweiterte Module wie HAML, SCSS, SASS, LESS oder Stylus unterstützt.
Für meine Zwecke genügte allerdings ein einfacher HTML-Editor, der nicht mit den genannten Tools konkurrieren soll. Entstanden ist schließlich HTMLiveCode — ein Werkzeug, das in erster Linie auf lokale Prototypen ausgelegt ist und nur Gebrauch von "localStorage" macht, um den aktuellen Code zwischen zu speichern. Im Gegensatz zu den meisten Online-Editoren funktioniert HTMLiveCode auch in Internet Explorer ab Version 9.

HTMLiveCode - Browser-based editor for HTML/CSS/JS prototyping

HTMLiveCode besteht nur aus einem Editor-Bereich sowie der Echtzeit-Vorschau. Eingegebener Code wird also direkt interpretiert. Um die Fehlerkonsole etwas zu schonen und JavaScript-Code bei der Eingabe zu validieren, kommt JSLint zum Einsatz. Der Editor bietet Shortcuts sowie Anpassungsmöglichkeiten. Zudem kann ein "Image proxy path" eingestellt werden, mit dem sich CSS-Background- und IMG-URLs ("src" und "background-image") mit einem virtuellen Pfad-Präfix versehen lassen (nur bei lokaler Installation). HTMLiveCode steht bei GitHub zur Verfügung, wo sich auch die Dokumentation befindet.

Kommentarfunktion für diesen Artikel geschlossen.