HTML Viewer und Online-HTML-Editor

Füge HTML ein, öffne eine Datei oder bearbeite das Beispiel. Die Vorschau aktualisiert sich beim Tippen und läuft in einer Sandbox, der Code kann diese Seite also nicht anfassen.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Event-Ticket</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f4f4f8; margin: 0; padding: 32px; }
    .ticket { max-width: 340px; margin: 0 auto; background: #fff; border-radius: 16px;
              padding: 24px; box-shadow: 0 8px 24px rgba(20, 20, 60, .08); }
    .tag { color: #6d4aff; font-weight: 600; letter-spacing: .06em; font-size: 12px; }
    h1 { font-size: 26px; margin: 6px 0 4px; color: #16142b; }
    p { color: #55546a; margin: 0 0 16px; }
    .row { display: flex; justify-content: space-between; border-top: 1px dashed #d7d6e3;
           padding-top: 14px; font-size: 14px; color: #3c3b4f; }
    button { margin-top: 18px; width: 100%; border: 0; border-radius: 10px; padding: 12px;
             background: #6d4aff; color: #fff; font-size: 15px; cursor: pointer; }
    @media (min-width: 700px) { .ticket { max-width: 520px; } h1 { font-size: 32px; } }
  </style>
</head>
<body>
  <div class="ticket">
    <div class="tag">FRONTEND-MEETUP</div>
    <h1>CSS Grid in der Praxis</h1>
    <p>Donnerstag, 19 Uhr, Raum 2. Bring deinen Laptop mit.</p>
    <div class="row"><span>Platz</span><strong>B-14</strong></div>
    <button onclick="this.textContent = 'Im Kalender eingetragen'">Zum Kalender hinzufügen</button>
  </div>
</body>
</html>

So benutzt du den HTML Viewer

Füge deinen Code in den Editor ein oder klick auf Datei öffnen, um eine .html-Datei von deinem Gerät zu laden.
Die Vorschau erscheint rechts. Wechsle zwischen Handy (390px), Tablet (768px) und Desktop, um das Layout in jeder Breite zu prüfen.
Bearbeite den Code, bis alles passt, und klick auf .html herunterladen, um das Ergebnis zu speichern.

Schalte Beim Tippen aktualisieren aus, wenn du an einer großen Seite arbeitest oder an Skripten, die nur einmal laufen sollen. Die Vorschau lädt dann erst neu, wenn du auf Ausführen klickst.

Wofür man ihn nutzt

Ein Snippet prüfen, bevor es ins Projekt kommt. Code aus einem Chatbot, einer Forenantwort oder von Kollegen wird zuerst hier gerendert, ohne dein Repository anzufassen.
Einen HTML-Anhang auf dem Handy lesen. Mail-Apps zeigen .html-Dateien oft als rohen Text an. Öffne die Datei hier, und sie wird als Seite dargestellt.
Ein responsives Layout testen. Die Buttons Handy und Tablet setzen die Vorschau auf echte Gerätebreiten, sodass Media Queries und Tailwind-Breakpoints genauso umschalten wie auf dem Gerät.

Was die Sandbox erlaubt

Die Vorschau ist ein iframe mit sandbox="allow-scripts" und sonst nichts. Dein HTML, CSS und JavaScript laufen, und externe Ressourcen wie Google Fonts oder das Tailwind-CDN-Skript laden ganz normal. Der Frame bekommt einen opaken Origin: Er kann keine Cookies und keinen Speicher von img2html.com lesen, keine Formulare absenden, keine Popups öffnen und diesen Tab nicht umleiten. Ausgaben von console.log landen in den Entwicklertools deines Browsers.

Fragen zum HTML Viewer

Wird mein HTML irgendwo hochgeladen?

Nein. Der Code bleibt in diesem Browser-Tab. Die Vorschau wird aus einem lokalen String gebaut (ein iframe mit srcdoc), es wird also nichts an IMG2HTML oder an Dritte gesendet.

Läuft JavaScript in der Vorschau?

Ja, in einem Sandbox-iframe mit eigenem, opakem Origin. Skripte können die Vorschau verändern, aber weder diese Seite noch ihre Cookies oder ihren Speicher lesen. Formulare, Popups und Navigation auf oberster Ebene sind blockiert.

Warum fehlen meine Bilder oder CSS-Dateien?

Relative Pfade wie images/logo.png oder style.css haben nichts, worauf sie sich beziehen können, wenn du Code einfügst oder eine einzelne Datei öffnest. Nutze absolute URLs (https://...) oder schreib das CSS in einen <style>-Tag.

Kann ich eine HTML-Datei von meinem Computer oder Handy öffnen?

Ja. Klick auf Datei öffnen, wähl die .html- oder .htm-Datei aus, und sie wird in Editor und Vorschau geladen. So liest du auch einen HTML-Anhang aus einer E-Mail am schnellsten auf dem Handy.

Wie speichere ich meine Änderungen?

Mit .html herunterladen wird der aktuelle Code als Datei gespeichert. Zwischen zwei Besuchen wird nichts aufbewahrt, lade die Datei also herunter, bevor du den Tab schließt.