DEV3 Free HTML, CSS and JavaScript Playground — Source Code (React + Tailwind)

Source code of the DEV3 HTML, CSS and JavaScript Playground, a three-pane HTML, CSS and JavaScript playground with a sandboxed live preview, console capture, share links and zip download, all in the browser.

Free download: sign in to any DEV3 account and click Download ZIP. Try it live: https://dev3.tech/tools/code-playground shows the finished tool running.

What is in the download

• A standalone Vite + React + TypeScript + Tailwind CSS project: src/tool holds the tool, shared pieces sit beside it
• package.json with exact versions plus a lockfile, so npm ci works
• README.md (run, build, embed in Next.js or plain React) and an MIT LICENSE

What the code does

• Sandboxed iframe preview (allow-scripts only) with debounced updates
• Console panel fed by postMessage, checked against the iframe window
• Share links: JSON compressed with fflate and base64url, size-capped
• Textarea editor with line numbers, Tab indentation and auto-indent
• Six starter templates and a zip export (index.html, style.css, script.js)

Tech stack

React 19, TypeScript, Vite, Tailwind CSS 4, fflate.

Install and customise

The How to install and How to use tabs list the steps. In short: unzip, npm ci, npm run dev, then copy the tool folder into your own app if you want to embed it.

Good to know

• A browser-only tool: there is no backend or database in the code.
• The editor is a plain textarea with no syntax colouring or autocomplete.
• Share links hold the code in the URL, so very large projects must use the zip.