Skip to main content
The first thing you’ll need is a container for the viewer and a javascript/typescript script which will run the viewer code. We’ll create a simple HTML and a simple typescript file
Basic Setup HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>

  <body>
    <div id="speckle" style="position:absolute;inset:0" />

    <script src="src/index.ts"></script>
  </body>
</html>
Now save this HTML snippet as index.html Next we’ll create the typescript file:
Basic Setup JavaScript
import {
  Viewer,
  DefaultViewerParams,
  SpeckleLoader,
  UrlHelper,
} from "@speckle/viewer";
import { CameraController, SelectionExtension } from "@speckle/viewer";

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

  /** Configure the viewer params */
  const params = DefaultViewerParams;
  params.showStats = true;
  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 the selection extension for extra interactivity */
  viewer.createExtension(SelectionExtension);

  /** Create a loader for the speckle stream */
  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);
  }
}

main();
Now save this typescript snippet asindex.ts You can run the live example here or below:

Basic Setup Example