The viewer can be extended with functionality via extensions. The package already contains a few stock extensions that offer typical functionality.

Using our previous basic example, we can add the measurement tool for example

Advanced Setup JavaScript
import {
  Viewer,
  DefaultViewerParams,
  SpeckleLoader,
  UrlHelper,
  CameraController,
  MeasurementsExtension
} from "@speckle/viewer";


async function main() {
  /** Get the HTML container */
  const container = document.getElementById("speckle") as HTMLElement;

  /** Configure the viewer params */
  const params = DefaultViewerParams;
  params.verbose = true;

  /** Create Viewer instance */
  const viewer = new Viewer(container, params);
  /** Initialise the viewer */
  await viewer.init();

  /** Add the stock camera controller extension */
  viewer.createExtension(CameraController);
  /** Add mesurements extension */
  const measurements = viewer.createExtension(MeasurementsExtension);

  const urls = await UrlHelper.getResourceUrls(
    "https://app.speckle.systems/projects/7591c56179/models/32213f5381"
  );
  for (const url of urls) {
    const loader = new SpeckleLoader(viewer.getWorldTree(), url, "");
    /** Load the speckle data */
    await viewer.loadObject(loader, true);
  }

  measurements.enabled = true;
}

main();

You can run the live example here or below:

Measurement Tool Example

Adding more extensions is easy, and all you need to do is call the viewer’s createExtension function with the extension type you want to add.

Here is the complete list of available stock extensions:

ExtensionDescription
CameraControllerProvides basic camera orbit controls
SelectionExtensionSelection/hover effect, focus on objects
SectionToolAdds a customisable section box
SectionOutlinesAdds outlines to sectioned objects
MeasurementsExtensionProvides measurement functionality
FilteringExtensionFiltering functionality
DiffExtensionDiffing functionality

All the available stock extensions are designed to work together, in order to offer the complete set of viewer functionality. To see all of them in action, you can checkout our viewer-sandbox project, our speckle frontend. Alternatively, you can also run the viewer-sandbox here