Annotation editor - Snipdeck Docs

The annotation editor lets you mark up a snip with freehand strokes, shapes, arrows, and text before you save, copy, or share it. It is a focused, Telegram-style editor that opens on top of your snips, and because the live preview and the saved file are produced by the same code, what you see on screen is exactly what you get in the final image.

Opening the editor

Right-click any floating snip or any gallery thumbnail and choose Annotate. A dedicated editor window opens, centred on the monitor under your cursor.

The editor is always-on-top and sits above the floating snips, so it never disappears behind the very snip you are annotating. The snip fills a working canvas in the middle of the window, framed by two floating rounded “pills”: a tool pill across the top and an action pill across the bottom.

Note: The snip opens at its natural size when it fits, and large snips shrink to fit the canvas without being upscaled. Use the zoom control to magnify for precise work — the editor never opens magnified.

Tools

The top pill holds the seven drawing tools. Click one to select it; the active tool is highlighted.

Tool	What it draws
Pen	A freehand line that follows your pointer
Highlighter	A fat, translucent freehand stroke for emphasis
Rectangle	An outlined rectangle from corner to corner
Ellipse	An outlined ellipse inside the box you drag
Line	A straight line between two points
Arrow	A straight line with an arrowhead at the end point
Text	A typed text label placed where you click

For the pen and highlighter, draw by pressing and dragging across the canvas. For the rectangle, ellipse, line, and arrow, press where you want the shape to start and drag to the opposite corner or end point; the shape updates live as you move. Stray clicks that do not produce a meaningful shape are discarded automatically.

Adding text

Select the Text tool (the A button), then click where you want the text to begin. A caret appears in the active color at that spot — type your label and press Enter to commit it. Switching to another tool before you commit abandons the text.

Tip: Text is rendered with a bold system UI font (Segoe UI, falling back to Arial, Tahoma, or Verdana) and baked into the image at full resolution on Save.

Color: the HSV wheel

Click the color chip at the right end of the top pill to open the color panel. It floats just under the pill and gives you any color, not a fixed palette.

HSV color wheel — hue runs around the wheel and saturation runs from the centre (grey) outward to the rim (fully saturated). Click or drag anywhere on the wheel to pick a hue and saturation; a selector ring shows the current pick.
Brightness slider — the slider below the wheel (marked with a sun icon) sets the HSV value, from 0 (black) to full brightness.

The color chip and the text caret update immediately to reflect your choice. Clicking on the canvas closes the wheel panel.

Size and opacity

The bottom pill carries a size slider (pencil icon) and an opacity slider, each with a numeric readout.

Control	Range	Notes
Size	`1px` – `64px`	Stroke width in on-screen pixels
Opacity	`10%` – `100%`	How transparent the stroke is

Both settings are remembered per tool, so each tool keeps its own feel as you switch between them. The defaults are tuned for each tool:

Tool	Default size	Default opacity
Pen	`4px`	`100%`
Highlighter	`22px`	`40%`
Rectangle	`4px`	`100%`
Ellipse	`4px`	`100%`
Line	`4px`	`100%`
Arrow	`4px`	`100%`

Note: Size is stored relative to the snip’s true pixels, not the zoom level. Zooming changes only the on-screen magnification — a stroke keeps the same real thickness in the saved image no matter how far you are zoomed in.

Size preview

While you drag the size or opacity slider, a dot blinks in the centre of the image at the current size, color, and opacity. The blink (about 4 Hz) makes it easy to judge the brush against the underlying snip before you commit to a stroke. The preview disappears as soon as you release the slider.

Zoom and panning

The zoom control floats in the bottom-right corner of the canvas, clear of the pills.

Control	Action
Minus button	Zoom out (× 0.8 per click)
Percentage label	Click to fit — reset to the default fit zoom
Plus button	Zoom in (× 1.25 per click)

Zoom is clamped between 0.2× and 6× of the fit scale. The percentage label shows the effective size against the snip’s native pixels — so a large snip that was shrunk to fit might read 48%, while a snip opened at 1:1 reads 100%. When you zoom in past the canvas size, the canvas pans: scroll to reach any part of the image.

Undo, redo, and clear

Every committed shape is tracked, so you can step back and forth freely.

Action	Where	Shortcut
Undo	The undo button (top-left of the tool pill)	`Ctrl`+`Z`
Redo	The redo button (after the tools)	`Ctrl`+`Y`
Cancel / discard	The Cancel button	`Esc`

Undo and redo cover drawing, text, and clear (removing every shape at once is itself undoable). The keyboard shortcuts are active whenever you are not typing into a text label.

Warning: Cancel, Esc, and closing the editor with its window frame all discard your annotations. Nothing is written back to the snip unless you choose Save.

Saving: full-resolution flatten

Click Save to bake your annotations onto the snip. The strokes are flattened onto the image at full resolution — vectors are rasterized with tiny-skia and text is rendered with ab_glyph, both at the snip’s native pixel size, regardless of the zoom you used while drawing.

The flattened image replaces the snip exactly the way a crop does: the floating window and the gallery thumbnail both update to the marked-up version.

Because the on-screen preview and the saved output run through the same geometry and color code, the result is pixel-faithful — what you see is what you get.

Keyboard shortcuts

Key	Action
`Esc`	Cancel and discard
`Ctrl`+`Z`	Undo
`Ctrl`+`Y`	Redo
`Enter`	Commit the text label you are typing