Prototypes

Wire an interaction

Select an element and open the Prototype tab of the inspector. Each interaction has:

• a trigger — click, hover, press, a key, or a delay;
• an action — navigate to a frame, go back, open or close an overlay, scroll to an element, or open a URL;
• a transition — instant, dissolve, slide (left, right, up, down) or push (left, right), with a duration.

Agents wire the same interactions straight in the HTML with data-cv-* attributes, so a prototype survives redesigns.

Set the start

Each page has a flow start. Without one, the flow starts on the page's top-left frame. Agents can set it with set_prototype_start.

Play and share

Press Play in the top bar to click through the flow. Share the prototype link (/c/<canvas-id>/proto) with anyone who can view the canvas.