1 of 13

DOMAnnotations

Nick Stenning, Hypothesis Project

2 of 13

What is the smallest useful low-level component in a client-side API for annotation?

3 of 13

Document

Annotation application

Annotation application

Annotation application

4 of 13

Annotations

Document

Annotation application

Annotation application

Annotation application

5 of 13

How can I attach annotations to parts of the DOM?

How can I retrieve annotations associated with parts of the DOM?

How can I be notified when annotations are attached/changed/removed?

6 of 13

DOMAnnotations

What would such an API might look like as part of a browser?

A “straw man” proposal. Pick holes in it.

https://github.com/nickstenning/domannotations

7 of 13

document.createAnnotation()

document.getAnnotations(nodes)

document.removeAnnotation(annotation)

8 of 13

Annotation#addTarget(target)

Annotation#addBody(body)

9 of 13

DOM Events

annotationcreate

annotationchange

annotationremove

10 of 13

DEMO

11 of 13

Not intended to help you with storage/persistence/retrieval.

Not intended to help you with fuzzy anchoring.

Not necessarily intended to help you with serialization.

A reflection of document-annotation state.

12 of 13

Questions for you

  • Should this imitate other DOM APIs? (document.createAnnotation)
  • “Reified state” — is this ok?
  • How does serialisation work?
  • Bulk?
  • Events vs. mutation observers?

13 of 13

DOMAnnotations

https://github.com/nickstenning/domannotations

@nickstenning

Hypothesis Project