Skip to content
abhineet-saha
Profound work log

May — Jun 2026 · Profound

Editing overlays that don't know what framework they're on

In-context editing inside a cross-origin preview iframe, for any host frontend.

A headless CMS sells on being framework-agnostic. That claim gets tested by live preview: an editor loads their real site in an iframe, clicks a heading, and edits it in place. The overlay doing that cannot assume React, or Next.js, or anything about how the host page renders.

What the work involved

  • An overlay script that operates on the DOM directly rather than through any framework's component tree, so the same script works against a Next.js app and a TanStack Start app.
  • Click interception that distinguishes 'the editor is selecting a block' from 'the editor is using the site', which is subtler than it sounds when the site has its own click handlers.
  • Cross-origin message passing between the CMS shell and the previewed site, which later became a security problem worth its own write-up.

I wrote a bit over half of the overlay script; the rest is a colleague's. Rendering support for TanStack Start in the CMS renderer was mine, and I shipped scaffolding support for the same framework in our CLI the same day — the two halves of one capability.