Skip to content
Home Services Book
§
§ · free tool

Code Playground. HTML, CSS & JS that runs live.

Three editors, a sandboxed live preview and a captured console — a local CodePen. Everything runs in your browser on your own device; nothing is uploaded.

See custom web platforms Book a call WhatsApp
A free online tool by Digital Heroes
on input
HTML
CSS
JavaScript

Your code runs locally and sandboxed in this tab — nothing is uploaded, and it cannot touch this page or your other tabs.

A local CodePen, minus the account

Write HTML, CSS and JavaScript in three dedicated editors and watch a sandboxed iframe re-render as you type. Every console.log, warning, uncaught error and unhandled promise rejection is captured into the console panel below the preview — the same way a devtools console would surface them, but scoped to your snippet. When you like the result, download a single self-contained .html file or copy the combined source to your clipboard. The iframe is isolated with the sandbox attribute, so your code can run scripts but can never reach this page, your storage, or your other tabs. No account, nothing uploaded, free forever.

§ 02 · what you can do

Everything a playground should do.

Three live editors Write HTML, CSS and JS side by side, with Tab-key indentation that inserts two spaces instead of moving focus.
Instant sandboxed preview The isolated iframe refreshes automatically as you type, or on demand with the Run button when auto-run is off.
Captured console Every log, info, warn, uncaught error and unhandled promise rejection appears in real time, with objects and arrays serialized.
Download one .html file Export your HTML, CSS and JS combined into a single self-contained file, ready to share, host or deploy.
Copy the full source One click copies the entire combined document to your clipboard so you can paste it wherever you need it.
Resizable panes Drag the handles (or nudge them with arrow keys) to rebalance editors, preview and console. Your work saves to this browser.
§ 03 · how to use it

Four steps, no manual.

  1. Type or paste into the HTML, CSS and JS editors — on mobile, switch editors with the tabs at the top.
  2. Watch the live preview re-render on the right. With auto-run on it updates as you type; toggle it off and press Run to update on demand.
  3. Check the console below the preview for logs, warnings and errors while you debug.
  4. Click Download .html for a self-contained file or Copy HTML to copy the source. Your code stays on your device.
§ 04 · faq

Frequently asked questions.

Is the Code Playground free?
Yes — completely free for everyone. No sign-up, no account and no usage limits.
Is my code private? Is anything uploaded?
No upload, ever. Everything runs in your browser on your own device, and your code is saved only in this browser's local storage — it never leaves your computer.
Is the preview safe to run?
Yes. Your code runs inside a sandboxed iframe that is isolated from this page. It can run scripts and open its own dialogs, but it cannot read this page, your storage, or your other tabs.
Will I lose my code if I close the tab?
No — your HTML, CSS and JS are saved automatically in this browser and reload when you return. For a permanent copy, use Download .html. Clearing site data removes the saved work.
Does the console show real errors?
Yes. It mirrors console.log, console.info, console.warn, console.error and console.debug, and also catches uncaught runtime errors (with line numbers) and unhandled promise rejections from your running code.
Can I download my work as a file?
Yes. Download .html writes a single self-contained page with your HTML, an inline <style> for your CSS and an inline <script> for your JS — open it anywhere, no dependencies.

Published · Last updated .

Online now

Hi there. How can we help you today?

Reply