Edit a draft on the live store

Simple terms

Edit on store opens the draft on the merchant's real page. Changes remain draft-only until the experiment is reviewed and launched from Apex.

The on-site editor is the high-fidelity editing surface for stores with the Apex SDK installed. It runs over the merchant page in an isolated editor layer, so selectors, storefront scripts, cart behavior, consent tools, and session state match the environment shoppers use.

Routes

• /tests/[id]
• /tests/[id]/variations/[varId]
• /api/editor-sessions

How to use it

1. Open a draft experiment or one of its treatment variations.
2. Choose Edit on store. Apex opens the experiment URL in a new tab and connects the editor automatically.
3. Pick an element to edit text, image source, color, spacing, visibility, or other supported styles.
4. Switch treatment variations from the editor toolbar when the session covers more than one treatment.
5. Watch the save status. Every edit is saved back to the same draft used by Quick preview and Apex Operator.
6. Exit the editor to revoke the session and reload the unedited store page.

The persistent Draft - not live badge is authoritative. The editor cannot launch traffic or change an experiment's status.

Operator and browser tools

• The compact on-store Operator dock can produce and save a treatment from the current live DOM context.
• The full Operator remains available in the dashboard. When the on-site tab is connected, its existing browser tools run against that real tab through the scoped editor relay instead of the proxy iframe.
• Full QA, action proof, screenshots, review, and launch approval still belong to the normal Operator and QA workflow.

Device preview

The device button opens the same merchant page in a 390 x 844 same-origin frame and reapplies the current draft. If the merchant's own frame-ancestors or related browser policy blocks self-framing, Apex restores the page and shows a fallback instead. Use browser device mode or open the page on a mobile device in that case.

Security behavior

• The launch credential is short-lived, single-use, and placed in the URL fragment so it is not sent to the merchant server.
• The SDK removes the fragment before exchanging it.
• The exchanged bearer stays in memory and is restricted to one shop, experiment, and exact merchant origin.
• Artifact reads and writes are limited to non-control variations in that experiment.
• Exiting revokes the session. A hard navigation or reload ends the editor unless Apex starts a fresh session.

Quick preview fallback

Quick preview remains available before the SDK is installed and for shareable proxy previews. It is useful for draft review, but interactive cart, checkout, consent, authentication, and session-dependent behavior can differ from the live store. Use Edit on store as the fidelity surface when it is available.

Failure modes

• Editor does not appear: confirm the Apex SDK is installed on the exact target page, then retry from the dashboard.
• Launch opens but does not connect: the single-use token may have expired or the target origin may not match the shop configuration.
• Save conflict: the draft changed in another editor. Reload the variation before continuing so newer work is not overwritten.
• Custom JavaScript cannot be undone in place: exit or reload the page. The editor says when a reload is required.
• Mobile frame is blocked: use browser device mode or a real mobile device.

Implementation source

• Session and scoped editor APIs live under src/app/api/editor-sessions.
• The dashboard launch surface is src/features/apex-operator/ui/on-site-editor-launch.tsx.
• The storefront bootstrap and isolated editor runtime live under packages/sdk/src/editor-bootstrap.ts and packages/sdk/src/editor.
• All writes use the shared variation artifact save service, including artifact hashes, workspace mirrors, snippet compilation, and cache invalidation.