How the HTML CSS JS Compiler Works

1. Editor architecture

The workspace uses three text editors for HTML, CSS, and JavaScript with line-number gutters, tab indentation handling, font-size controls, and optional word wrap.

2. HTML processing

HTML from the HTML pane is placed in the body of a generated document. The tool does not execute HTML as parent-page UI.

3. CSS injection

CSS is inserted into a style element in the generated document head so rules apply to the preview document only.

4. JavaScript execution

JavaScript is placed in a script element inside the preview document. It runs in the iframe browsing context after Run.

5. iframe rendering

The combined document is assigned to iframe.srcdoc, which creates a fresh preview document without navigating the parent page.

6. Sandbox isolation

The iframe uses a sandbox attribute (scripts allowed for preview). Parent DOM APIs are not exposed for user code execution.

7. Console handling

A small bridge inside the preview forwards console.log/info/warn/error and runtime errors to the parent via postMessage for display.

8. Browser APIs

What scripts can do depends on browser policy and sandbox permissions. Some APIs behave differently in iframes than on top-level pages.

9. Local storage

Editor state may be written to localStorage keys scoped to this origin so refresh does not wipe in-progress work.

10. Limitations

There is no server-side compilation for standard HTML/CSS/JS. Complex build pipelines, private packages, and privileged device APIs are out of scope.

11. Privacy considerations

Preview assembly is client-side. Local persistence stays in the browser unless you export or copy content elsewhere.