cloud-hosting-platform/site-builder
6
0 Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Move the canvas into an iframe (recommend deferring) #62

New Issue
Open
opened 2026-10-07 16:47:28 +00:00 by jknapp · 1 comment
jknapp commented 2026-10-07 16:47:28 +00:00
Owner
Copy link
Copy source

Tier: Bigger bet · Order: 35 of 35 · Effort: L · Impact: low

What

Render the page in an isolated frame so editor CSS and page CSS can't leak and real media queries apply.

Why

Only worth it if style leakage from HTML blocks or head code becomes a real support problem after the device-emulation and breakpoint work.

Today

Craft renders into the editor document; badges, listeners and the Playwright harness all assume one document.

Design notes

Recommendation: don't do this now. Device mode is explicit editor state, so breakpoints can be emulated without an iframe. An iframe means coordinate translation, duplicated listeners, loading fonts into the frame and reworking the test harness.

Depends on

  • #37 Tablet/mobile canvas matches what publishes
  • #45 Tablet/mobile overrides that never touch desktop

From the 2026-10-07 site-builder research (competitor review, user sentiment, code audit, Fable prioritization). Roadmap: https://claude.ai/artifact/QpQcSCk21z6SN7LPSm8tKE · id iframe-canvas

**Tier:** Bigger bet · **Order:** 35 of 35 · **Effort:** L · **Impact:** low ## What Render the page in an isolated frame so editor CSS and page CSS can't leak and real media queries apply. ## Why Only worth it if style leakage from HTML blocks or head code becomes a real support problem after the device-emulation and breakpoint work. ## Today Craft renders into the editor document; badges, listeners and the Playwright harness all assume one document. ## Design notes Recommendation: don't do this now. Device mode is explicit editor state, so breakpoints can be emulated without an iframe. An iframe means coordinate translation, duplicated listeners, loading fonts into the frame and reworking the test harness. ## Depends on - #37 Tablet/mobile canvas matches what publishes - #45 Tablet/mobile overrides that never touch desktop --- From the 2026-10-07 site-builder research (competitor review, user sentiment, code audit, Fable prioritization). Roadmap: https://claude.ai/artifact/QpQcSCk21z6SN7LPSm8tKE · id `iframe-canvas`
jknapp added the tier: bigger-beteffort: Limpact: low labels 2026-10-07 16:47:28 +00:00
jknapp commented 2026-10-07 21:37:22 +00:00
Author
Owner
Copy link
Copy source

Deferred by recommendation: device emulation (#37) + per-breakpoint overrides (#45) removed the need for an iframe canvas.

Deferred by recommendation: device emulation (#37) + per-breakpoint overrides (#45) removed the need for an iframe canvas.
Sign in to join this conversation.
No Branch/Tag Specified
Labels
Clear labels
effort: L
effort: M
effort: S
effort: XL
impact: high
impact: low
impact: med
tier: bigger-bet
Larger differentiating features
 tier: core-polish
Makes it feel like a modern editor
 tier: fix-first
Data-safety and trust bugs
 tier: quick-win
Small changes that remove clunkiness now
No labels effort: L impact: low tier: bigger-bet
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
hub-agent Bot jknapp renovate-bot (Renovate Bot) whmcs-sam whp-cicd-user whp-deploy
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: cloud-hosting-platform/site-builder#62