WebPile Pro Enterprise — Full Tutorial
WebPile Pro is a self-contained, browser-native HTML/CSS/JS sandbox studio that runs entirely on device — no server-side code execution, no data upload, no account required.
Everything lives in localStorage, exportable at any time as structured ZIP packs.
1 — Creating Your First Project
- Click Projects in the top-right toolbar.
- Type a name in the New project name field and click Create.
- A default project is auto-created on first visit — it already has
index.html, styles.css, and app.js.
- To switch projects: open Projects → click Load next to any row.
- To delete permanently: click Delete. Cannot be undone (snapshots are also wiped).
2 — Multi-File Editing (Tabs)
- Click any tab to switch the active file. Monaco intellisense context switches with it.
- + File — adds a new empty file. Name it
*.html, *.css, *.js, *.json, or *.md — Monaco loads the matching language mode automatically.
- Rename — renames the active file; language mode updates automatically.
- Delete — permanently removes the active file after confirmation.
- Format — runs Monaco's built-in formatter (Shift+Alt+F also works inline).
- Copy — copies active file content to clipboard.
- A yellow dot on a tab means unsaved changes. Files autosave silently after 450 ms of inactivity.
CSS from styles.css and JS from app.js are injected into index.html
at placeholders /* WEBPILE:CSS */ / /* WEBPILE:JS */ — or before
</head> / </body> if no placeholders exist.
3 — Rendering & Preview Controls
Auto-Render ToggleWhen ON (default), the preview re-renders after each keystroke once the debounce delay expires (default 350 ms). Adjust the Debounce field to slow it for heavy pages.
Manual RenderClick Render or press Ctrl/⌘+Enter to force a fresh render. The iframe only reloads if content actually changed (hash-gated).
Open in New Tab ↗Opens a Blob URL in a new tab for mobile testing or sharing a snapshot link.
ReloadForce-reloads the iframe without recomposing HTML — useful to replay page-load events in your scripts.
Device WidthConstrain the preview viewport (Responsive, 375 px, 768 px, 1280 px) for responsive testing.
ScaleScales the viewport visually (0.5×, 0.75×, 1×) without altering CSS breakpoints.
4 — Security Modes — Safe · Full · Isolation · Network
- Safe mode (default) — No
allow-scripts. No JavaScript runs. Use for pure HTML/CSS iteration.
- Full mode — Adds
allow-scripts allow-forms allow-modals allow-popups allow-downloads. Still sandboxed; allow-same-origin excluded unless Isolation is OFF.
- Isolation ON (default) — Preview cannot access
localStorage, cookies, or the parent DOM.
- Isolation OFF — Adds
allow-same-origin. Required only when preview code must read storage or call parent APIs.
- Network: Block (default) — Proxies
fetch, XHR, WebSocket to reject all calls. Blocked calls shown as NETWORK BLOCKED in console.
- Network: Allow — Permits outbound calls. Use when testing API-connected UIs.
Rule of thumb: develop in Safe → Isolated → Block, then relax one constraint at a time as your feature explicitly requires it.
5 — Console Capture & Debugging
- Click Console or press Ctrl/⌘+` to open the console pane beneath the preview.
- In Full + Instrumentation ON mode the injected harness captures
console.log/info/warn/error, uncaught errors, promise rejections, and blocked network calls — all via postMessage with a rotating session token.
- Console clears on every new render to prevent cross-run confusion.
- Copy Console copies the log text to clipboard for incident reports.
- Clear manually empties the pane without triggering a re-render.
6 — Validation & Static Analysis
- Click Validate → Run Validate. WebPile scans all project files in-browser — no upload.
- Checks: HTML parse errors, missing
<title>, missing charset, inline event handlers, deprecated tags, JS eval(), blocked mixed content, oversized files, CSS parse warnings.
- Each issue shows severity (error, warn, info), a code reference, and a fix suggestion.
- Copy Report — copies the plain-text report for tickets or client emails.
- Export Evidence Pack — ZIP: source files + SHA-256 hash manifest + validation report. Audit artefact for client sign-off or compliance.
7 — Version History & Snapshots
- Click History → type an optional label → click Take Snapshot or press Ctrl/⌘+S.
- Snapshots store all file content in
localStorage. Up to 30 per project (oldest auto-evicted).
- Click Restore to revert the project to that snapshot. Take a snapshot first if you want to preserve current state.
- Diff — click two snapshot rows (A then B) then click Diff for a file-by-file character-level change summary.
- Delete History clears all snapshots for the active project. Irreversible.
8 — Export & Import
Export ZIP (Project)Bundles all project files. Drop onto Netlify Drag-and-Drop, Vercel, or any static host.
Evidence PackSource files + SHA-256 manifest + validation report. For client sign-off and compliance workflows.
Tool PackThis HTML file + vendor scaffold + README. Deploy the studio on an intranet or locked network.
Import ZIPClick Import and select a ZIP (previous WebPile export or any flat HTML project). All files imported as a new project.
9 — Vendorizing for Locked / Air-Gapped Networks
- Monaco resolves from
./vendor/monaco/min/vs/loader.js first, then falls back to CDN. A gold banner appears when CDN is used.
- JSZip resolves from
./vendor/jszip.min.js first, then CDN.
- Export a Tool Pack — it includes a
README.md with exact CDN URLs to mirror locally.
- Once local vendor assets are in place the tool runs with zero external requests — suitable for air-gapped or highly-governed environments.
10 — Keyboard Shortcuts
Render — Ctrl/⌘+Enter
Snapshot — Ctrl/⌘+S
Open Console — Ctrl/⌘+`
Format — Shift+Alt+F
Close modals — Escape
Design Philosophy
The preview is a sandboxed iframe — your code never leaves the browser. No backend, no account, no telemetry.
Start locked-down (Safe + Isolated + Block) and relax one layer at a time only when your feature explicitly requires it.
All data is yours: in localStorage, exportable as structured ZIPs at any time.
