Recogito Text Annotator Demos

Download Back To CSSScript.Com

Turn static page content into an annotation workspace. Recogito Text Annotator handles selection, highlights, undo, and custom data models.

Vanilla JS ready No build step CDN modules

Core Annotator

Select text, manage ranges, and inspect events.

Drag across the document to create a new annotation. Use the controls to switch modes, change styling, filter highlights, select ranges, and serialize the current W3C-compatible data.

Field Notes From an Archive Review

The conservation team compared brittle paper records with the scanned catalogue and marked every phrase that needed a second reading. Several notes carried uncertain dates, while others used spelling that changed between ledgers.

Each reviewer added short comments for passages that referenced a shipment, a family name, or an earlier repair. The final review preserved the original wording and attached modern context only where the evidence was strong.

This paragraph is excluded from annotation so the demo can show non-annotatable content inside the same document.

During the second pass, overlapping annotations helped separate names, places, and dates inside a single sentence. The team could keep one broad highlight for the whole claim and narrower highlights for the details inside it.

Plugin Renderers

Overlaps, inline markers, and presence.

This section mounts the optional Vanilla JS plugins when their CDN packages are available. The marker renderer groups stacked ranges, and the presence layer paints a collaborator selection above the text.

Inline Markers

Click marked ranges to inspect grouped annotations at the same position.

Dense Review Passage

The review flagged shipping ledgers, damaged margins, and handwritten initials as separate evidence types inside one sentence.

Loading marker renderer...

Presence Layer

Simulate a remote editor selecting one of the current annotations.

Shared Review Passage

Remote review makes the selected text visible to other editors while each annotation keeps its own author and range data.

Loading presence layer...

Data Model

Live annotation output.

The output updates from the active demo state and reflects range selectors, bodies, users, and timestamps.

Waiting for annotator...