Online HTML Viewer

📝 HTML + CSS + JS

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> body { background: linear-gradient(145deg, #f9f9ff, #eef2ff); font-family: system-ui, sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; } .card { background: white; padding: 2rem 2.5rem; border-radius: 32px; box-shadow: 0 25px 35px -10px rgba(0,0,0,0.2); text-align: center; } h1 { color: #1e1b4b; margin-bottom: 0.5rem; } button { background: #3b82f6; border: none; color: white; padding: 10px 24px; border-radius: 40px; font-weight: 600; cursor: pointer; } button:hover { background: #2563eb; } </style> </head> <body> <div class="card"> <h1>Hello Blogger!</h1> <p>Edit and see magic ✨</p> <button id="demoBtn">Click me</button> </div> <script> console.log('Live viewer ready!'); document.getElementById('demoBtn')?.addEventListener('click', function() { alert('🎉 Hello from JavaScript!'); }); </script> </body> </html>

Live Preview auto-updates

📌 Ctrl+Enter to run 🔄 Auto-run active