HTML/CSS/JS Compiler
Write and preview HTML, CSS, and JavaScript code in real-time.
📄 HTML
<div class="container"> <h1>Hello World!</h1> <p>This is a live preview of your code.</p> <button id="clickBtn">Click Me!</button> <div id="message"></div> </div>
🎨 CSS
.container { text-align: center; padding: 40px; font-family: Arial, sans-serif; } h1 { color: #3b82f6; } button { background: linear-gradient(135deg, #3b82f6, #06b6d4); color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; margin-top: 20px; } button:hover { transform: translateY(-2px); } #message { margin-top: 20px; font-weight: bold; }
⚡ JavaScript
document.getElementById('clickBtn')?.addEventListener('click', () => { const messageDiv = document.getElementById('message'); const now = new Date(); messageDiv.innerHTML = `Button clicked at ${now.toLocaleTimeString()}! ✨`; messageDiv.style.color = '#10b981'; });
Basic Template
Card Component
Counter App
Todo List
▶ Run & Preview
🔄 Reset
🔍 Live Preview