HTML Preview

Live-Editor für HTML, CSS und JavaScript – sehen Sie Änderungen sofort

HTML

CSS

JavaScript

Alle

HTML

HTML-Code:

CSS

CSS-Code:

JavaScript

JavaScript-Code:

HTML

CSS

JavaScript

Live-Vorschau

HTML

0 Bytes

CSS

0 Bytes

JavaScript

0 Bytes

4. Beispiele

Einfache HTML-Seite

Formular

Cards mit CSS

JavaScript Counter

Live-Uhr

Über den HTML Preview

Dieser Live-Editor ermöglicht es Ihnen, HTML, CSS und JavaScript in Echtzeit zu testen. Alle Änderungen werden sofort in der Vorschau sichtbar.

Features

Live-Vorschau mit iframe
Separierte Editoren für HTML, CSS, JS
Größenstatistik für alle Teile
Vordefinierte Beispiele
Vollbild-Modus für Preview

Tipps

Verwenden Sie die Tabs, um zwischen den Editoren zu wechseln
Klicken Sie auf 'Ausführen' oder drücken Sie F5
CSS und JS sind optional
Die Vorschau ist isoliert (kein Zugriff auf das Hauptdokument)

HTML5 CSS3 JavaScript

', ` `); } // Vollständiges HTML erstellen let fullHtml = html; if (!fullHtml.match(//i)) { // Wenn kein vollständiges HTML, erstelle eins fullHtml = ` ${headContent} ${bodyContent} `; } else { // Bestehendes HTML mit CSS und JS anreichern fullHtml = fullHtml.replace('', headContent + '\n'); if (js) { fullHtml = fullHtml.replace(' ', ` `); } } preview.srcdoc = fullHtml; updateSizes(); } // Zurücksetzen auf Standard function resetToDefault() { htmlInput.value = ` Meine Seite

Willkommen!

Dies ist ein Beispieltext.

`; cssInput.value = `/* CSS-Styles */ body { font-family: Arial, sans-serif; margin: 40px; background-color: #f0f0f0; } h1 { color: #333; border-bottom: 2px solid #e34c26; padding-bottom: 10px; } button { background: #e34c26; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 16px; } button:hover { background: #c03a1a; } #ausgabe { margin-top: 20px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; min-height: 50px; }`; jsInput.value = `// JavaScript-Funktionen function zeigeNachricht() { let ausgabe = document.getElementById('ausgabe'); ausgabe.innerHTML = '✅ Button wurde geklickt!'; ausgabe.style.backgroundColor = '#e8f5e9'; ausgabe.style.padding = '15px'; ausgabe.style.borderRadius = '5px'; ausgabe.style.border = '1px solid #4caf50'; setTimeout(function() { ausgabe.innerHTML = ''; ausgabe.style.backgroundColor = ''; ausgabe.style.padding = '10px'; ausgabe.style.border = '1px solid #ccc'; }, 2000); }`; htmlInputAll.value = htmlInput.value; cssInputAll.value = cssInput.value; jsInputAll.value = jsInput.value; updatePreview(); } // Vollbild für Preview function toggleFullscreen() { let container = document.querySelector('.preview-container'); if (container.requestFullscreen) { container.requestFullscreen(); } else if (container.webkitRequestFullscreen) { container.webkitRequestFullscreen(); } else if (container.msRequestFullscreen) { container.msRequestFullscreen(); } } // Beispiele laden window.loadExample = function(type) { let examples = { basic: { html: ` Einfache HTML-Seite

Überschrift 1

Überschrift 2

Dies ist ein wichtiger Text mit Hervorhebungen.

Erster Punkt
Zweiter Punkt
Dritter Punkt

Das ist ein Link `, css: `body { font-family: Arial, sans-serif; margin: 40px; }`, js: '' }, form: { html: ` Kontaktformular

Kontaktformular

`, css: `body { font-family: Arial, sans-serif; margin: 40px; } input, textarea { padding: 8px; width: 300px; border: 1px solid #ccc; border-radius: 4px; } button { background: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; } button:hover { background: #45a049; } #status { margin-top: 20px; padding: 10px; border-radius: 4px; }`, js: `function senden() { let name = document.getElementById('name').value; let email = document.getElementById('email').value; let nachricht = document.getElementById('nachricht').value; let status = document.getElementById('status'); if (name && email && nachricht) { status.innerHTML = '✅ Vielen Dank! Ihre Nachricht wurde gesendet.'; status.style.backgroundColor = '#e8f5e9'; status.style.color = '#4CAF50'; } else { status.innerHTML = '❌ Bitte füllen Sie alle Felder aus.'; status.style.backgroundColor = '#ffebee'; status.style.color = '#f44336'; } }` }, cards: { html: ` Card-Layout

Unsere Produkte

Produkt 1

Beschreibung für Produkt 1. Dies ist ein tolles Produkt.

€ 29,99

Produkt 2

Beschreibung für Produkt 2. Dies ist ein noch besseres Produkt.

€ 39,99

Produkt 3

Beschreibung für Produkt 3. Das beste Produkt überhaupt.

€ 49,99

`, css: `body { font-family: Arial, sans-serif; margin: 40px; background: #f5f5f5; } h1 { text-align: center; color: #333; } .card-container { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } .card { background: white; border-radius: 8px; padding: 20px; width: 300px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: transform 0.3s; } .card:hover { transform: translateY(-5px); box-shadow: 0 5px 20px rgba(0,0,0,0.15); } .card img { width: 100%; height: 200px; object-fit: cover; border-radius: 4px; } .card h3 { margin: 15px 0 10px; color: #333; } .card p { color: #666; line-height: 1.5; } .preis { font-size: 1.2rem; font-weight: bold; color: #e34c26; margin: 10px 0; } button { background: #e34c26; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; width: 100%; font-size: 1rem; } button:hover { background: #c03a1a; }`, js: '' }, counter: { html: ` JavaScript Counter

Zähler

0

`, css: `.counter-container { max-width: 400px; margin: 50px auto; text-align: center; padding: 30px; background: white; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .counter-display { font-size: 4rem; font-weight: bold; margin: 30px 0; color: #e34c26; } .counter-buttons { display: flex; gap: 10px; justify-content: center; margin: 20px 0; } .counter-buttons button { background: #e34c26; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 1rem; min-width: 80px; } .counter-buttons button:hover { background: #c03a1a; } .counter-history { margin-top: 20px; padding-top: 20px; border-top: 1px solid #eee; text-align: left; max-height: 200px; overflow-y: auto; } .history-item { padding: 5px 0; color: #666; }`, js: `let counter = 0; let history = []; function updateDisplay() { document.getElementById('counter').innerText = counter; } function updateHistory() { let historyDiv = document.getElementById('history'); historyDiv.innerHTML = 'Verlauf:
'; history.slice(-5).reverse().forEach(item => { historyDiv.innerHTML += '

' + item + '

'; }); } function zaehle(wert) { counter += wert; let zeit = new Date().toLocaleTimeString(); history.push(zeit + ': Zähler = ' + counter); updateDisplay(); updateHistory(); } function reset() { counter = 0; let zeit = new Date().toLocaleTimeString(); history.push(zeit + ': Zähler zurückgesetzt'); updateDisplay(); updateHistory(); } updateDisplay();` }, clock: { html: ` Live-Uhr

Live-Uhr

--:--:--

---, --. --- ----

`, css: `body { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; margin: 0; font-family: Arial, sans-serif; } .clock-container { background: rgba(255,255,255,0.95); padding: 40px; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); text-align: center; max-width: 500px; width: 90%; } .clock { font-size: 5rem; font-weight: bold; color: #333; margin: 30px 0; font-family: 'Courier New', monospace; letter-spacing: 5px; } .date { font-size: 1.5rem; color: #666; }`, js: `function updateClock() { let now = new Date(); let hours = String(now.getHours()).padStart(2, '0'); let minutes = String(now.getMinutes()).padStart(2, '0'); let seconds = String(now.getSeconds()).padStart(2, '0'); document.getElementById('clock').innerText = hours + ':' + minutes + ':' + seconds; let options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; document.getElementById('date').innerText = now.toLocaleDateString('de-DE', options); } updateClock(); setInterval(updateClock, 1000);` } }; htmlInput.value = examples[type].html; cssInput.value = examples[type].css; jsInput.value = examples[type].js; htmlInputAll.value = examples[type].html; cssInputAll.value = examples[type].css; jsInputAll.value = examples[type].js; updatePreview(); }; // Event-Listener runBtn.addEventListener('click', updatePreview); resetBtn.addEventListener('click', resetToDefault); fullscreenBtn.addEventListener('click', toggleFullscreen); // Echtzeit-Update (mit Debounce) let timeout; htmlInput.addEventListener('input', function() { clearTimeout(timeout); timeout = setTimeout(updatePreview, 500); }); cssInput.addEventListener('input', function() { clearTimeout(timeout); timeout = setTimeout(updatePreview, 500); }); jsInput.addEventListener('input', function() { clearTimeout(timeout); timeout = setTimeout(updatePreview, 500); }); htmlInputAll.addEventListener('input', function() { clearTimeout(timeout); timeout = setTimeout(updatePreview, 500); }); cssInputAll.addEventListener('input', function() { clearTimeout(timeout); timeout = setTimeout(updatePreview, 500); }); jsInputAll.addEventListener('input', function() { clearTimeout(timeout); timeout = setTimeout(updatePreview, 500); }); // Initial resetToDefault();