Online Code Editor & Live Preview

Write HTML, CSS, and JavaScript code with real-time preview. Perfect for prototyping, learning, and testing web components.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live Preview</title>
</head>
<body>
    <div class="container">
        <h1>Hello World!</h1>
        <p>Start coding to see live preview</p>
        <button onclick="changeColor()">Click me!</button>
    </div>
</body>
</html>

CSS

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    min-height: 100vh;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    padding: 50px 20px;
}

h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

button {
    background: rgba(255,255,255,0.2);
    border: 2px solid white;
    color: white;
    padding: 12px 24px;
    font-size: 1rem;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}

button:hover {
    background: white;
    color: #667eea;
    transform: translateY(-2px);
}

JavaScript

function changeColor() {
    const colors = [
        'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
        'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
        'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
        'linear-gradient(135deg, #fa709a 0%, #fee140 100%)'
    ];
    
    const randomColor = colors[Math.floor(Math.random() * colors.length)];
    document.body.style.background = randomColor;
    
    // Add a fun animation
    document.querySelector('.container').style.transform = 'scale(1.05)';
    setTimeout(() => {
        document.querySelector('.container').style.transform = 'scale(1)';
    }, 200);
}

// Add some interactivity
document.addEventListener('DOMContentLoaded', function() {
    console.log('Live preview is ready!');
    
    // Add click effect to the page
    document.addEventListener('click', function(e) {
        if (e.target.tagName !== 'BUTTON') {
            const ripple = document.createElement('div');
            ripple.style.cssText = `
                position: absolute;
                border-radius: 50%;
                background: rgba(255,255,255,0.3);
                transform: scale(0);
                animation: ripple 0.6s linear;
                pointer-events: none;
                z-index: 1000;
            `;
            
            const size = 60;
            ripple.style.width = ripple.style.height = size + 'px';
            ripple.style.left = (e.clientX - size / 2) + 'px';
            ripple.style.top = (e.clientY - size / 2) + 'px';
            
            document.body.appendChild(ripple);
            
            setTimeout(() => {
                ripple.remove();
            }, 600);
        }
    });
});

// Add CSS for ripple animation
const style = document.createElement('style');
style.textContent = `
    @keyframes ripple {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);

Live Preview

QUANTUM TOOLS

Online Code Editor & Live Preview

Real-time HTML/CSS/JS Editor

Who is this tool for?