MatterViz

matterviz is a toolkit for building interactive web UIs for materials science: 3d crystal structures (and molecules), periodic tables, MD/relaxation trajectories, phase diagrams, heatmaps, scatter plots, etc. Check out of the examples in the navigation bar above.

Installation

VSCode/ Cursor extension or npm install matterviz

Structure Viewer

Try dragging files onto the structure viewers

Pick one of the example files below, or drag a local structure file onto a viewer: .xyz/EXTXYZ, POSCAR, .cif, .yaml, OPTIMADE JSON, or pymatgen JSON. Compressed variants (e.g. .gz, .bz2) are supported as well.

The 3d structure viewer is built on the declarative three.js wrapper threlte. It gets Svelte-compiled for better performance, is split up into Bond, Lattice, Scene and atom components for easy extensibility. You can pass various click, drag and touch event handlers for rich interactivity as well as inject custom HTML into tooltips using child components. These show Materials Project structure for mp-756175 and a lithium iron manganese phosphate structure from a CIF file.

Trajectory Viewer

Drag any of these trajectory files onto a viewer above to load them:

Periodic Table

Phonon Spectra: Brillouin Zone · Bands · DOS

Compare phonon dispersions from DFT (PBE) against the M3GNet, CHGNet and MACE machine-learning interatomic potentials, with a synced 3d Brillouin zone, band structure and density of states. Pick a material below to switch systems.

Fermi Surface

Render Fermi surfaces from XCrySDen (.bxsf), FermiSurfer (.frmsf) and IFermi JSON via marching cubes, colored by band, Fermi velocity or orbital character. Pick an example below or drag your own file onto the viewer.

Convex Hull

Interactive 3d convex hulls of real Materials Project systems, showing a ternary subset (triangle) alongside the full quaternary (tetrahedron): orbit the phase simplex, hover entries for formation energy and energy above hull, and toggle stable/unstable phases. Pick a chemical system below to switch.

Multi-value Heatmap

2-fold Split (Diagonal)

Each element shows two values as diagonal triangles: top-left = atomic mass, bottom-right = density.