A live HTML, CSS & JS playground — write code, see it render instantly.
- Live preview — debounced iframe updates as you type
- Split-pane layout — draggable divider between editor and preview
- Three editors — HTML, CSS, JS tabs with syntax highlighting (CodeMirror 6)
- Shareable links — code is compressed into the URL hash, share with anyone
- Dark / Light theme — toggle between themes, persisted via next-themes
- Responsive — desktop: side-by-side split pane, mobile: Code/Preview toggle
- Documentation — technical walkthrough at
/documentation - Zero backend — fully static, no server required
- Next.js 16 — App Router
- CodeMirror 6 — code editor
- Tailwind CSS v4 — design tokens via
@theme inline - next-themes — dark/light mode
- lz-string — URL state compression
- lucide-react — icons
npm install
npm run devOpen http://localhost:3000.
| Route | Description |
|---|---|
/ |
Playground — editor + live preview |
/documentation |
Technical walkthrough of the architecture |
Every change is encoded into the URL hash. Copy the URL to share your snippet — the recipient opens it and the editor is pre-loaded with your code.
http://localhost:3000/#<lz-compressed-code>