Playground

Try each of the new capture features. Everything on this page is wired to give Clickly something to see.

How to use this page

  1. Open Clickly's Settings (the gear in the toolbar) and enable the toggles you want to try: Capture Console Errors, Capture Animations, Capture Network.
  2. Set Output Detail to Detailed or Forensic so the captured data actually shows up in the copied markdown.
  3. Trigger the event on this page, then annotate the relevant target. Copy and paste the annotation to see what the agent would receive.

1. Text Range

Highlight a few words inside the paragraph below with your cursor before annotating it. Clickly attaches the exact character offsets (relative to the enclosing <p>) plus the surrounding context, so an agent can grep the source for the exact substring — not the whole paragraph.

The quick brown fox jumps over the lazy dog while three witches at the crossroads argue about semicolons. Nobody wins, but the fox learns more than expected about JavaScript closures and, later, is rumoured to have opened a small consultancy in Copenhagen offering type-narrowing advice to overworked React apps.

What to try: drag-select the phrase "quick brown fox", then annotate the paragraph. Copy the annotation — the output should include a **Range:** line with the character offsets.

2. Console Errors

Click any of these buttons within 30 seconds of submitting an annotation — the rolling buffer keeps the most recent entries and attaches them to the annotation.

Requires: Settings → Capture Console Errors = on.

3. Network Requests

Recent HTTP requests (fetch + XHR) get attached at annotation time, with sensitive headers (Authorization, Cookie, x-api-key, …) stripped before they hit the buffer.

Last result: (no request yet)

Requires: Settings → Capture Network = on.

4. Animation State

The animated blob below is a real CSS @keyframes animation. Annotate it while it's running and Clickly snapshots the WAAPI currentTime, timing, and (at forensic detail) the keyframes.

Requires: Settings → Capture Animations = on (default).

5. Annotation Import / Export

These live in the Annotations list popover (the list icon in the toolbar). Add a couple of annotations, open the list, and try:

  • Export (outbound-arrow icon) — downloads a .clickly JSON file with every current annotation.
  • Import (upload-arrow icon) — pick a .clickly file; you'll get a preview banner with Merge vs Replace.

Try exporting from one browser and importing on another to hand off a review session.

6. URL Share

The chain-link icon in the Annotations list encodes every current annotation into the URL hash (?…#clickly=<base64>) and copies the whole URL to your clipboard. Paste it into any chat client — when the recipient opens it, Clickly decodes the payload, clears the hash, and shows an inline merge/replace banner.

  • Screenshots and strokes are stripped before encoding.
  • Warns above 8 KB, refuses above 16 KB. For larger payloads, use Export instead.