Code Playground
Write, test, and experiment with HTML, CSS, and JavaScript code snippets in this interactive playground. See the results instantly as you type!
HTML
CSS
Preview
JavaScript
About Code Playground
What is Code Playground?
Code Playground is an interactive environment where you can write and test HTML, CSS, and JavaScript code snippets. It provides instant feedback as you code, making it ideal for experimentation, learning, and testing ideas.
Features
- Live Preview: See your code changes in real-time
- Syntax Highlighting: Color-coded code for better readability
- Multiple Themes: Choose your preferred editor theme
- Auto-run Mode: Automatically refresh the preview as you type
- Code Sharing: Easily copy your code to share with others
- Responsive Testing: See how your code works at different screen sizes
Tips for Using Code Playground
- Use Auto-run for small code snippets but turn it off for larger pieces of code to avoid performance issues
- Remember that the HTML editor does not require you to include <html>, <head>, or <body> tags - they are automatically added
- Use console.log() in your JavaScript code and open the browser's console to see the output
- The playground uses strict mode for JavaScript by default, which helps catch common coding mistakes
- External libraries can be included by adding CDN links in the HTML section
Use Cases
- Testing CSS styling and layouts
- Experimenting with JavaScript functions and algorithms
- Prototyping UI components
- Learning web development concepts
- Debugging problematic code snippets
- Creating simple demos and examples
Code copied to clipboard!
`;
const iframe = previewIframe;
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
iframeDoc.open();
iframeDoc.write(previewContent);
iframeDoc.close();
}
// Initialize preview
updatePreview();
// Event listeners
runBtn.addEventListener('click', updatePreview);
refreshBtn.addEventListener('click', updatePreview);
resetBtn.addEventListener('click', function() {
if (confirm('Are you sure you want to reset all code to default?')) {
htmlEditor.setValue(defaultHTML);
cssEditor.setValue(defaultCSS);
jsEditor.setValue(defaultJS);
updatePreview();
showFlashMessage('Code reset to default!');
}
});
copyBtn.addEventListener('click', function() {
const html = htmlEditor.getValue();
const css = cssEditor.getValue();
const js = jsEditor.getValue();
const fullCode = `/* HTML */
${html}
/* CSS */
${css}
/* JavaScript */
${js}`;
navigator.clipboard.writeText(fullCode).then(function() {
showFlashMessage('Code copied to clipboard!');
}, function(err) {
console.error('Could not copy text: ', err);
// Fallback
const textarea = document.createElement('textarea');
textarea.value = fullCode;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
showFlashMessage('Code copied to clipboard!');
});
});
themeSelect.addEventListener('change', function() {
const theme = this.value;
htmlEditor.setOption('theme', theme);
cssEditor.setOption('theme', theme);
jsEditor.setOption('theme', theme);
});
// Debounce function for auto-run
function debounce(func, wait) {
let timeout;
return function() {
const context = this, args = arguments;
clearTimeout(timeout);
timeout = setTimeout(function() {
func.apply(context, args);
}, wait);
};
}
// Auto-run logic
const debouncedUpdate = debounce(updatePreview, 1000);
htmlEditor.on('change', function() {
if (autoRunCheckbox.checked) {
debouncedUpdate();
}
});
cssEditor.on('change', function() {
if (autoRunCheckbox.checked) {
debouncedUpdate();
}
});
jsEditor.on('change', function() {
if (autoRunCheckbox.checked) {
debouncedUpdate();
}
});
// Show flash message
function showFlashMessage(message, type = 'success') {
flashMessage.textContent = message;
flashMessage.className = 'flash-message';
if (type === 'warning') {
flashMessage.style.backgroundColor = '#f39c12';
} else if (type === 'error') {
flashMessage.style.backgroundColor = '#e74c3c';
} else {
flashMessage.style.backgroundColor = '#2ecc71';
}
flashMessage.classList.add('show');
setTimeout(() => {
flashMessage.classList.remove('show');
}, 2000);
}
});