Real-Time JavaScript & HTML Editor

Advanced live code playground for frontend development. Write, test, and debug HTML, CSS, and JavaScript in real-time.

Code Editors

<!DOCTYPE html>
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <div class="container">
        <h1>Welcome to Real-Time Editor</h1>
        <p>Edit HTML, CSS, and JavaScript code on the left and see live results here.</p>
        
        <div class="card mt-4">
            <div class="card-body">
                <h5 class="card-title">Interactive Example</h5>
                <p class="card-text">Click the button below to see JavaScript in action.</p>
                <button id="demoButton" class="btn btn-primary">Click Me</button>
                <div id="demoOutput" class="mt-3"></div>
            </div>
        </div>
        
        <div class="mt-4">
            <h4>Current Time:</h4>
            <div id="timeDisplay"></div>
        </div>
    </div>
</body>
</html>

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
    background-color: #f8f9fa;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

h1 {
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

.card {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.btn-primary {
    background-color: #3498db;
    border-color: #3498db;
    padding: 10px 20px;
    font-weight: 600;
}

.btn-primary:hover {
    background-color: #2980b9;
    border-color: #2980b9;
}

#timeDisplay {
    font-size: 1.5rem;
    font-weight: bold;
    color: #2c3e50;
    padding: 10px;
    background-color: #ecf0f1;
    border-radius: 6px;
    display: inline-block;
}

// Initialize when page loads
document.addEventListener('DOMContentLoaded', function() {
    // Update time display
    function updateTime() {
        const now = new Date();
        const timeString = now.toLocaleTimeString();
        const dateString = now.toLocaleDateString('en-US', { 
            weekday: 'long', 
            year: 'numeric', 
            month: 'long', 
            day: 'numeric' 
        });
        
        const timeDisplay = document.getElementById('timeDisplay');
        if (timeDisplay) {
            timeDisplay.innerHTML = `
                <div>${dateString}</div>
                <div>${timeString}</div>
            `;
        }
    }
    
    // Update time immediately and every second
    updateTime();
    setInterval(updateTime, 1000);
    
    // Button click handler
    const demoButton = document.getElementById('demoButton');
    const demoOutput = document.getElementById('demoOutput');
    
    if (demoButton && demoOutput) {
        let clickCount = 0;
        
        demoButton.addEventListener('click', function() {
            clickCount++;
            
            if (clickCount === 1) {
                demoOutput.innerHTML = `
                    <div class="alert alert-success">
                        <strong>Button clicked!</strong> You've triggered a JavaScript function.
                    </div>
                `;
            } else {
                demoOutput.innerHTML = `
                    <div class="alert alert-info">
                        <strong>Button clicked ${clickCount} times!</strong> JavaScript is working perfectly.
                    </div>
                `;
            }
            
            // Log to console
            console.log('Button clicked', clickCount, 'times');
        });
    }
    
    // Log a welcome message to the console
    console.log('Real-time editor initialized successfully!');
    console.info('You can write JavaScript code here and see it execute in real-time.');
});

// Additional utility function
function showAlert(message) {
    alert(message);
}

Live Preview

Output Preview Live

JavaScript Console

0 logs

Console Output Errors, logs, and warnings appear here

Console initialized. Ready for output.

Editor Features

Real-Time Preview

See changes instantly as you type without refreshing.

Error Detection

JavaScript errors are caught and displayed in console.

Save & Load

Save your code projects and load them anytime.

Share Code

Generate shareable links for your code projects.

How to Use the Real-Time JavaScript/HTML Editor

This advanced real-time code editor is designed for web developers, students, and anyone learning frontend development. Here's a comprehensive guide to making the most of this powerful tool:

Getting Started

Begin by writing or pasting your HTML code in the HTML editor tab. You'll see a basic template already loaded to help you start. The editor supports full HTML5 syntax including modern elements and attributes.

Styling Your Page

Switch to the CSS tab to add styles to your HTML. The CSS editor supports all CSS3 properties including flexbox, grid, animations, and media queries. Changes apply instantly to the preview pane.

Adding Interactivity

Use the JavaScript tab to add functionality to your web page. The editor provides a live JavaScript console that displays logs, errors, and warnings as your code executes.

Key Features Explained:

Real-Time Preview: See changes instantly without manual refreshing
Error Console: JavaScript errors are caught and displayed with details
Code Formatting: Use the Format button to automatically clean up your code
Save & Share: Save projects locally or generate shareable URLs
Sample Code: Load pre-built examples to learn from
Fullscreen Mode: Toggle fullscreen preview for better testing
Console Logging: All console.log() output appears in the console panel

Pro Tips:

Use console.log() to debug your JavaScript code - output appears in the console panel
Press the Run Code button to manually refresh the preview if needed
Use the Format All button to automatically indent and structure your code
Save your work frequently using the Save Code button
Test responsive designs by resizing your browser window while using the editor