elementari is a toolkit for building interactive web UIs for materials science: periodic tables, 3d crystal structures (and molecules, though could use some improvements), Bohr atoms, nuclei, heatmaps, scatter plots. It’s under active development and not yet ready for production use but we appreciate any feedback from beta testers! πŸ™

Check out some of the examples in the navigation bar above.

Care was taken to make this interactive periodic table responsive to different screen sizes, automatically adjusting font size and what data to show or hide based on available space.

Periodic Table

Structure Viewer

The 3d structure viewer is built on the declarative Svelte 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.


Drop a 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.

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