This feature requires a Pro or Agency license.
ProAgency

Visual Annotations (Pro)

Drawing annotations let you highlight specific areas of a page visually. Circle a misaligned element, draw an arrow to a problem area, or sketch freehand notes directly on top of the design.

This feature is available on Pro ($79/yr) and Agency ($199/yr) plans.

Three Drawing Tools

NotedWP provides three annotation types:

Rectangle

Press R or select the rectangle tool from the toolbar. Click and drag to draw a box around the area you want to highlight. Rectangles must be at least 10×10 pixels.

Arrow

Press A or select the arrow tool. Click and drag to draw a directional arrow pointing at the element you want to call out. Arrows must be at least 15 pixels long.

Freehand

Press F or select the freehand tool. Click and drag to draw freely on the page. Use this for circling elements, underlining text, or sketching quick visual notes.

How to Draw

  1. Select a drawing tool from the toolbar (or use the keyboard shortcut).
  2. Click and hold on the page where you want to start.
  3. Drag to create the annotation.
  4. Release to finish drawing.

After you release, a pin is created automatically at the annotation location. The pin popover opens so you can type feedback to accompany the drawing.

Choosing a Color

Each annotation has a color. Click the color picker next to the drawing tools to choose from four options:

  • Amber (#F5A623)
  • Blue (#4D8EF7)
  • Yellow (#E6B840)
  • Red (#EF5350)

The color applies to the annotation outline or stroke. Pick a color that contrasts with the page content for visibility.

How Annotations Are Stored

Annotations are drawn on an SVG canvas that overlays the page. Each annotation saves its type, color, viewport width, breakpoint, and coordinate data. Because they are stored as SVG data, annotations render crisply at any zoom level.

Annotations and Breakpoints

Drawing tools are available in fixed (1440px), tablet (768px), and mobile (375px) breakpoints. They are not available in the desktop responsive breakpoint because the variable viewport width would cause annotations to shift unpredictably.

Each annotation is tied to the breakpoint where you created it and only appears when viewing that breakpoint.

Deleting Annotations

To remove an annotation, open the associated pin and delete it. The annotation drawing is removed along with the pin and its comments.

Next Steps