The New Orange mark: a radial orange gradient on a dark square.New Orange CMS

The Studio

Presentation and preview

Editing beside a live rendering of the page, with the frontend reading drafts and clicks in the preview mapping back to fields.

Presentation puts the site in an iframe beside the editor. Three things have to line up for it to work.

  1. The frontend must be able to read drafts. A preview route puts it into draft mode and switches its reads to the drafts perspective.
  2. The preview must be authorised. A short-lived preview secret is issued by the API and validated on the frontend, so draft content is not readable by anyone who guesses the URL.
  3. Rendered values must map back to fields. That is what resultSourceMap is for, and it is why a query asks for one.

Where it is partial

Source maps are emitted but not yet complete for every projection shape, so the click-to-edit overlay resolves some values and not others. Editing beside a live preview works; every value being individually clickable does not, yet.

The practical setup

  • Keep the preview route's reads in the same functions as the public reads, with the perspective as the only difference. Two code paths drift.
  • Never let draft mode be enabled by a query parameter alone. The secret is the gate.
  • Remember that the overlay is a development affordance: nothing about the published site should depend on it.