Skip to content
WANCODE
BM

Playground and projects

Make your own projects in HTML/CSS/JS or React, keep them in your browser, download them as a ZIP, and share them with a link.

The Playground is the same editor and sandboxed preview as the lessons, without the exercises. Use it to experiment, rebuild a lesson from memory, or start something of your own.

Two modes

  • HTML/CSS/JS — a normal web page: index.html, style.css, script.js. Link your CSS and JS from the HTML the usual way.
  • React — App.jsx with React 18 preloaded. Add more .jsx files and import them. See How your code runs for what's available.

Start from Blank or from a template. New files can be .html, .css, .js or .jsx.

Saving and managing projects

  • Projects save automatically in this browser (IndexedDB), the same way lesson drafts do. They're included in your learning backup.
  • My projects lists everything you've saved, most recently opened first, with search.
  • Rename, Duplicate (a safe way to try a risky idea) and Delete project. Deleting removes it from this browser and can't be undone — unless it's in a backup you downloaded.

Download as a ZIP

Export ZIP in the Playground (and "Download project" in lessons and projects) builds a ZIP in your browser:

  • Web projects download as-is, plus a short README. Open index.html in a browser to view it.
  • React projects download as a ready-to-run Vite project: your files go in src/, with index.html, package.json and vite.config.js added. You need Node.js 20 or newer installed.
Terminal
cd my-react-project
npm install
npm run dev

Then open the address Vite prints (usually http://localhost:5173). Now you can install any npm package.

Opening index.html straight from your disk works for simple pages, but fetch("data.json") usually doesn't (browsers block it for file:// pages). Use a small local server or put the site online — see Deploy your project.

Share links

Share link compresses your whole project's source code into the link itself (the part after #). There's no upload and no server copy: the link is the project. Someone who opens it sees your code in their own Playground; it isn't saved on their side until they press Save a copy.

  • Anyone with the link can read all of the code. Chat apps and email may store links, so treat a share link as public.
  • Never include passwords, API keys, tokens or personal data.
  • Links have a size limit. If a project is too big, WANCode tells you — download a ZIP instead.
  • A link is a snapshot. Later edits don't change a link you already sent; share a new one.

Guided projects

Projects are bigger builds split into milestones, each with checks and hints. A project is complete when every milestone passes and you've ticked its final checklist. You can download the starter files or the finished solution.