HTML- & Web-Viewer

Schreibe und teste HTML, CSS und JavaScript in einer isolierten Live-Sandbox.

Quellcode-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>
      body {
        margin: 0;
        padding: 2rem;
        font-family: system-ui, sans-serif;
        background: #f8fafc;
        color: #0f172a;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        box-sizing: border-box;
      }
      .card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        padding: 1.5rem;
        box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
        max-width: 400px;
        width: 100%;
        text-align: center;
      }
      h1 { margin-top: 0; color: #557f2d; font-size: 1.5rem; }
      p { font-size: 0.875rem; color: #64748b; line-height: 1.5; }
      button {
        background: #557f2d;
        color: white;
        border: none;
        padding: 0.6rem 1.2rem;
        border-radius: 0.75rem;
        font-weight: bold;
        cursor: pointer;
        transition: transform 0.1s;
      }
      button:active { transform: scale(0.96); }
    </style>
  </head>
  <body>
    <div class="card">
      <h1>Hallo LernArena!</h1>
      <p>Passe den HTML-, CSS- und JavaScript-Code links an, um das Ergebnis sofort live zu sehen.</p>
      <button onclick="alert('Super gemacht!')">Klick mich!</button>
    </div>
  </body>
</html>

Aktualisiert die Vorschau automatisch in Echtzeit.

Live-Vorschau

Sandbox