Live HTML Preview
HTML, CSS und JavaScript links schreiben, das Ergebnis rechts live ansehen – in einem echten, gekapselten iframe.
- Aktualisierung bei jedem Tastendruck
- JavaScript wird wirklich ausgeführt
- Fullscreen-Modus für responsive Tests
Sandbox-iframe
Echtes Browser-Rendering lokal.
Der kostenlose Nafzh-Live-HTML-Preview ist ein vollwertiger Mini-Browser: Schreibe HTML mit eingebettetem CSS und JavaScript links, rechts erscheint das Ergebnis in einer echten Sandbox. Perfekt für schnelle Tests von Layouts, Buttons und kleineren Interaktionen – komplett lokal und ohne Upload.
Live HTML Preview
- Die Sandbox enthält keine Skripte von Drittanbietern – du kannst onclick, Formulare und co. gefahrlos testen.
- Externe Bilder über HTTPS-URLs einbinden; lokale Dateipfade funktionieren nicht.
- Für gerendertes Markdown ohne iframe nutze den Markdown-Preview.
Beispiel zum Loslegen
Das Tool startet mit diesem Minimalbeispiel. Ersetze es einfach durch deinen eigenen Code:
<!DOCTYPE html>
<html lang="de">
<head>
<style>
body { font-family: system-ui, sans-serif; }
.card { background: #f0f0f0; border-radius: 8px; padding: 1rem; }
button { background: #3b82f6; color: white; border: none; padding: .5rem 1rem; border-radius: 6px; }
</style>
</head>
<body>
<h1>Hello, Nafzh!</h1>
<div class="card"><p id="msg"></p></div>
<button onclick="document.getElementById('msg').textContent = 'Hi!'">Klick mich</button>
</body>
</html>
Live HTML vs. Markdown Preview
| Feature | Live HTML Preview | Markdown Preview |
|---|---|---|
| Eingabe | HTML + CSS + JS | Markdown-Syntax |
| Ausführung | Echter iframe mit JS | Statisches HTML-Rendering |
| Einsatz | Layouts & Interaktionen | Dokumentation & Artikel |
| Sandbox | Ja (gekapselt) | Ja (kein Skript) |
Häufige Fragen zur Live-HTML-Vorschau (FAQ)
Wird JavaScript ausgeführt?
Ja. Die Vorschau läuft in einer gekapselten Sandbox innerhalb des iframes. JavaScript und Interaktionen werden also ehrlich ausgeführt – ohne Zugriff auf die umgebende Seite.
Warum funktioniert mein absoluter Pfad nicht?
Die Sandbox kann keine Dateien von deiner Festplatte laden. Verwende vollständige Elemente (Inline-CSS, Inline-Skripte) oder externe URLs für Bilder und Styles.
Kann ich Code-Beispiele erweitern?
Ja. Der Editor startet mit einem kleinen Beispiel. Du kannst alles löschen und dein eigenes HTML schreiben – die Vorschau aktualisiert sich bei jedem Tastendruck.
Ist das Tool kostenlos?
Ja. Live HTML Preview ist komplett kostenlos, ohne Anmeldung und ohne Limit nutzbar.
Werden meine Daten übertragen?
Nein. Alles passiert lokal in deinem Browser. Dein Code wird nicht an einen Server gesendet.
Funktioniert der Fullscreen-Modus?
Ja. Über den Knopf ⛶ wechselt die Vorschau in den Vollbildmodus – praktisch, um responsive Elemente in voller Größe zu testen.
Weitere nützliche Code- & Text-Tools
Diese kostenlosen Nafzh-Tools passen perfekt zum Thema HTML und Markdown:
Die Vorschau ist eine Sandbox ohne Zugriff auf die Host-Seite. Für produktionsreifes Testing lokaler Backends nutze bitte eine lokale Entwicklungsumgebung.