Docsify plugin that converts standard Markdown links to supported 3D models into inline, interactive previews while keeping a download link.

Acrobatic Plane glb

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify/dist/themes/core.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify/dist/themes/addons/core-dark.min.css" media="(prefers-color-scheme: dark)">

<script>
	window.$docsify = {
		name: "docsify-model-viewer",
		modelViewer: {
			height: "420px",
			lazy: "visible",
			showOpen: true
		}
	};
</script>

<script src="https://cdn.jsdelivr.net/npm/docsify/dist/docsify.min.js"></script>
<script src="https://gllmar.github.io/docsify-model-viewer/docsify-model-viewer.js"></script>

Then in Markdown:

[Example Model](models/example.glb)

Supported extensions (case-insensitive):

• .stl
• .gltf, .glb
• .obj
• .ply
• .babylon

This plugin uses the Babylon Viewer V2 custom element (<babylon-viewer>) via the public CDN runtime by default (you can switch to local runtime + loaders below):

• The Viewer dynamically loads format loaders on demand.
• WebGL/WebGPU engines are supported and selected automatically.
• Rendering is suspended when the viewer is offscreen for power savings.

For production bundling, Babylon recommends installing @babylonjs/viewer via npm and bundling your own build; this plugin defaults to CDN for zero-config usage.

All settings are optional under window.$docsify.modelViewer.

window.$docsify = {
	modelViewer: {
		enabled: true,
		formats: ["stl", "glb", "gltf"],
		mode: "replace",
		width: "100%",
		height: "480px",
		aspectRatio: null,
		lazy: "visible",
		downloadLabel: "Download",
		showOpen: false,
		viewerConfig: null,
		debug: false,
		silent: true,
		runtimeUrls: ["./vendor/babylon-viewer.esm.min.js"],
		loaderUrls: {
			sceneLoader: "./vendor/babylonjs-core/Loading/sceneLoader.js",
			gltfLoader: "./vendor/babylonjs-loaders/glTF/2.0/glTFLoader.js"
		},
		allowCdnFallback: true
	}
};

To use a local Babylon Viewer bundle (with CDN fallback for loader helpers), run:

./scripts/fetch-viewer.sh

This downloads the Viewer runtime plus the Babylon core/loaders packages into vendor/.

Then add this to your Docsify config (optional override):

window.$docsify = {
  modelViewer: {
		runtimeUrls: ["./vendor/babylon-viewer.esm.min.js"],
		loaderUrls: {
			sceneLoader: "./vendor/babylonjs-core/Loading/sceneLoader.js",
			gltfLoader: "./vendor/babylonjs-loaders/glTF/2.0/glTFLoader.js"
		},
		allowCdnFallback: false
  }
};

The plugin will attempt local URLs first and fall back to the public CDN if the local files are missing (unless allowCdnFallback is set to false).

By default, vendor/ is gitignored. If you need fully offline/air‑gapped or self‑hosted assets, commit vendor/ and set allowCdnFallback: false.