Elementari

elementari 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.

Periodic Table

Structure Viewer

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. This one shows the Materials Project structure for mp-756175 but you can select others below.

Zirconium
Bismuth
Oxygen

Drop a POSCAR, XYZ or pymatgen JSON file onto the canvas to load a new structure.

Click on an atom to make it active. Then hover another atom to get its distance to the active atom (with PBC and direct).

Hold shift or cmd or ctrl and drag to pan the scene.

Click on an element label in the color legend to change its color. Double click to reset.

Show

Atoms

Cell

Background


Try dragging files onto the structure viewer

Or drag a local extXYZ, POSCAR or pymatgen JSON files onto the structure viewer.