Features
Everything Clickly can do — from selection modes to live CSS editing.
Selection modes
Clickly supports four distinct selection modes, switchable from the toolbar or via keyboard shortcuts.
| Key | Mode | Description |
|---|---|---|
1 | Single | Click one element. Highlights only that element and opens the annotation popup. |
2 | Multi | Click multiple elements in sequence. All are included in a single exported prompt. |
3 | Area | Draw a rectangular region. Every element whose bounding box intersects the region is selected. |
4 | Draw | Freehand draw directly on the page. Sketch arrows, circles, or callouts that are embedded in the exported prompt. |
Toolbar buttons
| Button | Action |
|---|---|
| ✏️ Annotate | Enter annotation mode. Cursor becomes a crosshair. |
| ❄ Freeze | Pause all CSS animations and transitions at their current frame. |
| 📐 Layout | Overlay spacing guides — margin, padding, and gap visualized. |
| 🎨 Style | Open the live CSS editor for the selected element. Changes are applied in real time. |
| 📋 Copy | Copy all annotations to clipboard as a structured markdown prompt. |
| 🗑 Clear | Remove all annotations from the current session. |
| ⚙ Settings | Configure output format, keyboard shortcuts, and theme. |
Annotation popup
When you click an element in annotation mode, a compact popup appears near the element:
- Feedback field — free-text description of the issue
- Priority — Low / Medium / High, shown as a colored dot in exports
- Type — Bug / Improvement / Question / Praise
- Element path — displayed inline so you can confirm you selected the right thing
Annotations persist in sessionStorage so they survive hot-reloads. They are cleared when you close the browser tab.
Live CSS editing
Click any element with the Style mode active, and a side panel opens with an editable copy of all computed styles for that element. Changes apply immediately via inline styles — no page reload needed. You can copy the final CSS diff directly into your agent prompt.
What it shows
- All applied CSS properties from every matching rule
- Specificity source (element, class, id, inline, inherited)
- Overridden properties shown struck-through
- Diff view between original and your edits
Animation freeze
Click ❄ to inject a stylesheet that sets animation-play-state: paused and transition-duration: 0ms on every element. The page freezes at the current frame, letting you annotate a specific animation state that would otherwise be impossible to click.
Click ❄ again to resume all animations from where they paused.
Layout mode
Activates an overlay that visualizes spacing for every element on hover:
- Blue — margin
- Green — padding
- Orange — gap (flex / grid)
Computed pixel values are displayed as labels. Useful for catching inconsistent spacing before annotating.
React component detection
Clickly reads React's internal fiber tree to build the component path for any element you click:
App > Layout > Page > ProductCard > Button
Source file and line number are extracted from React DevTools-style metadata and included in every annotation. Works with both React 17 and React 18.
Limitations
- Requires a development build (fiber metadata is stripped in production)
- Minified component names show as
torr— always use dev builds - Server Components are listed as their nearest Client Component boundary
Settings reference
| Setting | Default | Description |
|---|---|---|
outputFormat | standard | Controls annotation verbosity. One of compact | standard | detailed | forensic. |
position | bottom-right | Toolbar anchor. One of bottom-right | bottom-left | top-right | top-left. |
theme | light | Toolbar color scheme. light | dark | auto. |
highlightColor | #00f0ff | Color of the hover ring around hovered elements. |
shortcut | Alt+A | Keyboard shortcut to toggle annotation mode. |
persistKey | clickly_annotations | sessionStorage key used to persist annotations across hot-reloads. |
Capture features
Beyond selecting DOM elements, Clickly can snapshot the surrounding state at annotation time and attach it to the markdown output. All six are opt-in per feature; the table below is the default state.
| Feature | Default | What it does |
|---|---|---|
| Text Range | on | If you highlighted text before hitting Add, records the exact character offsets against the enclosing block plus 40 chars of context on each side. Survives React re-hydration. |
| Console Errors | off | Rolling 30-second buffer of console.error, console.warn, window errors, and unhandled promise rejections. Attaches what was in the buffer at submit time. |
| Network Requests | off | Buffered fetch + XMLHttpRequest calls with method, URL, status, duration, headers, and truncated body previews. Authorization, cookies, and API-key headers are always stripped. |
| Animation State | on | Snapshots every live CSS / WAAPI animation under the target via getAnimations({ subtree: true }). Records name, current time, timing, and keyframes. |
| Import / Export | always | Download every current annotation as a .clickly JSON file, or load one with a merge/replace preview. Envelope carries provenance + version. |
| URL Share | always | Encodes annotations into #clickly=<base64> for one-click handoff. Recipients auto-import on load. Refuses payloads above 16 KB. |