react-native-model-viewer-webview 0.1.0 → 0.2.1

package/CHANGELOG.md

@@ -5,6 +5,51 @@ All notable changes to this package should be documented here.
 This project uses semantic versioning. Versions below `1.0.0` may still change
 minor APIs when the release notes call it out clearly.
 
+## 0.2.1 - 2026-06-30
+
+This is a docs and confidence release. There are no runtime API changes.
+
+### Documentation
+
+- Add Android Expo Go smoke-test notes for remote GLB loading and local GLB
+  loading.
+- Document the local Expo asset path that worked in testing: resolve the
+  bundled `.glb`, read it as base64, and pass a
+  `data:model/gltf-binary;base64,...` URI to `ModelViewerWebView`.
+- Call out that direct Android WebView loading from a local `file:` GLB URI was
+  not reliable in this smoke test.
+- Add a verified smoke-test table to the README and compatibility docs, with
+  iOS WKWebView still marked as not yet tested.
+- Add the Android local-GLB screenshot and compatibility section to the public
+  docs site.
+
+### Maintenance
+
+- Update docs-site tests so the new local-GLB guidance and smoke-test evidence
+  stay present.
+
+## 0.2.0 - 2026-06-02
+
+### Added
+
+- Bundle `@google/model-viewer` 4.2.0 inside the package so the default WebView
+  runtime no longer needs a CDN request.
+- Add third-party notice and Apache-2.0 license metadata for the vendored
+  `@google/model-viewer` runtime.
+- Export `BUNDLED_MODEL_VIEWER_VERSION` so consumers can inspect the embedded
+  runtime version.
+- Export `MODEL_VIEWER_CDN_SCRIPT_URL` for apps that explicitly opt back into
+  the Google CDN runtime.
+
+### Changed
+
+- Make generated model-viewer HTML offline-first by inlining the bundled
+  runtime by default.
+- Keep `modelViewerScriptUrl` and `modelViewerScript` as explicit overrides for
+  custom CDN, local file, or app-bundled script loading.
+- Keep `DEFAULT_MODEL_VIEWER_SCRIPT_URL` as a compatibility alias for
+  `MODEL_VIEWER_CDN_SCRIPT_URL`.
+
 ## 0.1.0 - 2026-05-31
 
 Initial public release of `react-native-model-viewer-webview`.

package/README.md

@@ -122,6 +122,31 @@ await carModel.downloadAsync();
 `localUri` is preferred over `uri` when both exist. `modelUri` is still accepted
 as a string-only compatibility prop.
 
+For Android Expo Go, direct `file:` loading from WebView can be unreliable. The
+verified local-asset path is to read the Expo asset as base64 and pass a GLB
+data URI:
+
+```tsx
+import { Asset } from "expo-asset";
+import * as FileSystem from "expo-file-system/legacy";
+import { ModelViewerWebView } from "react-native-model-viewer-webview";
+
+const model = Asset.fromModule(require("./assets/model.glb"));
+await model.downloadAsync();
+
+const localUri = model.localUri ?? model.uri;
+const base64 = await FileSystem.readAsStringAsync(localUri, {
+  encoding: FileSystem.EncodingType.Base64,
+});
+const modelSource = `data:model/gltf-binary;base64,${base64}`;
+
+<ModelViewerWebView modelSource={modelSource} style={{ height: 320 }} />;
+```
+
+This data-URI path was smoke-tested on Android Expo Go with a local Khronos
+`Box.glb` asset. Use `file:` URIs only after testing them on your target
+WebView/device matrix.
+
 ## Metro Setup For Local GLB Files
 
 If your app imports `.glb` files, add `glb` to Metro's asset extensions.
@@ -160,17 +185,27 @@ from Metro's file map.
 
 ## Offline Script Loading
 
-By default, the generated WebView HTML loads `<model-viewer>` from Google's CDN.
-That keeps the package tiny, but it means the viewer needs network access the
-first time the WebView loads.
+By default, the generated WebView HTML inlines a vendored copy of
+`@google/model-viewer` 4.2.0. That means the viewer runtime does not need a CDN
+request, and local `.glb` previews can work offline when the model asset is also
+available locally.
 
-For offline apps, pass your own script URL:
+This makes the npm package larger, but keeps runtime behavior deterministic and
+offline-friendly. The Apache-2.0 license for the bundled runtime is included in
+[`vendor/model-viewer/LICENSE`](./vendor/model-viewer/LICENSE), with a summary in
+[`THIRD_PARTY_NOTICES.md`](./THIRD_PARTY_NOTICES.md). The exact source package,
+file hash, and generated runtime details are recorded in
+[`vendor/model-viewer/SOURCE.md`](./vendor/model-viewer/SOURCE.md).
+
+If you prefer a custom or CDN-hosted runtime, pass your own script URL:
 
 ```tsx
+import { MODEL_VIEWER_CDN_SCRIPT_URL } from "react-native-model-viewer-webview";
+
 <ModelViewerWebView
-  modelSource={require("./assets/car.glb")}
+  modelSource="https://example.com/car.glb"
   htmlOptions={{
-    modelViewerScriptUrl: "file:///path/to/model-viewer.min.js",
+    modelViewerScriptUrl: MODEL_VIEWER_CDN_SCRIPT_URL,
   }}
 />
 ```
@@ -186,6 +221,15 @@ Or pass an inline module script if your build already bundles the source:
 />
 ```
 
+## Verified Smoke Tests
+
+| Platform | App runtime | Model source | Result |
+| --- | --- | --- | --- |
+| Android 16 physical device | Expo Go, Expo SDK 56 tester app | Remote GLB URL | Verified |
+| Android 16 physical device | Expo Go, Expo SDK 56 tester app | Local Khronos `Box.glb` as `data:model/gltf-binary;base64,...` | Verified |
+| Android 16 physical device | Expo Go, Expo SDK 56 tester app | Local Khronos `Box.glb` as direct `file:` URI | Not reliable in this smoke test |
+| iOS WKWebView | Not yet tested | Any model source | Not yet verified |
+
 ## Props
 
 `ModelViewerWebView` accepts all `react-native-webview` props except `source` and
@@ -215,8 +259,8 @@ Useful `htmlOptions`:
 | `exposure` / `shadowIntensity` | Basic visual tuning. |
 | `backgroundColor` / `posterColor` | Controls the WebView and poster background. |
 | `additionalAttributes` | Adds extra `<model-viewer>` attributes. |
-| `modelViewerScriptUrl` | Loads a custom `<model-viewer>` script URL. |
-| `modelViewerScript` | Inlines a custom module script. |
+| `modelViewerScriptUrl` | Overrides the bundled runtime with a custom `<model-viewer>` script URL. |
+| `modelViewerScript` | Overrides the bundled runtime with a custom inline module script. |
 
 ## Example
 

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,24 @@
+# Third-Party Notices
+
+This package includes a vendored copy of `@google/model-viewer` so the default
+viewer runtime can load offline inside React Native WebView.
+
+## @google/model-viewer
+
+- Version: `4.2.0`
+- Source: <https://www.npmjs.com/package/@google/model-viewer/v/4.2.0>
+- Repository: <https://github.com/google/model-viewer>
+- License: Apache-2.0
+
+The Apache-2.0 license text is included at:
+
+```text
+vendor/model-viewer/LICENSE
+```
+
+The generated runtime and source verification details are included at:
+
+```text
+vendor/model-viewer/runtime.js
+vendor/model-viewer/SOURCE.md
+```

package/agent-skills/react-native-model-viewer-webview/SKILL.md

@@ -96,7 +96,9 @@ await model.downloadAsync();
 
 ## Offline Apps
 
-By default, `<model-viewer>` loads from Google's CDN. For offline apps, use:
+By default, the package inlines its bundled `@google/model-viewer` runtime, so
+local model assets can render without a CDN request. If the user wants to provide
+a custom runtime, use:
 
 ```tsx
 <ModelViewerWebView

package/agent-skills/react-native-model-viewer-webview/references/api.md

@@ -64,10 +64,14 @@ type ModelViewerHtmlOptions = {
 ```
 
 Consumers pass `htmlOptions` without `modelUri`; the component injects it.
+The package inlines bundled `@google/model-viewer` 4.2.0 by default.
+`modelViewerScriptUrl` and `modelViewerScript` override that bundled runtime.
 
 ## Utility Functions
 
 ```ts
+BUNDLED_MODEL_VIEWER_VERSION
+MODEL_VIEWER_CDN_SCRIPT_URL
 buildModelViewerHtml(options)
 parseModelViewerMessage(data)
 isModelViewerErrorStatus(status)

package/dist/index.d.ts

@@ -3,9 +3,11 @@ export {
   type ModelViewerWebViewProps,
 } from "./ModelViewerWebView";
 export {
+  BUNDLED_MODEL_VIEWER_VERSION,
   buildModelViewerHtml,
   DEFAULT_MODEL_VIEWER_SCRIPT_URL,
   isModelViewerErrorStatus,
+  MODEL_VIEWER_CDN_SCRIPT_URL,
   MODEL_VIEWER_DOM_READY_EVENT,
   MODEL_VIEWER_LOADED_EVENT,
   MODEL_VIEWER_MODEL_ERROR_EVENT,

package/dist/model-viewer-html.d.ts

@@ -1,4 +1,6 @@
+export declare const MODEL_VIEWER_CDN_SCRIPT_URL = "https://ajax.googleapis.com/ajax/libs/model-viewer/4.2.0/model-viewer.min.js";
 export declare const DEFAULT_MODEL_VIEWER_SCRIPT_URL = "https://ajax.googleapis.com/ajax/libs/model-viewer/4.2.0/model-viewer.min.js";
+export { BUNDLED_MODEL_VIEWER_VERSION } from "../vendor/model-viewer/runtime";
 export declare const MODEL_VIEWER_DOM_READY_EVENT = "dom-ready";
 export declare const MODEL_VIEWER_LOADED_EVENT = "model-loaded";
 export declare const MODEL_VIEWER_MODEL_ERROR_EVENT = "model-error";

package/dist/model-viewer-html.js

@@ -1,5 +1,11 @@
-const DEFAULT_MODEL_VIEWER_SCRIPT_URL =
+const {
+  BUNDLED_MODEL_VIEWER_SCRIPT,
+  BUNDLED_MODEL_VIEWER_VERSION,
+} = require("../vendor/model-viewer/runtime");
+
+const MODEL_VIEWER_CDN_SCRIPT_URL =
   "https://ajax.googleapis.com/ajax/libs/model-viewer/4.2.0/model-viewer.min.js";
+const DEFAULT_MODEL_VIEWER_SCRIPT_URL = MODEL_VIEWER_CDN_SCRIPT_URL;
 
 const MODEL_VIEWER_DOM_READY_EVENT = "dom-ready";
 const MODEL_VIEWER_LOADED_EVENT = "model-loaded";
@@ -133,8 +139,11 @@ function getModelViewerScriptTag(options) {
     return `<script type="module">${escapeScriptContent(options.modelViewerScript)}</script>`;
   }
 
-  const scriptUrl = options.modelViewerScriptUrl ?? DEFAULT_MODEL_VIEWER_SCRIPT_URL;
-  return `<script type="module" src="${escapeHtmlAttribute(scriptUrl)}"></script>`;
+  if (options.modelViewerScriptUrl) {
+    return `<script type="module" src="${escapeHtmlAttribute(options.modelViewerScriptUrl)}"></script>`;
+  }
+
+  return `<script type="module">/* @google/model-viewer ${BUNDLED_MODEL_VIEWER_VERSION} bundled runtime */\n${escapeScriptContent(BUNDLED_MODEL_VIEWER_SCRIPT)}</script>`;
 }
 
 function htmlAttribute(name, value) {
@@ -178,6 +187,8 @@ function sanitizeCssColor(value) {
 }
 
 exports.DEFAULT_MODEL_VIEWER_SCRIPT_URL = DEFAULT_MODEL_VIEWER_SCRIPT_URL;
+exports.MODEL_VIEWER_CDN_SCRIPT_URL = MODEL_VIEWER_CDN_SCRIPT_URL;
+exports.BUNDLED_MODEL_VIEWER_VERSION = BUNDLED_MODEL_VIEWER_VERSION;
 exports.MODEL_VIEWER_DOM_READY_EVENT = MODEL_VIEWER_DOM_READY_EVENT;
 exports.MODEL_VIEWER_LOADED_EVENT = MODEL_VIEWER_LOADED_EVENT;
 exports.MODEL_VIEWER_MODEL_ERROR_EVENT = MODEL_VIEWER_MODEL_ERROR_EVENT;

package/docs/COMPATIBILITY.md

@@ -6,7 +6,7 @@ This package is a WebView bridge. Compatibility depends on:
 - React Native
 - `react-native-webview`
 - the Android System WebView or iOS WKWebView
-- Google's `<model-viewer>` web component
+- the bundled `@google/model-viewer` runtime
 - how the consuming app bundles `.glb` and `.gltf` files
 
 ## Supported Peer Ranges
@@ -30,6 +30,7 @@ Current local integration target:
 - React 19.1
 - React Native 0.81
 - `react-native-webview` 13.15
+- `@google/model-viewer` 4.2.0
 - TypeScript 5.9
 
 Automated checks validate:
@@ -39,6 +40,22 @@ Automated checks validate:
 - package tarball contents with `npm pack --dry-run`
 - integration with this repository's Expo app through TypeScript and Expo lint
 
+## Device Smoke Tests
+
+These results are manual smoke tests, not a blanket support matrix.
+
+| Date | Platform | App runtime | Model source | Result |
+| --- | --- | --- | --- | --- |
+| 2026-06-30 | Android 16 physical device | Expo Go, Expo SDK 56 tester app | Remote GLB URL | Verified |
+| 2026-06-30 | Android 16 physical device | Expo Go, Expo SDK 56 tester app | Local Khronos `Box.glb` as `data:model/gltf-binary;base64,...` | Verified |
+| 2026-06-30 | Android 16 physical device | Expo Go, Expo SDK 56 tester app | Local Khronos `Box.glb` as direct `file:` URI | Not reliable in this smoke test |
+| Not yet tested | iOS WKWebView | Not yet tested | Any model source | Not yet verified |
+
+The local Android test used `expo-asset` to resolve a bundled `.glb`, then
+`expo-file-system` to read the local file as base64 before passing a
+`data:model/gltf-binary;base64,...` URI to `ModelViewerWebView`. This avoids the
+Android WebView file-access path that failed in the direct `file:` smoke test.
+
 ## Not Guaranteed
 
 The package does not claim blanket support for all React Native versions.
@@ -49,6 +66,9 @@ Explicit limitations:
 - WebView bugs in specific Android System WebView or iOS versions may affect
   rendering.
 - Local `.glb` bundling depends on the consuming app's Metro config.
+- On Android Expo Go, direct WebView loading from a local `file:` GLB URI was
+  not reliable in the 2026-06-30 smoke test. Prefer a GLB data URI for local
+  Expo assets unless your target app/device matrix proves direct file loading.
 - Device rendering is not fully proven by unit tests.
 - AR behavior is not a supported package guarantee.
 - Long lists of many WebViews may have memory/performance problems.
@@ -108,5 +128,5 @@ For local development, configure the consuming app's Metro setup to:
   found.
 - Keep dev dependencies pinned to one known-good React Native stack.
 - Use CI and device smoke tests before raising support claims.
-- If `<model-viewer>` changes behavior, update README examples and tests before
-  changing the default CDN URL.
+- If `<model-viewer>` changes behavior, update README examples, vendor metadata,
+  third-party notices, and tests before changing the bundled runtime version.

package/docs/HOW_IT_WORKS.md

@@ -77,15 +77,23 @@ to avoid injecting arbitrary CSS into generated HTML.
 
 ## Script Loading
 
-By default, the HTML loads:
+By default, the HTML inlines the vendored runtime:
 
 ```text
-https://ajax.googleapis.com/ajax/libs/model-viewer/4.2.0/model-viewer.min.js
+@google/model-viewer 4.2.0
 ```
 
-Apps that need offline behavior can provide either:
+This avoids a CDN request at runtime, so a bundled/local model asset can render
+without network access. It also makes each package version deterministic: the
+same npm package version always embeds the same `<model-viewer>` runtime.
 
-- `modelViewerScriptUrl`, such as a `file:` URL to a bundled script
+The vendored runtime is generated into `vendor/model-viewer/runtime.js` from
+`@google/model-viewer`'s `dist/model-viewer.min.js`. Source hashes and license
+metadata are recorded in `vendor/model-viewer/SOURCE.md`.
+
+Apps that want to use a different runtime can provide either:
+
+- `modelViewerScriptUrl`, such as a CDN URL or `file:` URL to another script
 - `modelViewerScript`, an inline module script string
 
 Inline script content escapes closing `</script>` sequences to avoid breaking

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-model-viewer-webview",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "description": "A WebView-backed GLB and glTF model viewer for React Native and Expo.",
   "license": "MIT",
   "repository": {
@@ -31,18 +31,22 @@
     "dist",
     "example",
     "src",
+    "vendor",
+    "scripts",
     "CHANGELOG.md",
     "CONTRIBUTING.md",
     "LICENSE",
     "llms.txt",
     "README.md",
     "SECURITY.md",
+    "THIRD_PARTY_NOTICES.md",
     "docs",
     "tsconfig.json"
   ],
   "sideEffects": false,
   "scripts": {
     "check": "npm test && npm run typecheck && npm run pack:dry-run",
+    "generate:model-viewer-runtime": "node scripts/generate-model-viewer-runtime.js",
     "test": "node --test test/*.test.js",
     "pack:dry-run": "npm pack --dry-run",
     "typecheck": "tsc --noEmit"

package/scripts/generate-model-viewer-runtime.js

@@ -0,0 +1,150 @@
+#!/usr/bin/env node
+
+const childProcess = require("node:child_process");
+const crypto = require("node:crypto");
+const fs = require("node:fs");
+const os = require("node:os");
+const path = require("node:path");
+
+const MODEL_VIEWER_PACKAGE = "@google/model-viewer";
+const MODEL_VIEWER_VERSION = "4.2.0";
+const packageRoot = path.resolve(__dirname, "..");
+const vendorRoot = path.join(packageRoot, "vendor", "model-viewer");
+
+function main() {
+  const packageDir =
+    process.env.MODEL_VIEWER_PACKAGE_DIR || downloadModelViewerPackage();
+  const runtimeSourcePath = path.join(packageDir, "dist", "model-viewer.min.js");
+  const licensePath = path.join(packageDir, "LICENSE");
+
+  const runtimeSource = fs.readFileSync(runtimeSourcePath, "utf8");
+  const license = fs.readFileSync(licensePath, "utf8");
+  const runtimeHash = sha256(runtimeSource);
+  const packageHash = findPackageHash(packageDir);
+
+  fs.mkdirSync(vendorRoot, { recursive: true });
+  fs.writeFileSync(
+    path.join(vendorRoot, "runtime.js"),
+    [
+      `"use strict";`,
+      "",
+      `const BUNDLED_MODEL_VIEWER_VERSION = ${JSON.stringify(MODEL_VIEWER_VERSION)};`,
+      `const BUNDLED_MODEL_VIEWER_SCRIPT = ${JSON.stringify(runtimeSource)};`,
+      "",
+      "exports.BUNDLED_MODEL_VIEWER_VERSION = BUNDLED_MODEL_VIEWER_VERSION;",
+      "exports.BUNDLED_MODEL_VIEWER_SCRIPT = BUNDLED_MODEL_VIEWER_SCRIPT;",
+      "",
+    ].join("\n"),
+  );
+  fs.writeFileSync(
+    path.join(vendorRoot, "runtime.d.ts"),
+    [
+      `export declare const BUNDLED_MODEL_VIEWER_VERSION = ${JSON.stringify(MODEL_VIEWER_VERSION)};`,
+      "export declare const BUNDLED_MODEL_VIEWER_SCRIPT: string;",
+      "",
+    ].join("\n"),
+  );
+  fs.writeFileSync(path.join(vendorRoot, "LICENSE"), license);
+  fs.writeFileSync(
+    path.join(vendorRoot, "VERSION"),
+    `${MODEL_VIEWER_PACKAGE} ${MODEL_VIEWER_VERSION}\n`,
+  );
+  fs.writeFileSync(
+    path.join(vendorRoot, "SOURCE.md"),
+    buildSourceNotice({ packageHash, runtimeHash, runtimeSource }),
+  );
+}
+
+function downloadModelViewerPackage() {
+  const tempDir = fs.mkdtempSync(
+    path.join(os.tmpdir(), "react-native-model-viewer-webview-"),
+  );
+  const packResult = childProcess.spawnSync(
+    "npm",
+    ["pack", `${MODEL_VIEWER_PACKAGE}@${MODEL_VIEWER_VERSION}`, "--pack-destination", tempDir],
+    { encoding: "utf8", stdio: ["ignore", "pipe", "pipe"] },
+  );
+
+  if (packResult.status !== 0) {
+    throw new Error(packResult.stderr || packResult.stdout || "npm pack failed");
+  }
+
+  const tarballPath = fs
+    .readdirSync(tempDir)
+    .filter((fileName) => fileName.endsWith(".tgz"))
+    .map((fileName) => path.join(tempDir, fileName))[0];
+
+  if (!tarballPath) {
+    throw new Error("npm pack did not produce a .tgz file");
+  }
+
+  const tarResult = childProcess.spawnSync(
+    "tar",
+    ["-xzf", tarballPath, "-C", tempDir],
+    { encoding: "utf8", stdio: ["ignore", "pipe", "pipe"] },
+  );
+
+  if (tarResult.status !== 0) {
+    throw new Error(tarResult.stderr || tarResult.stdout || "tar extraction failed");
+  }
+
+  return path.join(tempDir, "package");
+}
+
+function findPackageHash(packageDir) {
+  const parentDir = path.dirname(packageDir);
+  const tarballPath = fs
+    .readdirSync(parentDir)
+    .filter((fileName) => fileName.endsWith(".tgz"))
+    .map((fileName) => path.join(parentDir, fileName))[0];
+
+  if (!tarballPath) {
+    return undefined;
+  }
+
+  return sha256(fs.readFileSync(tarballPath));
+}
+
+function sha256(value) {
+  return crypto.createHash("sha256").update(value).digest("hex");
+}
+
+function buildSourceNotice({ packageHash, runtimeHash, runtimeSource }) {
+  const packageHashLine = packageHash
+    ? `- Package tarball SHA-256: \`${packageHash}\``
+    : "- Package tarball SHA-256: not recorded; regenerate from an npm tarball to update this value.";
+
+  return [
+    "# Vendored model-viewer Runtime",
+    "",
+    `This directory vendors ${MODEL_VIEWER_PACKAGE}@${MODEL_VIEWER_VERSION} so the default`,
+    "`ModelViewerWebView` runtime can load inside a React Native WebView without",
+    "fetching Google's CDN script at render time.",
+    "",
+    "## Source",
+    "",
+    `- Package: \`${MODEL_VIEWER_PACKAGE}@${MODEL_VIEWER_VERSION}\``,
+    `- npm: <https://www.npmjs.com/package/${MODEL_VIEWER_PACKAGE}/v/${MODEL_VIEWER_VERSION}>`,
+    "- Repository: <https://github.com/google/model-viewer>",
+    "- Source file: `dist/model-viewer.min.js`",
+    packageHashLine,
+    `- Source file SHA-256: \`${runtimeHash}\``,
+    `- Source file bytes: \`${Buffer.byteLength(runtimeSource, "utf8")}\``,
+    "",
+    "## Generated Files",
+    "",
+    "- `runtime.js` embeds `dist/model-viewer.min.js` as a CommonJS string export.",
+    "- `runtime.d.ts` exposes the generated runtime constants to TypeScript.",
+    "- `LICENSE` contains the upstream Apache-2.0 license text.",
+    "- `VERSION` records the exact upstream package version.",
+    "",
+    "Regenerate these files with:",
+    "",
+    "```bash",
+    "npm run generate:model-viewer-runtime",
+    "```",
+    "",
+  ].join("\n");
+}
+
+main();

package/src/index.ts

@@ -3,9 +3,11 @@ export {
   type ModelViewerWebViewProps,
 } from "./ModelViewerWebView";
 export {
+  BUNDLED_MODEL_VIEWER_VERSION,
   buildModelViewerHtml,
   DEFAULT_MODEL_VIEWER_SCRIPT_URL,
   isModelViewerErrorStatus,
+  MODEL_VIEWER_CDN_SCRIPT_URL,
   MODEL_VIEWER_DOM_READY_EVENT,
   MODEL_VIEWER_LOADED_EVENT,
   MODEL_VIEWER_MODEL_ERROR_EVENT,

package/src/model-viewer-html.ts

@@ -1,5 +1,12 @@
-export const DEFAULT_MODEL_VIEWER_SCRIPT_URL =
+import {
+  BUNDLED_MODEL_VIEWER_SCRIPT,
+  BUNDLED_MODEL_VIEWER_VERSION,
+} from "../vendor/model-viewer/runtime";
+
+export const MODEL_VIEWER_CDN_SCRIPT_URL =
   "https://ajax.googleapis.com/ajax/libs/model-viewer/4.2.0/model-viewer.min.js";
+export const DEFAULT_MODEL_VIEWER_SCRIPT_URL = MODEL_VIEWER_CDN_SCRIPT_URL;
+export { BUNDLED_MODEL_VIEWER_VERSION };
 
 export const MODEL_VIEWER_DOM_READY_EVENT = "dom-ready";
 export const MODEL_VIEWER_LOADED_EVENT = "model-loaded";
@@ -159,8 +166,11 @@ function getModelViewerScriptTag(options: ModelViewerHtmlOptions) {
     return `<script type="module">${escapeScriptContent(options.modelViewerScript)}</script>`;
   }
 
-  const scriptUrl = options.modelViewerScriptUrl ?? DEFAULT_MODEL_VIEWER_SCRIPT_URL;
-  return `<script type="module" src="${escapeHtmlAttribute(scriptUrl)}"></script>`;
+  if (options.modelViewerScriptUrl) {
+    return `<script type="module" src="${escapeHtmlAttribute(options.modelViewerScriptUrl)}"></script>`;
+  }
+
+  return `<script type="module">/* @google/model-viewer ${BUNDLED_MODEL_VIEWER_VERSION} bundled runtime */\n${escapeScriptContent(BUNDLED_MODEL_VIEWER_SCRIPT)}</script>`;
 }
 
 function htmlAttribute(