How to use the HTML, CSS and JS playground
- Write markup in the HTML box, styles in CSS, and scripts in JavaScript. The preview updates as you type.
- Read console.log, warnings, and errors from your script in the Console under the preview.
- Switch the layout between side by side, stacked, and preview only to suit your screen.
- Press Export HTML file to download everything as a single page.
Put only the contents of the body in the HTML box. The tool wraps it in a full page for you. Turn off Live preview if your script has side effects and you would rather run it yourself with the Run button.
Questions
Is my code uploaded?
No. Your HTML, CSS, and JavaScript run in your browser inside a sandboxed frame. Nothing is sent to a server. The only copy is the one saved in your own browser.
Can my code access this page or my data?
No. The preview runs in a frame with the sandbox attribute and without same-origin access, so it cannot read this page, its storage, or cookies. It can still load images, fonts, or scripts from the web if your code asks for them.
Why do alert() and prompt() do nothing?
Pop-up dialogs are blocked in the sandbox on purpose. Use console.log and read the Console panel under the preview instead.
How do I keep my work?
It is saved automatically in this browser. To keep a copy or share it, use "Export HTML file". It downloads one self-contained page with your CSS and JavaScript inside.
Does it work with frameworks like React or Tailwind?
You can load a library by adding a script tag to the HTML, for example from a CDN. There is no build step, so code that needs npm packages or JSX will not run as written.
Credits
Built by OneTooling using standard browser features. No third-party code runs on your data.