CDN

The @neongate-ai/orbz/standalone entry is a self-contained ES module for pages that do not use a package manager or bundler. It registers <orb-z> as a side effect and includes the same native component API as /browser.

Release note: the repository declares version 0.2.0, but the URLs on this page will work only after 0.2.0 is published to npm. Until then, use the source workspace or an installed version whose API matches your code.

jsDelivr


<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@neongate-ai/orbz@0.2.0/dist/standalone/orbz.js"
></script>

unpkg


<script
  type="module"
  src="https://unpkg.com/@neongate-ai/orbz@0.2.0/dist/standalone/orbz.js"
></script>

The package manifest exposes the same file through its unpkg and jsdelivr metadata. The explicit file URL above makes the artifact and version obvious.

Complete page

index.html


<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Orbz voice assistant</title>
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@neongate-ai/orbz@0.2.0/dist/standalone/orbz.js"
    ></script>
  </head>
  <body>
    <main>
      <div role="status" aria-live="polite">
        <orb-z
          state="idle"
          size="300px"
          speed="1"
          preset="neongate"
          reduced-motion="system"
          elevated
        ></orb-z>
        <p id="assistant-status">Assistant is idle</p>
      </div>
 
      <button id="listen" type="button">Listen</button>
    </main>
 
    <script type="module">
      await customElements.whenDefined("orb-z");
 
      const orb = document.querySelector("orb-z");
      const status = document.querySelector("#assistant-status");
      const listen = document.querySelector("#listen");
 
      listen?.addEventListener("click", () => {
        if (orb) orb.state = "listening";
        if (status) status.textContent = "Assistant is listening";
      });
    </script>
  </body>
</html>

Browsers upgrade the existing tag when the module finishes loading. Awaiting customElements.whenDefined("orb-z") is useful only when code must call Orbz properties or methods immediately.

Pin the version

Use an exact package version in production:


@neongate-ai/orbz@0.2.0

Avoid an unversioned URL or a moving latest tag. Pinning keeps the component contract and visual output stable across deployments. Update the version deliberately after reading the changelog.

When to prefer npm

Use the CDN build for a standalone page, an embed, a prototype, or a microfrontend that intentionally owns its browser dependency. Prefer the npm entry points when a build system should deduplicate dependencies, type-check configuration, or lock the full dependency graph.