MatterViz
matterviz is a toolkit for building interactive web UIs for materials
science: periodic tables, 3d crystal structures (and molecules), Bohr atoms, nuclei,
heatmaps, scatter plots. Check out some of the examples in the navigation bar above.
Structure Viewer
Li4Fe3Mn1(PO4)4.cif
No structure provided
mp-756175.json
No structure provided
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 great performance (even on supercells with 100+ atoms), is split up into Bond, Lattice, Scene and Site 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
Load Trajectory
Drop a trajectory file here (.xyz, .extxyz, .json, .json.gz, XDATCAR, .traj, .h5) or provide trajectory data via props
Supported formats:- Multi-frame XYZ trajectory files (.xyz, .extxyz)
- ASE trajectory files (.traj)
- Pymatgen trajectory JSON
- Array of structures with metadata
- VASP XDATCAR files
- HDF5 trajectory files (.h5, .hdf5)
- Compressed files (.gz)
💡 Force vectors will be automatically displayed when present in trajectory data
Drag any of these trajectory files onto a viewer above to load them:
Periodic Table
Element Category Colors
Element Tiles
Font Sizes
Tooltip
Multi-value Heatmap
The periodic table supports multiple values per element with different visual layouts:2-fold Split (Diagonal)
Each element shows two values as diagonal triangles: top-left = atomic mass, bottom-right = density.