Vertexvis · aeischeid · May 4, 2026 · Apr 27, 2026 · Apr 27, 2026 · Apr 28, 2026
@@ -52,6 +52,7 @@ jspm_packages/
 
 # Yarn Integrity file
 .yarn-integrity
+.yarn/install-state.gz
 
 # dotenv environment variables file
 .env
@@ -84,4 +85,4 @@ generated/
 # Ignore TSDoc directory
 docs/
 
-.tool-versions
+.tool-versions
@@ -3,7 +3,11 @@
 Examples default to loading resources from CDNs. To test or experiment with local resources instead:
 
 1. Open an example such as [pmi/index.html](./pmi/index.html).
-2. Change URLs that point to CDNs to point to local package assets instead. Most of these will be in the `<head>`, but some examples also import SDK modules directly from CDN URLs in `.js` files.
+2. Change URLs that point to CDNs to point to local package assets instead. Most of these will be in the `<head>`, but some examples also import SDK modules directly from CDN URLs in `.js` files. Here is an example of the tags to replace 
+``` html
+<link rel="stylesheet" href="/packages/viewer/dist/viewer/viewer.css" />
+<script type="module" src="/packages/viewer/dist/viewer/viewer.esm.js"></script>
+```
 3. Build a local package:
 
 ```sh

@@ -1,10 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" xml:lang="en">
   <head>
     <title>Align Two Surfaces</title>
 
     <script type="module" src="main.js"></script>
-
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer/viewer.css"
@@ -13,11 +12,6 @@
       type="module"
       src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer/viewer.esm.js"
     ></script>
-    <script
-      nomodule
-      src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer.js"
-    ></script>
-
     <style>
       html,
       body {

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" xml:lang="en">
   <head>
     <title>Camera Manipulations</title>
@@ -14,10 +14,6 @@
       type="module"
       src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer/viewer.esm.js"
     ></script>
-    <script
-      nomodule
-      src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer.js"
-    ></script>
   </head>
   <body>
     <div>

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" xml:lang="en">
   <head>
     <title>Custom Interactions</title>
@@ -14,10 +14,6 @@
       type="module"
       src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer/viewer.esm.js"
     ></script>
-    <script
-      nomodule
-      src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer.js"
-    ></script>
   </head>
   <body>
     <vertex-viewer id="viewer" class="viewer" camera-controls="false">

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html dir="ltr" lang="en">
   <head>
     <title>End Items</title>
@@ -13,10 +13,6 @@
       type="module"
       src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer/viewer.esm.js"
     ></script>
-    <script
-      nomodule
-      src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer.js"
-    ></script>
 
     <style>
       html,

@@ -2,15 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0"
-    />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Examples</title>
     <style>
       :root {
         color-scheme: light;
-        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+        font-family:
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          'Segoe UI',
           sans-serif;
       }
 
@@ -73,7 +74,7 @@
     <main>
       <div class="back"><a href="/">Back to root</a></div>
       <h1>Examples</h1>
-      <p>Browse the available SDK examples served by Vite.</p>
+      <p>Browse the available SDK examples</p>
       <div class="grid">
         <a href="/examples/align-two-surfaces/">
           <strong>Align Two Surfaces</strong>

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" xml:lang="en">
   <head>
     <title>Loading Models</title>
@@ -14,15 +14,17 @@
       type="module"
       src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer/viewer.esm.js"
     ></script>
-    <script
-      nomodule
-      src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer.js"
-    ></script>
   </head>
   <body>
-  <h1 class="heading">Instructions</h1>
-  This example uses url parameters to define the stream key. Therefore, update your url to http://localhost:8080/loading-models?streamkey=YOUR_STREAM_KEY to load a model.  For more information
-  on generating a stream key, see <a target="_blank" href="https://developer.vertexvis.com/docs/guides/authentication#viewer-component">Vertex's developer documentation</a>.
+    <h1 class="heading">Instructions</h1>
+    This example uses url parameters to define the stream key. Therefore, update
+    your url to http://localhost:8080/loading-models?streamkey=YOUR_STREAM_KEY
+    to load a model. For more information on generating a stream key, see
+    <a
+      target="_blank"
+      href="https://developer.vertexvis.com/docs/guides/authentication#viewer-component"
+      >Vertex's developer documentation</a
+    >.
     <vertex-viewer id="viewer" class="viewer">
       <vertex-viewer-toolbar data-viewer="viewer"></vertex-viewer-toolbar>
     </vertex-viewer>

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" xml:lang="en">
   <head>
     <title>Metadata Operations</title>
@@ -14,10 +14,6 @@
       type="module"
       src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer/viewer.esm.js"
     ></script>
-    <script
-      nomodule
-      src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer.js"
-    ></script>
   </head>
   <body>
     <vertex-viewer id="viewer" class="viewer">

@@ -1,10 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" xml:lang="en">
   <head>
     <title>Phantom Parts</title>
 
     <script type="module" src="main.js"></script>
-
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer/viewer.css"
@@ -13,11 +12,6 @@
       type="module"
       src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer/viewer.esm.js"
     ></script>
-    <script
-      nomodule
-      src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer.js"
-    ></script>
-
     <style>
       html,
       body {

@@ -1,10 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" xml:lang="en">
   <head>
     <title>Picking</title>
 
     <script type="module" src="main.js"></script>
-
     <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer/viewer.css"
@@ -13,10 +12,6 @@
       type="module"
       src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer/viewer.esm.js"
     ></script>
-    <script
-      nomodule
-      src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer.js"
-    ></script>
 
     <style>
       html,

@@ -12,15 +12,11 @@
     -->
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer/viewer.css"
+      href="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@1.0.0-testing.x/dist/viewer/viewer.css"
     />
     <script
       type="module"
-      src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer/viewer.esm.js"
-    ></script>
-    <script
-      nomodule
-      src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.24.x/dist/viewer.js"
+      src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@1.0.0-testing.x/dist/viewer/viewer.esm.js"
     ></script>
 
     <!--
@@ -33,7 +29,6 @@
       type="module"
       src="/packages/viewer/dist/viewer/viewer.esm.js"
     ></script>
-    <script nomodule src="/packages/viewer/dist/viewer.js"></script>
     -->
 
     <style>

@@ -1,71 +1,79 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" xml:lang="en">
+  <head>
+    <title>Scene Tree Columns</title>
 
-<head>
-  <title>Scene Tree Columns</title>
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+    <script type="module" src="main.js"></script>
 
-  <link rel="stylesheet" type="text/css" href="styles.css" />
-  <script type="module" src="main.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.23.6-canary.3/dist/viewer/viewer.css"
+    />
+    <script
+      type="module"
+      src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.23.6-canary.3/dist/viewer/viewer.esm.js"
+    ></script>
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.23.6-canary.3/dist/viewer/viewer.css" />
-  <script type="module"
-    src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.23.6-canary.3/dist/viewer/viewer.esm.js"></script>
-  <script nomodule src="https://cdn.jsdelivr.net/npm/@vertexvis/viewer@0.23.6-canary.3/dist/viewer.js"></script>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        font-family:
+          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+          Arial, sans-serif;
+      }
+    </style>
+  </head>
 
-  <style>
-    body {
-      margin: 0;
-      padding: 0;
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    }
-  </style>
-</head>
-
-<body class="app">
-  <div class="left-panel">
-    <div class="tree">
-
-      <vertex-scene-tree id="scene-tree" viewer-selector="#viewer">
-        <vertex-scene-tree-table-layout id="table-layout">
-          <vertex-scene-tree-table-column>
-            <template>
-              <vertex-scene-tree-table-cell prop:value="{{row.node.name}}" event:click="{{row.data.handleClick}}"
-                expand-toggle></vertex-scene-tree-table-cell>
-            </template>
-          </vertex-scene-tree-table-column>
-        </vertex-scene-tree-table-layout>
-      </vertex-scene-tree>
+  <body class="app">
+    <div class="left-panel">
+      <div class="tree">
+        <vertex-scene-tree id="scene-tree" viewer-selector="#viewer">
+          <vertex-scene-tree-table-layout id="table-layout">
+            <vertex-scene-tree-table-column>
+              <template>
+                <vertex-scene-tree-table-cell
+                  prop:value="{{row.node.name}}"
+                  event:click="{{row.data.handleClick}}"
+                  expand-toggle
+                ></vertex-scene-tree-table-cell>
+              </template>
+            </vertex-scene-tree-table-column>
+          </vertex-scene-tree-table-layout>
+        </vertex-scene-tree>
+      </div>
     </div>
-  </div>
 
-  <div class="center-panel">
-    <vertex-viewer id="viewer" class="viewer">
-      <vertex-viewer-toolbar data-viewer="viewer">
-      </vertex-viewer-toolbar>
-      <div class="viewer-overlay">
-        <button id="expand-all-btn" class="overlay-button">Expand All</button>
-        <button id="collapse-all-btn" class="overlay-button">Collapse All</button>
-        <button id="search-metadata-btn" class="overlay-button search-button">Search Metadata</button>
-      </div>
-    </vertex-viewer>
+    <div class="center-panel">
+      <vertex-viewer id="viewer" class="viewer">
+        <vertex-viewer-toolbar data-viewer="viewer"> </vertex-viewer-toolbar>
+        <div class="viewer-overlay">
+          <button id="expand-all-btn" class="overlay-button">Expand All</button>
+          <button id="collapse-all-btn" class="overlay-button">
+            Collapse All
+          </button>
+          <button id="search-metadata-btn" class="overlay-button search-button">
+            Search Metadata
+          </button>
+        </div>
+      </vertex-viewer>
 
-    <div class="selection-panel">
-      <div class="selection-header">
-        <h4>Selected Item</h4>
-      </div>
-      <div id="selection-content" class="selection-content">
-        <p>No item selected</p>
+      <div class="selection-panel">
+        <div class="selection-header">
+          <h4>Selected Item</h4>
+        </div>
+        <div id="selection-content" class="selection-content">
+          <p>No item selected</p>
+        </div>
       </div>
     </div>
-  </div>
 
-  <div class="available-columns">
-    <div class="available-columns-header">
-      <h4>Confugre Columns For Tree</h4>
-    </div>
-    <div class="available-columns-body">
+    <div class="available-columns">
+      <div class="available-columns-header">
+        <h4>Confugre Columns For Tree</h4>
+      </div>
+      <div class="available-columns-body"></div>
     </div>
-  </div>
-</body>
-
-</html>
+  </body>
+</html>