HTML, CSS & JS Playground (Online Editor)
A CodePen-style editor with live preview and console — private, sandboxed, no sign-up.
Ctrl+Enter (⌘+Enter) runs · Tab indents; Esc then Tab leaves the editor · saved in this browser.
Preview
Loading the preview…
Console
About the HTML, CSS & JS Playground (Online Editor)
Write HTML, CSS and JavaScript in three tabs and watch the page update as you type. console.log output, warnings and uncaught errors of the page appear in the console under the preview; an error shows the file and line (script.js:4:12), and selecting it takes you to that line. Switch the preview to phone or tablet width to check a responsive layout, tidy your code, and download everything as one self-contained .html file.
Your page runs on a separate MySmartCoPilot sandbox address, inside a locked-down frame that has no access to this site, its storage or your other tabs. The code reaches the frame only by message inside your browser, never in a URL — so there are deliberately no public share links, and the site cannot be used to host someone else’s pages. Your work is saved automatically in this browser.
How to use it
- Pick a template or start typing in the HTML tab. HTML can be a fragment (it goes into the page body) or a whole document with
<html>and<head>. - Add styles in CSS and behaviour in JavaScript. With Auto-run on, the preview updates a moment after you stop typing; otherwise press Run or Ctrl+Enter (⌘+Enter).
- Check the Console for
console.logoutput and errors; select an error’s location to jump to its line. Use Phone or Tablet above the preview to test narrow screens, or Expand for a full-window view. - Press Tidy to format the current tab, and Download HTML to save the page as a single file you can open in any browser or upload to your own hosting.
Examples
HTML: <button id="go">Clicked 0 times</button>
JS: let n = 0;
go.addEventListener("click", () => {
go.textContent = `Clicked ${++n} times`;
console.log("clicks", n);
});Preview: the button counts up when clicked. Console: clicks 1, clicks 2, …
An element with an id is also a global variable in browsers (go above), which is handy in a playground; in real projects use document.querySelector("#go").
HTML: <script src="https://unpkg.com/[email protected]/dist/confetti.browser.js"></script> <button onclick="confetti()">Celebrate</button>
The library loads from the CDN inside the preview, and the button runs it.
Scripts, styles, fonts and images from any https:// address work in the preview. Inline handlers such as onclick work there too — only this MySmartCoPilot page itself forbids them.
Common uses
- Prototyping a component, a layout or a CSS effect before adding it to a project.
- Learning HTML, CSS and JavaScript: change a line and see the result immediately.
- Reproducing a bug in a small, self-contained page you can download and send as one file.
- Trying a JavaScript library from a CDN without setting up a project.
How the preview is built
- An HTML fragment goes into the
<body>of a standard document (<!DOCTYPE html>, UTF-8, a mobile viewport). A whole document is kept as written. - The CSS tab becomes a
<style>at the end of<head>; the JavaScript tab becomes a classic<script>at the end of<body>, so the elements already exist when it runs. For ES modules, add<script type="module">…</script>in the HTML tab. alert(),confirm()andprompt(), forms,fetch()to https:// APIs, canvas, animations and pop-up windows work.- Download HTML builds the same document as a single file, with the CSS and JavaScript inlined.
Protection against endless loops
An endless loop in a web page normally freezes the tab. Before each run, while, do…while and for loops in your JavaScript get a small time check: a loop that keeps running for more than about 5 seconds stops with an error such as Infinite loop? The loop at script.js:3 ran for more than 5 seconds, and the preview stays usable. Line numbers are not changed. Loops over for…of / for…in, code built with eval and inline on…= handlers are not checked.
Limitations
- Each run starts a fresh, isolated page with no persistent storage:
localStorage,sessionStorage, IndexedDB and cookies are not available in the preview, and the page cannot read anything from MySmartCoPilot. - There are no share links or saved projects on a server: your code stays in this browser. Use Download HTML to keep or send a copy.
- One HTML, one CSS and one JavaScript panel; for extra files, load them from a CDN or put them in the HTML tab.
- In Safari, errors thrown by
<script>tags inside the HTML tab are shown without their message and line (a WebKit restriction for isolated frames); errors in the JavaScript tab are shown in full. - Needs an internet connection to load the sandbox frame.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot. The preview runs in an isolated frame loaded from mysmartcopilot-sandbox.pages.dev, a separate MySmartCoPilot address; your code is handed to it inside your browser and never uploaded. Libraries, images or APIs your own page loads come straight from the addresses it names.
Frequently asked questions
Is my code private?
Yes. It is never uploaded: it goes from this page to the preview frame inside your browser and is kept only in your browser’s local storage. External resources your page itself requests (a CDN script, an API) are fetched from those addresses, as on any web page.
Why is there no share link like on CodePen?
Public links would let anyone host pages — including phishing pages — on a MySmartCoPilot address, so the playground does not offer them. To share your work, download the single HTML file and send it, or publish it on your own hosting.
Can I use React, Vue, Tailwind or other libraries?
Yes, by loading them from a CDN with <script src="https://…"> or <link rel="stylesheet" href="https://…"> in the HTML tab, or with await import("https://…") in a module script. There is no npm install or build step, so JSX needs a library that compiles it in the browser.
Where is my work saved?
In your browser’s local storage, a moment after each change (up to 500,000 characters for the three tabs together), so it is still there when you come back on the same device and browser. Reset restores the starter template (and Ctrl+Z in an editor brings your code back for as long as the page is open).
Why does my page say localStorage is not allowed?
The preview is a sandboxed frame with no origin of its own, so the browser refuses storage there (SecurityError). Keep state in variables for experiments; on your own site, storage works as usual.
Can I use it with the keyboard only?
Yes. Move between the HTML, CSS and JavaScript tabs with the arrow keys, run with Ctrl+Enter (⌘+Enter), and leave an editor with Esc followed by Tab.