🔧
HTML, CSS & JavaScript Compiler
Live PreviewWrite HTML, CSS, and JS — see the result instantly in a sandboxed preview. No installation needed.
Preview
•
•
Sandboxed iframe • safe execution
Console
No output yet — run your code or use console.log()
Category
💻 Developer ToolsKeyboard Shortcuts
Ctrl + Enter
Run code
Ctrl + Z
Undo
Ctrl + Y
Redo
Tab
Indent
Shift + Tab
Unindent
Ctrl + /
Toggle comment
About This Tool
This live code editor gives you three panes for HTML, CSS and JavaScript and renders the combined result in a preview frame next to them. A console panel captures output from log, warn, error and info calls in your script, so you can debug without opening browser developer tools. You can leave it in auto mode, where the preview refreshes as you type, or switch to manual and run your code with a keyboard shortcut when you are ready. Starter templates cover a hello world page, a CSS animation, a working counter application and a blank canvas, which saves setting up boilerplate for a quick experiment. The preview runs inside a sandboxed frame, which isolates it from the rest of the page. It suits anyone prototyping a snippet, testing a CSS idea, checking a piece of JavaScript behaviour, or teaching front-end basics without asking learners to install anything.
Frequently Asked Questions
No. Write the content you want in the body and let the tool assemble the rest. It wraps your CSS in a style element and your JavaScript in a script element and combines all three into a complete document before handing it to the preview frame, so boilerplate is unnecessary.
In auto mode the preview rebuilds as you type, which is ideal for CSS work where you want instant visual feedback. In manual mode nothing runs until you trigger it, which suits JavaScript editing because half-finished code would otherwise throw an error on every keystroke and flood the console.
In the console panel beside the preview. The tool intercepts the console methods inside the preview document, so log, warn, error and info calls from your script are listed in the order they run. That lets you debug without opening your browser's own developer tools.
The preview runs inside a sandboxed frame with scripting allowed but otherwise isolated from the surrounding page. That containment is what makes executing code in the editor reasonable. The same isolation means your code cannot interact with anything outside the preview, which is a limitation as well as a safeguard.
Because every rebuild constructs a brand new document and runs your script from the beginning, discarding any state built up by earlier interactions. If you are testing something that depends on a sequence of clicks, switch to manual mode so you control exactly when the rebuild happens.
Three panes assembled into one sandboxed document
The three editors are not compiled in the sense that a language compiler produces machine code. What happens is assembly: the tool takes your HTML body content, wraps your CSS in a style element and your JavaScript in a script element, and builds a complete document from the three. That document is then handed to a preview frame, which parses and executes it exactly as a browser would treat a standalone page.
The frame is sandboxed, with scripting permitted but the frame otherwise isolated from the surrounding page. That isolation is what makes running arbitrary JavaScript safe here, and it is also why your code cannot reach outside the preview.
Console output is captured by replacing the console methods inside the preview document before your script runs. Each call is forwarded to the panel beside the editors, so log, warn, error and info messages appear in the order your code emits them.
In auto mode a change in any editor triggers a rebuild of that document. In manual mode the rebuild happens only when you run it, which is preferable when a partially typed script would throw on every keystroke.
The frame is sandboxed, with scripting permitted but the frame otherwise isolated from the surrounding page. That isolation is what makes running arbitrary JavaScript safe here, and it is also why your code cannot reach outside the preview.
Console output is captured by replacing the console methods inside the preview document before your script runs. Each call is forwarded to the panel beside the editors, so log, warn, error and info messages appear in the order your code emits them.
In auto mode a change in any editor triggers a rebuild of that document. In manual mode the rebuild happens only when you run it, which is preferable when a partially typed script would throw on every keystroke.
Building a counter from the template
Load the Counter App template and you get all three panes populated at once. The HTML pane holds the markup: a display element with an identifier of val and three buttons for increment, decrement and reset. The CSS pane holds the styling for those elements. The JavaScript pane holds a counter variable starting at zero and click handlers that raise it, lower it and set it back to zero, each calling a shared update function.
The update function writes the number into the display element and colours it green above zero, red below and dark grey at zero. It also logs the value, so every click adds a console line.
Click increment three times and the display reads 3 in green, with three console lines recording 1, 2 and 3. Click decrement five times and the display passes through zero in grey and settles at minus 2 in red, with five more console lines. Click reset and the display returns to 0 in grey.
Edit the colour threshold in the JavaScript pane with auto mode on and the preview reloads immediately, resetting the counter to zero as the document is rebuilt.
The update function writes the number into the display element and colours it green above zero, red below and dark grey at zero. It also logs the value, so every click adds a console line.
Click increment three times and the display reads 3 in green, with three console lines recording 1, 2 and 3. Click decrement five times and the display passes through zero in grey and settles at minus 2 in red, with five more console lines. Click reset and the display returns to 0 in grey.
Edit the colour threshold in the JavaScript pane with auto mode on and the preview reloads immediately, resetting the counter to zero as the document is rebuilt.
Working effectively in the editor and its limits
The most important habit is knowing when to use manual mode. Auto mode is ideal for CSS work, where every keystroke usefully updates the rendering. It is less pleasant for JavaScript, because half-typed code throws errors on each rebuild and fills the console with noise. Switch to manual, finish the thought, then run it.
Remember that each rebuild creates a fresh document. Any state your script has accumulated, such as the counter value above, is discarded. If you are debugging something that depends on a sequence of interactions, avoid triggering a rebuild in the middle of that sequence.
The sandbox has real consequences. Code in the preview is isolated from the surrounding page, so this is a place to prototype a component rather than to test how it behaves inside a larger application. Anything requiring a server, such as a backend API you control, is out of scope here.
Finally, this is a scratchpad rather than a project workspace. Copy work you want to keep into a file on your own machine before closing the page, since a rebuild or a reload replaces what is in the editors.
Remember that each rebuild creates a fresh document. Any state your script has accumulated, such as the counter value above, is discarded. If you are debugging something that depends on a sequence of interactions, avoid triggering a rebuild in the middle of that sequence.
The sandbox has real consequences. Code in the preview is isolated from the surrounding page, so this is a place to prototype a component rather than to test how it behaves inside a larger application. Anything requiring a server, such as a backend API you control, is out of scope here.
Finally, this is a scratchpad rather than a project workspace. Copy work you want to keep into a file on your own machine before closing the page, since a rebuild or a reload replaces what is in the editors.