📝

HTML Playground

Write, test, and preview HTML, CSS, and JavaScript code directly in your browser. Perfect for learning, quick prototyping, and front-end development experiments.

developer-tool html css javascript playground code-editor front-end

Code Editor

Preview

About HTML Playground

The HTML Playground is an interactive online editor that allows you to write, test, and preview HTML, CSS, and JavaScript code snippets directly in your browser. It's perfect for learning, prototyping, and quickly experimenting with web technologies without setting up a local development environment.

Features:

  • Real-time preview of your HTML, CSS, and JavaScript code.
  • Separate input areas for HTML, CSS, and JavaScript for clarity.
  • Clear individual code sections or all at once.
  • Safe execution within an isolated iframe (using sandbox attribute).
  • Pre-filled example code to get started quickly.
  • No server-side processing, everything runs instantly in your browser.

How to use:

  1. Enter your HTML code in the "HTML" textarea.
  2. Add your CSS styles in the "CSS" textarea. These will be embedded in a <style> tag within the preview.
  3. Write your JavaScript code in the "JavaScript" textarea. This will be embedded in a <script> tag at the end of the <body> for proper execution.
  4. Click the "Run Code" button to see your output in the "Preview" iframe.
  5. Use the "Clear" buttons next to each editor to clear individual sections, or "Clear All" to clear all three code sections.
  6. The "Reset Preview" button simply re-runs the currently entered code. If you need to debug JavaScript errors, open your browser's developer console and inspect the iframe's console output.
`; try { const frameDoc = previewFrame.contentWindow.document; frameDoc.open(); frameDoc.write(frameContent); frameDoc.close(); hideMessage(errorMessage); } catch (e) { console.error("Error writing to iframe:", e); showMessage(errorMessage, `Failed to render code: ${e.message}`); } } // Function to clear a specific textarea function clearTextarea(textarea) { textarea.value = ''; runCode(); // Update preview after clearing } // Function to clear all textareas and the iframe function clearAll() { htmlInput.value = ''; cssInput.value = ''; jsInput.value = ''; runCode(); // Clear the preview hideMessage(errorMessage); } // Utility for showing/hiding error messages function showMessage(element, text) { element.classList.remove('hidden'); errorText.textContent = text; } function hideMessage(element) { element.classList.add('hidden'); } // Event Listeners runCodeBtn.addEventListener('click', runCode); clearAllBtn.addEventListener('click', clearAll); clearHtmlBtn.addEventListener('click', () => clearTextarea(htmlInput)); clearCssBtn.addEventListener('click', () => clearTextarea(cssInput)); clearJsBtn.addEventListener('click', () => clearTextarea(jsInput)); resetOutputBtn.addEventListener('click', runCode); // "Reset Preview" just re-runs the current code. // Optional: Live preview (uncomment to enable, might be performance heavy for complex code) // htmlInput.addEventListener('input', runCode); // cssInput.addEventListener('input', runCode); // jsInput.addEventListener('input', runCode); // Initialize with default code and run it htmlInput.value = defaultHtml; cssInput.value = defaultCss; jsInput.value = defaultJs; runCode(); // Initial render on page load