Popsite Studio

Popsite Studio is a canvas-first visual website editor. The website keeps the screen; editing tools live in a floating bottom dock and open only when requested.

• Edit: turn visible copy into safe plain-text editing directly, without opening a popup. A reversible delete control appears only for the hovered or focused editable block, while Save, Undo, and Redo stay at the top after the first change.
• Space: reveal page sections and tune their inside and outside spacing, with inside spacing up to 640px and outside gaps up to 480px.
• Move: identify sections, double-click to enter their inner blocks, drag on an isolated viewport-fixed dot grid, or use arrow controls.
• Grid detail: cycle through 24px, 12px, and 6px movement steps.
• Style: select text to change typeface, size from 10px to 192px, colour, weight, italic state, and alignment; select a section or small visual accent to change its surface colour. The custom picker supports hue, saturation/brightness, hex entry, page colours, and recent colours.
• Movable controls: drag any popup or the top Save/Undo/Redo bubble by its dot handle; it resists at home, reveals a dashed return target, and magnetically snaps back nearby. Arrow keys move the focused handle and Home resets it.
• Preview: automatically save the current draft, hide every editor control, and see the site as a visitor would.
• Local drafts: Save writes a strictly validated plain-text, style, and removal-state snapshot to browser localStorage only.

The interface is responsive, keyboard operable, reduced-motion aware, and designed toward WCAG 2.2 AA.

At startup, the editor scopes itself to [data-editor-canvas], then #site-canvas, main, or body, in that order. It discovers meaningful leaf text plus direct text inside mixed inline markup, and observes later DOM additions so generated values and newly inserted content become editable too. It also discovers small, non-text colour accents while always excluding its own editor chrome. This lets the core tools work on ordinary semantic website markup rather than depending on the New Leaf sample. Scripts, form-value controls, hidden assistive content, and explicit opt-outs are excluded, and original accessibility attributes are restored when Edit mode closes.

For exact integrations, use data-editable plus a stable data-edit-id for copy, data-style-target plus data-node-id for visual accents, data-section for spacing, and data-block for inner movement targets. Add data-editor-ignore to opt an element out of discovery. The browser suite exercises marketing, editorial, commerce, dashboard, and content-heavy structures, including mixed inline text, tables, generated content, duplicate identifiers, explicit opt-outs, touch input, and a 240-block stress fixture.

No install or build step is required for a source preview.

python -m http.server 4173

Open http://localhost:4173.

The included New Leaf page is the live editing sample. The Cloudflare build emits only the runtime allowlist—index.html, minified styles.css and app.js, the favicon, the self-hosted Manrope font and its license, and hardened _headers—into dist/. The only package is an exactly pinned, build-time copy of esbuild; the deployed browser application remains third-party-free.

Live sample: popsite-studio-demo.pages.dev

npm ci
npm run build:pages

For a Git-connected Cloudflare Pages project, use:

• Production branch: main
• Build command: npm run build:pages
• Build output directory: dist
• Root directory: /

For a direct upload after authenticating Wrangler:

npx wrangler pages deploy dist --project-name popsite-studio-demo

Run the complete local verification before a release:

npm run check
npm run security:audit
npm run build
npm run qa

The security audit checks every reachable Git commit and blob for common secret formats, private-key material, credential-bearing files, personal filesystem paths, and non-placeholder email addresses, then audits the pinned package tree. The browser QA validates all tools, persistence, responsive layouts, security headers, same-origin loading, and performance budgets.

The sample is intentionally noindex, has no Pages Functions or environment variables, and ships a restrictive Content Security Policy plus clickjacking, MIME-sniffing, referrer, browser-permission, and cross-origin isolation headers.

• Ctrl/Cmd + S: save the local draft
• Ctrl/Cmd + Z: undo
• Ctrl/Cmd + Shift + Z or Ctrl/Cmd + Y: redo
• Arrow keys in Move mode: nudge the selected block
• Escape: close the active tool or exit preview

Popsite Studio has no backend, analytics, cookies, account system, third-party runtime scripts, remote fonts, or network calls. Manrope is bundled locally under the SIL Open Font License. Pasted rich text is reduced to plain text. Restored drafts are shape-checked and applied through textContent and allowlisted CSS properties—never through HTML injection.

See PRIVACY.md and SECURITY.md for the project policies.

• PRODUCT.md — product intent and interaction principles
• DESIGN.md — visual system and motion rules
• docs/BUSINESS_OUTLINE.md — commercial plan and roadmap

MIT