HTML Preview

Preview HTML code

Preview HTML code Läuft lokal in Ihrem Browser

About the

Die HTML-Vorschau rendert ein HTML-Fragment live, sodass Sie sehen können, was daraus entsteht, ohne eine Datei zu speichern und zu öffnen. Es ist für kurze Snippets gedacht: eine E-Mail-Vorlage, das Markup einer Komponente, ein Snippet aus einem Content-Management-System oder alles andere, was Sie sich ansehen möchten, bevor Sie es irgendwo einfügen. Der Wechsel zwischen Bearbeitung und Vorschau erfolgt sofort, was eine schnelle Schleife zum Optimieren des Markups ermöglicht.

Where people use the

Überprüfen eines E-Mail-Vorlagenfragments vor dem Senden eines Tests.
Vorschau des aus einem Content-Management-System eingefügten Markups.
Überprüfung der Plausibilität eines Snippets vor dem Einfügen in eine Pull-Anfrage.
Testen Sie, ob eine Tabelle oder eine Liste wie erwartet gerendert wird.

How to use the

1
Fügen Sie Ihr Markup ein
Geben Sie ein HTML-Fragment ein oder fügen Sie es in den Editor ein. Ein vollständiges Dokument oder nur ein Ausschnitt funktionieren beide.
2
Zur Vorschau wechseln
Drücken Sie Vorschau, um es zu rendern. Das Markup wird so in die Seite eingezeichnet, wie es in einem Browser erscheinen würde.
3
Zurückschalten und anpassen
Drücken Sie Bearbeiten, um zum Markup zurückzukehren. Änderungen werden beibehalten, sodass Sie sie wiederholen können.
4
Kopieren Sie es, wenn Sie zufrieden sind
Wählen Sie das Markup im Editor aus und kopieren Sie es in Ihr Projekt.

Tipps und Best Practices

Fügen Sie Inline-Stile hinzu, wenn Ihr Fragment von einem Stylesheet abhängt, das nicht hier ist.
Ein sauberes Rendering ist kein Beweis für gültiges Markup; Browser überschreiben Fehler.
Beachten Sie die Vorschau für Snippets, nicht für ganze Seiten mit Skriptverhalten.

Häufig gestellte Fragen

Unterstützt es CSS und JavaScript?

Style-Tags und Inline-Styles werden gerendert. Skripte werden als Markup gerendert, dies ist jedoch eine Vorschau eines Fragments. Behandeln Sie das Skriptverhalten daher als unzuverlässig.

Warum sieht mein Snippet anders aus als meine Website?

Weil das umgebende Stylesheet fehlt. Ein Fragment erbt hier nichts, sodass alles, was auf dem CSS Ihrer Website basiert, unformatiert aussieht.

Kann ich externe Bilder oder Schriftarten laden?

Ja, wenn sie öffentlich erreichbar sind, die eigenen Regeln der umgebenden Seite gelten jedoch weiterhin nicht.

Ist das Markup hochgeladen?

Nein. Das Rendern erfolgt in Ihrem Browser, sodass unveröffentlichte Vorlagen und interne Inhalte auf Ihrem Gerät verbleiben.

Validiert es den HTML-Code?

Nein. Es gibt wieder, was Sie ihm geben. Ein Browser behebt einige Fehler stillschweigend, sodass ein sauberes Rendering nicht beweist, dass das Markup gültig ist.