There are several core concepts in marker.js that you need to be familiar with. Let's start with the top-level parts of the library and then drill down to the details.
There are three top-level parts of marker.js that you may use in your applications.
These parts are:
Markers ar the main building blocks of annotations. Think rectangles, arrows, text, etc. Markers define how those elements look and what styling options they have. Markers are used by all top-level parts of marker.js and comprise the bulk of the AnnotationState used to share and store annotations between components and annotation sessions.
As core parts of the whole marker.js universe markers naturally reside in the Core.
We go into more details on markers in a dedicated doc.
While Markers represent the look and feel of the annotation elements, Editors define their creation and editing experience.
In many cases, multiple marker types have identical sets of properties you can edit and the whole editing experience is identical, despite differences in rendering of such markers. For example, CoverMarker and EllipseMarker look very differently (one is a rectangle and the other one is round), but they share all the same properties (fill and stroke colors, stroke width, etc.) and are defined by the same characteristics (width and height of their bounding rectangle, and a rotation angle). So, naturally, they can be edited using exactly the same ShapeMarkerEditor.
Marker editors are only meaningful in the context of the MarkerArea so they live alongside it in the Editor module.
Click here to learn more about Editors.
Annotation state is what defines the annotation internally and is passed between the components. It's a simple JavaScript object, hence it can be serialized and stored anywhere you wish and then deserialized to further use with marker.js.
Its structure is defined by AnnotationState interface and consists of just some metadata and a list of markers.
To learn more about state, refer to the Saving state tutorial.