Live Code Editor
Edit HTML, CSS, and JavaScript and see the results in real-time
HTML
.html
<!DOCTYPE html> <html> <head> <title>Example Page</title> </head> <body> <h1>Welcome to the Live Editor</h1> <p>This is a paragraph of text. Edit the code to see changes.</p> <button id="demo-button">Click Me!</button> <div id="output"></div> </body> </html>
CSS
.css
body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; background-color: #f0f0f0; color: #333; } h1 { color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px; } p { margin-bottom: 15px; } #demo-button { background-color: #3498db; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-size: 16px; } #demo-button:hover { background-color: #2980b9; } #output { margin-top: 20px; padding: 10px; background-color: white; border-left: 4px solid #2ecc71; }
JavaScript
.js
document.getElementById('demo-button').addEventListener('click', function() { const output = document.getElementById('output'); const now = new Date(); output.innerHTML = '<p>Button clicked at: ' + now.toLocaleTimeString() + '</p>'; // Create a new element const newElement = document.createElement('div'); newElement.textContent = 'This is a new element added by JavaScript!'; newElement.style.marginTop = '10px'; newElement.style.padding = '10px'; newElement.style.backgroundColor = '#e8f4fc'; newElement.style.border = '1px dashed #3498db'; output.appendChild(newElement); });
Preview
Run Code
Export Result to PDF
Export Full (Code + Result)