Elementari

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

1 H 2 He 3 Li 4 Be 5 B 6 C 7 N 8 O 9 F 10 Ne 11 Na 12 Mg 13 Al 14 Si 15 P 16 S 17 Cl 18 Ar 19 K 20 Ca 21 Sc 22 Ti 23 V 24 Cr 25 Mn 26 Fe 27 Co 28 Ni 29 Cu 30 Zn 31 Ga 32 Ge 33 As 34 Se 35 Br 36 Kr 37 Rb 38 Sr 39 Y 40 Zr 41 Nb 42 Mo 43 Tc 44 Ru 45 Rh 46 Pd 47 Ag 48 Cd 49 In 50 Sn 51 Sb 52 Te 53 I 54 Xe 55 Cs 56 Ba 57 La 58 Ce 59 Pr 60 Nd 61 Pm 62 Sm 63 Eu 64 Gd 65 Tb 66 Dy 67 Ho 68 Er 69 Tm 70 Yb 71 Lu 72 Hf 73 Ta 74 W 75 Re 76 Os 77 Ir 78 Pt 79 Au 80 Hg 81 Tl 82 Pb 83 Bi 84 Po 85 At 86 Rn 87 Fr 88 Ra 89 Ac 90 Th 91 Pa 92 U 93 Np 94 Pu 95 Am 96 Cm 97 Bk 98 Cf 99 Es 100 Fm 101 Md 102 No 103 Lr 104 Rf 105 Db 106 Sg 107 Bh 108 Hs 109 Mt 110 Ds 111 Rg 112 Cn 113 Nh 114 Fl 115 Mc 116 Lv 117 Ts 118 Og
57-71 La-Lu Lanthanides
89-103 Ac-Lr Actinides

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.

Zirconium
Bismuth
Oxygen

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.

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