Hover any text in a Forkshop tile. A solid blue outline means the engine can trace it back to a string in your source — click it and the text becomes editable in place. Type. ⌘↵ saves. Esc discards.

The solid outline distinguishes click-to-edit from Option-click → open in editor, which uses a dashed outline. Holding Option suspends this overlay, so opt-click takes precedence even on editable text.

The overlay runs in dev only. Production builds tree-shake the wiring entirely, and the /api/forkshop/edit route returns 403.

What's editable

The engine fetches the source file for the current tile, parses it, and builds a set of strings that originated in that file:

• String literals. Text inside "…", '…', and simple backtick template literals — no interpolation.
• JSX text children. The text between tags (<p>Hello world</p>).

Text rendered by a sub-component the current page doesn't author shows a gray dashed outline — locked. Editing it would write the change to the wrong file, so the engine prevents the click. To edit the shared component's text, open a Board that points at that component directly.

Save flow

Click editable text, type, then ⌘↵ to save. The engine POSTs the original and new text to /api/forkshop/edit, which splices the change into the source file in place. Next.js HMR picks up the file write and updates the iframe without a reload.

If the original text appears more than once in the source file, the save is rejected. Edit a larger surrounding span to disambiguate.

Multi-viewport sync

On a Board that renders several iframes of the same route — e.g. a multi-viewport gallery built with responsiveFrameEntries:

• As you type, the engine mirrors your edits live across sibling iframes using the iframe registry. No save needed.
• On save, the engine fires a forkshop:source-changed event on window with the affected sourceFile. Every controller subscribed to that file refetches its editable-set so future edits resolve against the new source.

Production behavior

The edit overlay and /api/forkshop/edit are both dev-only. In production the overlay is a no-op and the route returns 403. Nothing to configure — it's off by default in any non-development build.