Annotation Renderers

Renderers control how annotations are visually displayed on text. The library includes three built-in renderers: highlight (background color), underline (decorative line beneath text) and gutter (a box in the gutter).

Setting the Default Renderer

Configure the default renderer when creating the annotated text instance:

createAnnotatedText(id, {
  annotation: {
    defaultRender: 'underline', // or 'highlight'
  },
});

Assigning a Renderer to an Annotation

Each annotation can specify its own renderer:

annotation.render = DefaultRenders.highlight;
annotation.render = DefaultRenders.underline;

Custom Renderer Variants

Create variants of the built-in renderers with different visual styles:

const thinUnderline = new UnderlineRender('underline-thin', {
  borderWidth: 1
});

const thickUnderline = new UnderlineRender('underline-thick', {
  borderWidth: 5
});

manager.registerRender(thinUnderline);
manager.registerRender(thickUnderline);

Once registered, assign custom renderers by name:

annotation.render = 'underline-thin';

Example

Default display renderer (highlight)

Underline display renderer

Thick line renderer

Thin line renderer