← Demo hub
Live annotations
Comprehensive annotation workflow: live scratch overlays, move-bound markup, edit drafts, and programmatic helpers with JSON inspectors.
How to test annotations (step-by-step)
This page has toolbar buttons and JSON panels on the right. For pure keyboard testing, useboard-navigation. Click the board first so shortcuts apply (active outline).
Two layers
- Live — scratch overlay. Hold Ctrl and draw. Stays on screen while you navigate until you save or clear.
- Move — tied to the selected move in the move list. Hold Shift and draw, or save live with Enter / Ctrl+S.
Shortcut reference
| Keys | What to expect |
|---|---|
| Ctrl hold + draw | Items appear under Live annotations JSON panel |
| Shift hold + draw | Items appear under Saved annotations for current move immediately |
| Enter / Ctrl+S | Live panel empties; move panel gains copies; event xq:annotation-saved |
| Ctrl+Escape | Live panel cleared; move panel unchanged |
| Ctrl+Backspace | Last item removed from whichever layer you were drawing on |
| Alt + click arrow | Arrow removed |
| Alt + right-click arrow | 4×2 color swatch picker; pick a color to recolor that arrow (live or Shift-drawn) |
| Escape | Cancels in-progress arrow only (not saved/live list) |
Test checklist
- Seed line — Click Seed sample line. Select a move in the move list (not move 0).
- Live draw — Hold Ctrl, drag an arrow on the board. Check Live annotations JSON updates. Press →: arrow still visible on other moves.
- Save — Press Enter. Live JSON is
[]; move JSON lists the arrow; move row shows annotation badge. - Shift draw — Hold Shift, add a square. Move JSON updates without using Save.
- Clear live — Ctrl + draw again, then Ctrl+Escape. Only live layer clears.
- Undo — Ctrl + draw twice, Ctrl+Backspace once: one arrow remains in live JSON.
- Toolbar edit-move — Start edit current move → change arrows → Apply edit (or Cancel to discard draft).
- Programmatic — Use Add arrow / Save live buttons; watch Event log for
xq:live-annotation-change,xq:annotation-saved,xq:annotation-clear.
Interaction controls
See the testing guide above for the full checklist. Tool: arrow = drag or two clicks; square = one click.
New arrows cycle through 8 colors automatically. Alt+right-click an arrow to pick a color.