HTML-Viewer

Schreibe oder füge HTML mit CSS und JavaScript ein. Die Vorschau rechts wird nach wenigen Millisekunden automatisch aktualisiert.

Editor

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Kompakte Vorschau</title>
    <style>
      :root { color-scheme: light dark; }
      body {
        --page-padding: clamp(1rem, 3vw, 2rem);
        margin: 0;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--page-padding);
        background: radial-gradient(circle at top, #f8fafc, #e2e8f0 75%);
        font-family: "Inter", system-ui, -apple-system, sans-serif;
        box-sizing: border-box;
      }
      #sample-app {
        width: min(440px, 100%);
        display: grid;
        gap: 1rem;
        padding: clamp(1.25rem, 2.5vw, 1.75rem);
        background: rgba(255, 255, 255, 0.95);
        border-radius: 1.1rem;
        border: 1px solid rgba(148, 163, 184, 0.35);
        box-shadow: 0 20px 45px -30px rgba(15, 23, 42, 0.45);
        max-height: min(calc(100vh - 2.4 * var(--page-padding)), 520px);
        overflow: auto;
      }
      #sample-app[data-mode="dark"] {
        background: rgba(17, 24, 39, 0.9);
        border-color: rgba(148, 163, 184, 0.3);
      }
      #sample-app header { display: grid; gap: 0.5rem; }
      #sample-app h1 {
        margin: 0;
        font-size: 1.45rem;
        letter-spacing: -0.01em;
      }
      #sample-app p {
        margin: 0;
        line-height: 1.45;
        font-size: 0.92rem;
        color: #475569;
      }
      #sample-app[data-mode="dark"] p { color: #cbd5f5; }
      #sample-app .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
      }
      #sample-app button {
        border: none;
        border-radius: 999px;
        padding: 0.45rem 1rem;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
      }
      #sample-app button.primary {
        background: linear-gradient(135deg, #2563eb, #7c3aed);
        color: #fff;
      }
      #sample-app button.secondary {
        background: rgba(15, 23, 42, 0.08);
        color: #1e293b;
      }
      #sample-app[data-mode="dark"] button.secondary {
        background: rgba(148, 163, 184, 0.2);
        color: #e2e8f0;
      }
      #sample-app .card {
        border-radius: 0.85rem;
        padding: 1rem;
        background: rgba(248, 250, 252, 0.92);
        border: 1px dashed rgba(148, 163, 184, 0.5);
        display: grid;
        gap: 0.35rem;
        font-size: 0.9rem;
      }
      #sample-app[data-mode="dark"] .card {
        background: rgba(30, 41, 59, 0.78);
        border-color: rgba(148, 163, 184, 0.4);
      }
      #sample-app .card h2 {
        margin: 0;
        font-size: 1.1rem;
      }
      #sample-app .counter { font-weight: 700; }
      @media (max-width: 520px) {
        #sample-app {
          border-radius: 0.9rem;
          padding: 1rem;
        }
        #sample-app h1 { font-size: 1.35rem; }
      }
      @media (max-height: 640px) {
        body { align-items: flex-start; }
      }
      @media (prefers-color-scheme: dark) {
        body {
          background: radial-gradient(circle at top, #0f172a, #0b1120 75%);
        }
      }
    </style>
  </head>
  <body>
    <main id="sample-app" data-mode="light">
      <header>
        <h1>Mini-HTML-Demo</h1>
        <p>Ein kurzer, eigenständiger Ausschnitt inklusive JavaScript und Theme-Toggle.</p>
      </header>
      <div class="actions">
        <button class="primary" type="button" data-action="increment">Zähler +1</button>
        <button class="secondary" type="button" data-toggle-theme>Theme wechseln</button>
        <button type="button" onclick="alert('JS aktiv!')">Alert testen</button>
      </div>
      <article class="card">
        <h2>Status</h2>
        <p>Aktueller Zählerstand: <span class="counter" data-counter>0</span></p>
        <p>Theme: <span data-theme-label>hell</span></p>
      </article>
    </main>
    <script>
      const app = document.getElementById('sample-app');
      const counterLabel = app.querySelector('[data-counter]');
      const themeLabel = app.querySelector('[data-theme-label]');
      app.querySelector('[data-action="increment"]').addEventListener('click', () => {
        counterLabel.textContent = String(Number(counterLabel.textContent) + 1);
      });
      app.querySelector('[data-toggle-theme]').addEventListener('click', () => {
        const next = app.dataset.mode === 'light' ? 'dark' : 'light';
        app.dataset.mode = next;
        themeLabel.textContent = next === 'light' ? 'hell' : 'dunkel';
      });
    </script>
  </body>
</html>

Die Vorschau nutzt ein isoliertes Sandbox-iframe (mit erlaubten Skripten). Externe Ressourcen funktionieren im Rahmen der jeweiligen CORS-Regeln.

Vorschau

Aktualisiert automatisch ohne Neuladen.