Online Code Runner

📖 Introduction

This is a front-end playground that executes entirely inside your browser. You write HTML, CSS and JavaScript in three separate panes, and within a second or two the rendered page appears on the right while every console message is listed underneath. Nothing is uploaded to a server. The whole execution happens on your own machine, which makes it safe for quick experiments with snippets you would rather not paste into an unknown website. It is built for the everyday tasks of front-end work: checking whether a layout behaves as expected, confirming that a small script produces the values you think it does, and isolating a bug down to the smallest piece of code that still reproduces it.

People learning front-end basics get the most out of it: change one CSS rule and the page shifts immediately, which lands far better than imagining the result while reading a tutorial. Anyone writing a technical post can paste a minimal reproduction here and readers can run it without setting anything up. It also works well when you are mentoring someone and need to show why a particular script throws, without asking them to install a toolchain first.

People learning front-end basics get the most out of it: change one CSS rule and the page shifts immediately, which lands far better than imagining the result while reading a tutorial. Anyone writing a technical post can paste a minimal reproduction here and readers can run it without setting anything up. It also works well when you are mentoring someone and need to show why a particular script throws, without asking them to install a toolchain first.

• Nothing appears in the console. Check that console capture is ticked and that your code actually calls console.log.
• The preview is blank. That usually means the script threw. Read the error and line number in the console panel below.
• Can I load jQuery? Not from a CDN inside the sandbox. Paste the library source into the JS pane instead.
• The preview frame feels cramped. Export the page as HTML and open it full screen in a browser tab.

✨ Features

• Three separate editors: HTML for structure, CSS for styling, JavaScript for behaviour. Switch between them with the buttons at the top; the contents never mix.
• Live preview: with auto-run enabled the page re-renders 0.6 seconds after you stop typing. Turn it off and choose Manual if you prefer full control.
• Console capture: console.log, console.info, console.warn and console.error from your page are forwarded to the panel below, together with uncaught runtime errors and the line number where they happened.
• Sandbox isolation: the preview runs inside an iframe with the sandbox attribute, so popups, top-level navigation and access to the parent page are all blocked.
• Dark preview: switch the preview background to check how your colours and borders look against a dark surface.
• Export and copy: save the combined page as a single HTML file, or copy whichever pane you are currently editing to the clipboard.

🚀 How to Use

1. Write your markup in the HTML pane, or click Load sample to get a small clickable counter.
2. Switch to CSS for styling and to JS for behaviour. All three are merged into one document.
3. Pick an auto-run delay. Choose Manual when you need precise control over each run.
4. Click Run. The rendered page appears on the right and the console lists every message.
5. When the result looks right, click Export HTML to save it, or Copy current pane to take the code away.

⚠️ Notes

• No network accessNetwork requests are blocked inside the sandbox, so fetch and XMLHttpRequest will not reach remote hosts from the preview.
• No local storagelocalStorage and cookies are unavailable. Keep state in ordinary variables instead.
• No external CDNExternal CDN scripts cannot be loaded. Paste the library source directly into the JS pane if you need one.
• Avoid infinite loopsAn endless loop will freeze the preview frame. Always give loops an exit condition.
• Frontend check onlyThis tool is for quick verification only. It does not replace a local development environment or a real build pipeline.