Inspect mode
Inspect mode turns the live preview into a click-to-select tool. Toggle Inspect in the bottom drawer's Inspect tab (or from the preview sub-toolbar) and click any element in the iframe. The drawer's Inspect panel then shows what you selected — its tag, the generated CSS selector, and a snippet of its text — alongside two actions:
- Assign an @key — bind the element to a workflow trigger, input, or text capture. The assign form is hosted directly inside the drawer (no separate modal); pick a key name and type, and FlowFn writes the right
data-keyattribute into your HTML. - Refine with AI — pin the element so the next chat message you send to the assistant is targeted at it.
How "Refine with AI" works
When you click Refine with AI, the drawer clears its selection and a chip appears above the chat input showing what you tagged (tag name + selector + a snippet of text). Type something like "make this button bigger and rounded" and send. The assistant gets a hidden [Targeting <tag> · selector: ... · "text"] line at the start of your message, applies changes specifically to that element, and mentions which element it changed in its reply.
The chip clears automatically after the message is sent. Click the X on the chip to drop the target without sending.
Editing styles & behaviors directly from a tap
Inspect also feeds the left-side Style and Behaviors drawers. With either drawer open, tapping an element in the iframe focuses that drawer on the tapped selector — the Style drawer offers to edit the matching CSS rule (or create one for the selector); the Behaviors drawer pre-fills the source element for a new (event → action) rule. See Visual styles and No-code behaviors.
Tips for accurate selectors
Inspect mode generates a CSS selector that prefers id when it's safe, falling back to a tag + nth-of-type path. If you find the AI (or the Style / Behaviors drawer) is targeting the wrong element, give your target a stable id or unique class first, then re-inspect.