Annotate

The Annotate component (ui:annotate) renders a text area with highlight annotations. Users can select text and assign labels to create new annotations.

Examples

View Glyph Markdown source

```ui:annotate
title: Code Review
labels:
  - name: Bug
    color: "#dc2626"
  - name: Unclear
    color: "#f59e0b"
  - name: Good
    color: "#16a34a"
text: |
  function processData(input) {
    var result = input.split(',');
    eval(result[0]);
    return result;
  }
annotations:
  - start: 62
    end: 78
    label: Bug
    note: eval() is dangerous
```

Prose text

Properties

Property	Type	Required	Default	Description
title	string	No	—	Optional heading.
labels	AnnotateLabel[]	Yes	—	Available label categories.
text	string	Yes	—	The text content to annotate.
annotations	Annotation[]	No	[]	Pre-existing annotations.
markdown	boolean	No	false	Enable inline markdown formatting (bold, italic, links, code) in text fields.

AnnotateLabel

Property	Type	Required	Description
name	string	Yes	Label name.
color	string	Yes	CSS color for the label.

Annotation

Property	Type	Required	Description
start	number	Yes	Start character offset.
end	number	Yes	End character offset.
label	string	Yes	Label name.
note	string	No	Annotation note.

Markdown Support

Enable inline markdown formatting in annotation notes:

View Glyph Markdown source

```ui:annotate
title: Code Review
labels:
  - name: Bug
    color: "#dc2626"
  - name: Unclear
    color: "#f59e0b"
  - name: Good
    color: "#16a34a"
text: |
  function processData(input) {
    var result = input.split(',');
    eval(result[0]);
    return result;
  }
annotations:
  - start: 62
    end: 78
    label: Bug
    note: "**eval()** is dangerous. See [MDN security docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval#never_use_eval!)."
  - start: 28
    end: 31
    label: Unclear
    note: "Use `let` or `const` instead of *var*"
markdown: true
```

Supported formatting: bold, italic, code, links

Learn more about markdown in components →

Interaction events

Event kind: annotate-create

Payload field	Type	Description
start	number	Start offset.
end	number	End offset.
selectedText	string	The annotated text.
label	string	Assigned label.
allAnnotations	Array<{ start, end, text, label }>	Full annotations state.

Accessibility

• Text area uses role="document".
• Annotations rendered as <mark> elements.
• Label picker uses role="menu" with role="menuitem".
• Sidebar uses role="complementary" with a role="list" for annotations.