Annotation Rendering

The annotated-text library supports different render types for annotations, allowing you to visually distinguish annotations using highlights, underlines, gutter markers, and custom renderers.

Overview

Annotation rendering lets you:

• Apply different visual styles to annotations (highlight, underline, gutter)
• Dynamically assign render types using a renderFn
• Use built-in renderers or create custom ones
• Register single renderers or multiple renderers at once
• By default following renderers are available:
  • highlight: Default renderer that highlights text
  • underline: Underlines the annotated text
  • gutter: Displays annotation markers in the gutter/margin

Example with default renderers

Configuration

Render Function

The renderFn configuration option determines which renderer to use for each annotation. It receives an annotation and returns a string that corresponds to a registered renderer.

createAnnotatedText(containerId, {
  annotation: {
    render: {
      renderFn: (annotation) => annotation.target,
    },
  },
});

The function can implement any logic to determine the render type:

renderFn: (annotation) => {
  if (annotation.type === 'entity') return 'highlight';
  if (annotation.type === 'relation') return 'underline';
  return 'gutter';
}

Built-in Renderers

The library provides three built-in renderers:

Renderer	Render Key	Description
HighlightAnnotationRender	highlight	Renders a background highlight behind the text
UnderLineAnnotationRender	underline	Renders a line beneath the text
GutterAnnotationRender	gutter	Renders a marker in the gutter area beside the text

Importing Built-in Renderers

import {
  HighlightAnnotationRender,
  UnderLineAnnotationRender,
  GutterAnnotationRender,
} from "@ghentcdh/annotated-text";

Registering Renderers

Single Renderer Registration

Use registerRender to register a single renderer:

import { createAnnotatedText, HighlightAnnotationRender } from "@ghentcdh/annotated-text";

createAnnotatedText(containerId, config)
  .registerRender(new HighlightAnnotationRender());

Multiple Renderer Registration

Use registerRenders to register multiple renderers at once:

import {
  createAnnotatedText,
  GutterAnnotationRender,
  UnderLineAnnotationRender,
} from "@ghentcdh/annotated-text";

createAnnotatedText(containerId, config)
  .registerRenders(
    new GutterAnnotationRender(),
    new UnderLineAnnotationRender(),
  );

Chaining Registrations

Both methods return the annotated text instance, allowing you to chain calls:

createAnnotatedText(containerId, config)
  .registerRender(new HighlightAnnotationRender())
  .registerRenders(
    new GutterAnnotationRender(),
    new UnderLineAnnotationRender(),
  )
  .setText(text)
  .setAnnotations(annotations);

Full Example with defaults

Default display renderer (highlight)

Underline display renderer