Skip to content
WANCODE
BM

How your code runs

The sandboxed preview explained: what it protects, what it changes about normal browser behaviour, how React mode works — and its honest limits.

When you press Run, WANCode assembles your files into one HTML document and loads it into an <iframe> inside the page. Your code runs in your own browser — there's no server running it.

The sandbox

HTML
<iframe sandbox="allow-scripts allow-forms" srcdoc="…your page…"></iframe>

Simplified. Note what's missing: allow-same-origin, allow-popups, allow-top-navigation.

  • allow-scripts lets your JavaScript run, and allow-forms lets forms work.
  • There's no allow-same-origin, so the preview gets an opaque origin — the browser treats it as a stranger. Your code can't read WANCode's cookies, IndexedDB, localStorage or page, and can't touch your progress.
  • It can't navigate the main window or open popups. The only channel back to WANCode is postMessage, and WANCode checks every message comes from the current preview run.
  • A strict Content Security Policy inside the preview blocks network requests (fetch, XHR, WebSockets), form submissions to other sites, workers and plugins. Images, media and Google Fonts from https: addresses are still allowed so your pages can look real.

What behaves differently from a normal page

fetch("data.json")
Requests for a file in your project are answered from your files after a short, realistic delay, so you can practise async/await. Requests to anything else fail, because the network is off.
Long loops
Loops that run for more than 1.5 seconds are stopped, with a console message pointing at the line. That saves you from most accidental infinite loops.
alert / confirm / prompt
alert() shows a small message over the preview and in the console instead of freezing the page. confirm() answers OK (true) automatically. prompt() returns its default value, or null if there isn't one.
Links and forms
Links don't navigate — the console tells you where they would have gone (#section links still scroll). window.open is disabled. A form submitted without event.preventDefault() is stopped, with a hint explaining why you'd normally need it.
localStorage
Emulated separately for each project and saved with your draft, up to about 200 KB. It survives pressing Run again. sessionStorage also works but resets on every run.
Console
console.log, warnings and errors appear under the preview, with file and line numbers mapped back to your files. Very chatty code is cut off after a few hundred messages per run.

React mode

  • React 18.3.1 (the development build, so you get helpful warnings) is preloaded.
  • Your .jsx files are converted to plain JavaScript in the browser by a small, fast JSX transform (Sucrase). It doesn't type-check and doesn't bundle npm packages.
  • App.jsx must export default a component; it's mounted into #root for you.
  • You can import react and react-dom, your own files (import Card from "./Card.jsx") and CSS files (import "./styles.css"). Any other package shows a clear error.

Want to use npm packages? Download your React project as a ZIP — it's a ready-to-run Vite project. See Playground and projects.

Honest limits

  • The sandbox is a strong boundary around WANCode's data, but it isn't a perfect shield against everything. A determined (or buggy) script can still freeze the preview — for example with heavy recursion or a huge calculation that isn't a loop — or use a lot of memory.
  • The preview shares your browser's resources, so a frozen preview can make the whole WANCode tab slow or unresponsive. Reload the tab — your draft was autosaved — and fix the code.
  • Because https: images and fonts are allowed, a page you paste in can still load them, which tells those servers that someone opened it — just like any web page.
  • Server code can't run here. Next.js server features, Node.js, databases and API keys belong on a server. When WANCode teaches those topics, they are clearly labelled simulations or projects you download and run on your computer.

Never paste secrets

Don't put passwords, API keys or tokens in the editor. Drafts are stored in plain form in your browser, and share links contain the full source code.