Markup Basics

Markup manager overview

The viewer.markupManager class facilitates interactions with markup in the viewer. This includes serialization for export and import, as well as adding and deleting markup items. Markup views, notes, measurements, and lines get serialized by default, but it is also possible to include a custom markup type that will have its data included along with the default markup JSON object.

To serialize the markup for export, we will create a JSON object with all the data from the markup in the scene using the exportMarkup() function.

    const markupData = JSON.stringify(viewer.markupManager.exportMarkup());

To load the markup data again, we will use the loadMarkupData function.


Markup types


Redline markup is 2D markup that is drawn in an SVG layer on top of the canvas. It depends on the camera to display correctly, and it will be hidden if the camera changes. There are four types of redline items:

  • Circle

  • Rectangle

  • Polyline

  • Text


Redline markup type

Note pins

Note pins are attached to a position on the model. 3D geometry is drawn in the scene to represent the ‘pin’ on the model (a line drawn at the normal to the part, and a sphere drawn at the end of the line for the head of the pin). The geometry size is not camera dependent, and it will not scale with the model. A 2D HTML div is displayed on top of the canvas; this div moves when the camera changes to stay fixed to the pin’s position. This div allows changing the color of the pin, deleting the pin, or editing the text associated with the pin.


Note pins markup type


Measurement markup is 3D markup, drawn in an SVG layer on top of the canvas. When the camera changes, the markup is updated so that it scales and rotates with the camera.

  • Face-angle markup measures the angle between two faces.

  • Face-distance markup measures the distance between two faces.

  • Length markup measures the length of an edge.

  • Point-distance markup measures the distance between two points.


Measurement markup type


Line markup is 3D geometry that is drawn in the scene. It contains a start point and end point which can each be associated with a node ID.


Line markup type

Redline operators

The redline operators create redline markup in the scene. If a redline item is created and there is no active markup view, an active view is created. If a redline item is created when there is already an active view, the redline item is added to the view.

Each redline markup item has a corresponding operator that handles creation of the item and adding it to the view.

  • Circle operator

  • Rectangle operator

  • Polyline operator

  • Text operator

Markup views


Markup View recreating an exploded state

A markup view contains data that can recreate a state in the viewer. The data may contain the following:

  • Camera

  • Sheet ID (If the model is a drawing with sheets)

  • Exploding magnitude

  • Line visibility

  • Face visibility

  • Markup items

  • Node ID color map

  • Snapshot image

The markupManager can be used to create a new view which stores the model state.

    const uniqueId = viewer.markupManager.createMarkupView("Markup View");

At the time the view is created, the model state is saved. Additional data can be added or changed after the markup view is created. The camera and sheet id cannot be changed once a view is created.

When a view is activated, the stored model state is recreated in the scene.