Getting started

In a web application, first you need to create a container for the AnnotatedText component. This container will be used to render the component and its annotations.

Quick start

<div :id="id"></div>

Once the container is created and available in the DOM, you can create an instance of the AnnotatedText component with createAnnotatedText. By default the text will be rendered as PlainText, but you can also use an adapter to render the lines in another format.

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

const id = `annotated-text-{uuid}`;

const textAnnotation = createAnnotatedText(id)
  .setText(text)
  .setAnnotations(annotations);

Don't forget to replace do destroy the component when it is no longer needed to avoid memory leaks.

  textAnnotation.destroy();

Add the styling to your css

@import '@ghentcdh/annotated-text/annotated-text.css';

Example