LivePad

LivePad is a lightweight browser-based HTML, CSS and JavaScript development environment that combines source editing, live preview, isolated execution, console output, responsive preview modes and project export in a single workspace.

• Production: https://lp.itisuniqueofficial.com
• Repository: https://github.com/itisuniqueofficial-gh/livepad

HTML + CSS + JS  →  Editor State  →  Debounced Render  →  Sandboxed Preview  →  Rendered Website

Overview

LivePad is a zero-build static web app — plain ES modules, no framework, no bundler. It runs entirely client-side: no backend, no sign-up, no API keys. The preview executes user code inside a sandboxed <iframe> that is fully isolated from the application.

Features

• Real code editor (CodeMirror 6) — syntax highlighting, line numbers, active-line highlight, bracket matching, auto-close brackets, search/replace (Ctrl/Cmd+F), code folding, undo/redo, multi-cursor, word-wrap and font-size control. Falls back to a styled <textarea> editor if the CDN is unreachable.
• HTML / CSS / JS tabs — three editors kept alive on switch (cursor, selection and scroll preserved).
• Sandboxed live preview with a debounced live mode and manual Run/Refresh.
• Console — log/info/warn/error, uncaught errors and unhandled rejections forwarded from the preview via a validated postMessage bridge.
• Preview device modes (Responsive / Mobile / Tablet / Laptop / Desktop) and zoom (50–150%) affecting only the preview.
• Responsive workspace — desktop split, tablet split, mobile Code/Preview/ Console tabs. Fit-to-screen, no page scrolling, no horizontal overflow.
• Themes (System / Dark / Light), settings, autosave (LocalStorage), import/export (.html, .css, .js, .json), templates, and opt-in share links (encoded in the URL hash, never sent to a server).
• Font Awesome icons throughout — no emoji. Installable PWA with offline app-shell caching.

Tech stack

• Vanilla ES modules (no framework)
• CodeMirror 6 loaded lazily from CDN (ESM)
• Font Awesome 6 for UI icons
• Node.js for dev/build/lint/test tooling (no runtime dependencies)
• Cloudflare Pages for hosting

Local development

git clone https://github.com/itisuniqueofficial-gh/livepad.git
cd livepad
npm ci
npm run dev     # http://localhost:8080  (serves public/)

Serve over HTTP (not file://): the app uses ES modules and a service worker.

Build

npm run build   # assembles the deployable dist/ directory
npm run preview # serve the built dist/ at http://localhost:8080

dist/ is the Cloudflare Pages output directory.

Testing & quality

npm run lint    # node --check on all JS + forbidden-pattern scan (eval/new Function)
npm test        # unit tests (node:test) for pure modules
npm run check    # lint + test + build

Deployment

Cloudflare Pages (canonical)

Production deploys automatically through the Cloudflare Pages ↔ GitHub integration:

git push origin main  →  Cloudflare Pages build  →  livepad.pages.dev  →  lp.itisuniqueofficial.com

Cloudflare Pages project settings:

Setting	Value
Production branch	main
Build command	npm run build
Build output directory	dist
Node version	20 (or 18+)

Custom domain

lp.itisuniqueofficial.com is added as a Custom domain on the Cloudflare Pages project; Cloudflare manages the DNS record (CNAME → the project's *.pages.dev target). See docs/architecture.md.

Status: the repository and build are production-ready. The Cloudflare Pages project and custom-domain/DNS binding must be created in the Cloudflare dashboard (they require Cloudflare account access and are not configured by this repository).

Optional: GitHub Actions deploy

.github/workflows/deploy.yml is a manual (workflow_dispatch) alternative that publishes dist/ via Wrangler using CLOUDFLARE_API_TOKEN and CLOUDFLARE_ACCOUNT_ID repository secrets. It is intentionally not automatic to avoid duplicating the Cloudflare Git integration on main.

Project structure

livepad/
├── public/                 # static app (published to dist/ as-is)
│   ├── index.html
│   ├── css/styles.css
│   ├── js/                 # ES modules (app, editor, preview, console, …)
│   ├── assets/             # favicon, OG image
│   ├── favicon.svg
│   ├── site.webmanifest
│   ├── robots.txt · sitemap.xml
│   ├── _headers            # Cloudflare Pages security headers
│   └── sw.js               # service worker (offline app shell)
├── scripts/                # dependency-free dev/build/lint tooling (Node)
├── tests/                  # node:test unit tests
├── docs/architecture.md
├── .github/workflows/      # ci.yml (validate) · deploy.yml (manual)
├── wrangler.toml           # Cloudflare Pages output config
├── package.json · package-lock.json
├── .gitignore · .gitattributes · .env.example · LICENSE

Security

• User HTML/CSS/JS runs only inside a sandboxed iframe (sandbox without allow-same-origin) — it cannot touch the app DOM, storage or globals.
• No eval / new Function; user scripts are never injected into the app document.
• The console postMessage bridge validates event.source and a random per-session channel token before accepting messages.
• Application CSS is scoped under .app-*; aggressive user CSS cannot restyle the app.
• No secrets are stored in the repo; deploy credentials live in GitHub Secrets.

Contributing

Branch from main using feature/*, fix/*, chore/* or refactor/*. Open a pull request; CI (lint + test + build) must pass before merge.

License

MIT © It Is Unique Official