Skip to main content

MaterialX · TypeScript · Open source

Work with the material.
Keep the source.

See what a MaterialX file looks like, understand its graph, and make it your own. One toolkit connects your browser, terminal, code editor and application.

Try the material viewer Get started
01Read

Loose .mtlx or portable .mtlx.zip

02Inspect

Validation, resources and rendered detail

03Edit

Node graphs, parameters and undo

04Deliver

Editable materials, previews and links

The MaterialX node editor with a graph, parameter inspector and live copper preview

A graph you can work with

Edit the nodes.
See the result.

Open a material, follow its connections and change a parameter. The live preview shares the same renderer as the viewer, while the graph stays editable MaterialX.

  • Inspect parameters and navigate nested graphs.
  • Connect nodes with validation and undo/redo.
  • Save the material or share an editable snapshot.
Open the node editorBuild your own editor →

Repeatable by design

Move your material
workflow into code.

Inspect and validate before a material reaches your pipeline. Package resources, convert textures, or render previews in scripts and agent workflows.

Install the CLIAgents and automation →
● ● ● MaterialX / terminal
npm install -g mtlx-cli

# Understand the document
mtlx info copper.mtlx
mtlx check copper.mtlx

# Inspect it in a browser
mtlx view copper.mtlx

# Produce a preview for your pipeline
mtlx render copper.mtlx -o copper.png \
  --view sphere --ibl studio

Beside your source

Stay in VS Code.

Check a MaterialX document, inspect its graph and keep a live material preview beside the XML. The extension uses the same core and rendering packages as the web tools.

Install the extension
MaterialX validation and material preview inside Visual Studio Code

Your page. Your material.

A preview wherever
you need one.

Use a self-contained web component in plain HTML, or the React wrapper in your application. Add an accessible description, set the camera, and control lighting independently of the background.

Embed a materialReact and viewer API →
<script type="module"
  src="https://cdn.jsdelivr.net/npm/mtlx-viewer/dist/material-viewer.js">
</script>

<material-viewer
  src="/materials/copper/copper.mtlx"
  alt="Brushed copper with fine grain"
  settings-panel="closed"
  background="white"
  environment-rotation="30"
  style="display:block;height:500px">
</material-viewer>

Build on the same foundation

Use the part you need.

The online tools are one way to use mtlx. Each library has its own guide and generated API reference.

Document and editing library

mtlx-core

Parse and validate MaterialX, manage packaged resources, and edit graphs through a headless session.

npm install mtlx-core
Read the guide →

Web component and React

mtlx-viewer

Bring the same material preview into your own application, with camera controls, lighting and capture.

npm install mtlx-viewer
Read the guide →

React graph editor

mtlx-editor

Build an editor from reusable graph, parameter and toolbar components connected to one session.

Build from this repository
Read the guide →

MTLX.ai service client

mtlx-sdk

Use typed operations for hosted materials, users, uploads and authentication.

npm install mtlx-sdk
Read the guide →

Start with a real material

From a file to a working preview.

Choose a sample, drop in your own MaterialX file, or follow the quick start for your first validation and integration.

Open the viewerRead the quick start