View, edit, validate, and ship MaterialX materials on the web.
- 🎨 Interactive 3D Material Preview
- 🧩 Drop-In Web Component
- 🕸️ Node Graph Editing
- ✅ Validation and Inspection
- 📦 Portable
.mtlx.zipPackages - 💻 CLI and VS Code Extension
mtlx is a set of TypeScript and JavaScript tools for working with MaterialX materials. Work with loose .mtlx files or portable .mtlx.zip archives in the browser, terminal, or VS Code.
| Package | Version (click for changelogs) |
|---|---|
| mtlx-core |  |
| mtlx-viewer |  |
| mtlx-cli |  |
| mtlx-sdk |  |
| mtlx-vscode-extension |  |
Try the viewer · Open the editor · Get started
Add <material-viewer> to any HTML page. No React or build step is required.
<script type="module" src="https://cdn.jsdelivr.net/npm/mtlx-viewer/dist/material-viewer.js"></script>
<material-viewer
src="https://mtlx.ben3d.ca/materials/copper/copper.mtlx"
alt="Copper material under neutral studio lighting"
settings-panel="closed"
style="display:block;width:100%;height:440px"
></material-viewer>npm install --global mtlx-cli
mtlx check material.mtlx
mtlx view material.mtlx
mtlx transform material.mtlx -o material.mtlx.zip --profile web| Package | Use it for | Documentation |
|---|---|---|
| mtlx-core | Parsing, validation, packaging, transforms, and headless graph editing | Core guide |
| mtlx-viewer | Web component, React wrapper, and Three.js preview APIs | Viewer guide |
| mtlx-cli | Local workflows and MTLX.ai commands | CLI guide |
| mtlx-sdk | Typed MTLX.ai service client | SDK guide |
| mtlx-editor | Reusable React node editor (source workspace package) | Editor guide |
| VS Code extension | Previews, node graphs, and packaging inside your editor | Extension guide |
Node tools require Node.js 22+. Browser rendering needs GPU-backed WebGPU or WebGL2. Validation covers selected document rules; preview support follows Three.js's MaterialX loader.
See RELEASING.md for how releases are published and GitHub Releases for changes.
See Contributing Guide.
MIT
Ben Houston, Sponsored by Land of Assets.