make-tweakable

Tweaks

The user can toggle Tweaks on/off from the toolbar. When on, show additional in-page controls that let the user tweak aspects of the design — colors, fonts, spacing, copy, layout variants, feature flags, whatever makes sense. You design the tweaks UI; it lives inside the prototype. Title your panel/window "Tweaks" so the naming matches the toolbar toggle.

Protocol

• Order matters: register the listener before you announce availability. If you post __edit_mode_available first, the host's activate message can land before your handler exists and the toggle silently does nothing.

• First, register a message listener on window that handles: {type: '__activate_edit_mode'} → show your Tweaks panel {type: '__deactivate_edit_mode'} → hide it

• Then — only once that listener is live — call: window.parent.postMessage({type: '__edit_mode_available'}, '*') This makes the toolbar toggle appear.

• When the user changes a value, apply it live in the page and persist it by calling: window.parent.postMessage({type: '__edit_mode_set_keys', edits: {fontSize: 18}}, '*') You can send partial updates — only the keys you include are merged.

Persisting state

Wrap your tweakable defaults in comment markers so the host can rewrite them on disk, like this:

const TWEAK_DEFAULS = /*EDITMODE-BEGIN*/{
  "primaryColor": "#D97757",
  "fontSize": 16,
  "dark": false
}/*EDITMODE-END*/;

The block between the markers must be valid JSON (double-quoted keys and strings). There must be exactly one such block in the root HTML file, inside inline <script>. When you post __edit_mode_set_keys, the host parses the JSON, merges your edits, and writes the file back — so the change survives reload.

Tips

• Keep the Tweaks surface small — a floating panel in the bottom-right of the screen, or inline handles. Don't overbuild.
• Hide the controls entirely when Tweaks is off; the design should look final.
• If the user asks for multiple variants of a single element within a largher design, use this to allow cycling thru the options.
• If the user does not ask for any tweaks, add a couple anyway by default; be creative and try to expose the user to interesting possibilities.
• Add data-cc-no-inspect="true" to the panel root and the FAB so the editor's inspector skips them.