Live HTML / CSS / JavaScript Editor

The editor is split into three input panels for HTML, CSS, and JavaScript, alongside a live output iframe that updates as the user types.

The goal was to create a small interactive web tool that demonstrates how frontend code can be gathered, combined, and rendered dynamically in the browser.

This project is useful as a practical JavaScript example because it combines real-time input handling, DOM access, iframe rendering, and dynamic code injection into a single simple interface.

• Separate editing areas for HTML, CSS, and JavaScript
• Live output preview inside an iframe
• Updates automatically as the user types
• Simple layout for experimenting with frontend code
• Built using HTML, CSS, and vanilla JavaScript

The page listens for input changes in each editor field. When the user types, the script reads the values from the HTML, CSS, and JavaScript text areas and rebuilds the preview inside the output iframe.

The HTML is inserted into the iframe body, the CSS is injected through a style block, and the JavaScript is evaluated inside the iframe window.

This allows the preview to respond immediately without a page refresh, which makes the editor useful for quick experimentation and learning.

Below is the interactive editor itself.

The core update loop is intentionally simple and shows how the editor rebuilds the live preview.

function updateEditor() {
    let htmlValue = document.getElementById("html-code").value;
    let cssValue = document.getElementById("css-code").value;
    let jsValue = document.getElementById("js-code").value;
    let outputValue = document.getElementById("editor-output");

    outputValue.contentDocument.body.innerHTML =
        htmlValue + "<style>" + cssValue + "</style>";

    outputValue.contentWindow.eval(jsValue);
}

• DOM interaction: Reading values from multiple inputs and updating the page dynamically.
• Live rendering: Displaying combined HTML, CSS, and JavaScript output inside an iframe.
• Frontend tooling concepts: Building a lightweight browser-based development utility.
• Vanilla JavaScript fundamentals: Event handling, document access, and runtime updates.