Online HTML CSS JavaScript Code Tester

Code Editor

HTML

CSS

JavaScript

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    padding: 20px;
    background-color: #f5f5f5;
    color: #333;
    line-height: 1.6;
}

h1 {
    color: #10b981;
    border-bottom: 2px solid #10b981;
    padding-bottom: 10px;
}

h2 {
    color: #3b82f6;
    margin-top: 25px;
}

p {
    color: #555;
    margin-bottom: 15px;
}

.demo-box {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    margin: 20px 0;
    border-left: 4px solid #10b981;
}

button {
    background-color: #10b981;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    margin-top: 10px;
    transition: all 0.3s;
}

button:hover {
    background-color: #0da271;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
}

#output {
    margin-top: 20px;
    padding: 15px;
    background-color: #f0fdf9;
    border-radius: 6px;
    border: 1px solid #a7f3d0;
}

.features {
    background-color: #eff6ff;
    padding: 20px;
    border-radius: 8px;
    margin-top: 30px;
}

.features h3 {
    color: #1d4ed8;
}

ul {
    padding-left: 20px;
}

li {
    margin-bottom: 8px;
    color: #475569;
}

// JavaScript code for interactive demo
document.getElementById('demoBtn').addEventListener('click', function() {
 const outputDiv = document.getElementById('output');
 const now = new Date();
 
 outputDiv.innerHTML = `
 <h3>Button Clicked!</h3>
 Current Date & Time: ${now.toLocaleString()}
 Timestamp: ${now.getTime()}
 This message was generated by JavaScript. Try changing this code in the JS tab!
 `;
 
 // Change button text temporarily
 const btn = document.getElementById('demoBtn');
 const originalText = btn.textContent;
 btn.textContent = 'Clicked!';
 btn.style.backgroundColor = '#3b82f6';
 
 setTimeout(() => {
 btn.textContent = originalText;
 btn.style.backgroundColor = '#10b981';
 }, 1500);
});

// Additional demo function
function showAlert() {
    alert('Hello from the Code Tester! This is a JavaScript alert.');
}

// Add click counter
let clickCount = 0;
const demoBtn = document.getElementById('demoBtn');
demoBtn.addEventListener('click', function() {
    clickCount++;
    console.log(`Button clicked ${clickCount} times`);
});

Live Output

Output Will Appear Here

Write your code in the editor and click "Run Code" to see the output.

You can edit HTML, CSS, and JavaScript in the respective tabs.

Tip:

The output shows the rendered HTML with applied CSS and JavaScript. Open browser console (F12) to see JavaScript logs and errors.

How to Use the Code Tester

Follow these simple steps to test your HTML, CSS, and JavaScript code. No installation or setup required!

Write HTML Code

Start with the HTML tab to create the structure of your webpage. Add headings, paragraphs, images, buttons, and other HTML elements.

Style with CSS

Switch to the CSS tab to style your HTML. Change colors, fonts, layouts, and add animations to make your page visually appealing.

Add JavaScript

Use the JavaScript tab to add interactivity. Handle button clicks, validate forms, manipulate DOM elements, and create dynamic content.

Run & Test

Click the "Run Code" button to see your code in action. The output updates instantly so you can test and debug your code in real-time.

Try These Example Projects

Click any example below to load ready-to-use code and start experimenting.