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 Hydrogen2 He Helium3 Li Lithium4 Be Beryllium5 B Boron6 C Carbon7 N Nitrogen8 O Oxygen9 F Fluorine10 Ne Neon11 Na Sodium12 Mg Magnesium13 Al Aluminium14 Si Silicon15 P Phosphorus16 S Sulfur17 Cl Chlorine18 Ar Argon19 K Potassium20 Ca Calcium21 Sc Scandium22 Ti Titanium23 V Vanadium24 Cr Chromium25 Mn Manganese26 Fe Iron27 Co Cobalt28 Ni Nickel29 Cu Copper30 Zn Zinc31 Ga Gallium32 Ge Germanium33 As Arsenic34 Se Selenium35 Br Bromine36 Kr Krypton37 Rb Rubidium38 Sr Strontium39 Y Yttrium40 Zr Zirconium41 Nb Niobium42 Mo Molybdenum43 Tc Technetium44 Ru Ruthenium45 Rh Rhodium46 Pd Palladium47 Ag Silver48 Cd Cadmium49 In Indium50 Sn Tin51 Sb Antimony52 Te Tellurium53 I Iodine54 Xe Xenon55 Cs Cesium56 Ba Barium57 La Lanthanum58 Ce Cerium59 Pr Praseodymium60 Nd Neodymium61 Pm Promethium62 Sm Samarium63 Eu Europium64 Gd Gadolinium65 Tb Terbium66 Dy Dysprosium67 Ho Holmium68 Er Erbium69 Tm Thulium70 Yb Ytterbium71 Lu Lutetium72 Hf Hafnium73 Ta Tantalum74 W Tungsten75 Re Rhenium76 Os Osmium77 Ir Iridium78 Pt Platinum79 Au Gold80 Hg Mercury81 Tl Thallium82 Pb Lead83 Bi Bismuth84 Po Polonium85 At Astatine86 Rn Radon87 Fr Francium88 Ra Radium89 Ac Actinium90 Th Thorium91 Pa Protactinium92 U Uranium93 Np Neptunium94 Pu Plutonium95 Am Americium96 Cm Curium97 Bk Berkelium98 Cf Californium99 Es Einsteinium100 Fm Fermium101 Md Mendelevium102 No Nobelium103 Lr Lawrencium104 Rf Rutherfordium105 Db Dubnium106 Sg Seaborgium107 Bh Bohrium108 Hs Hassium109 Mt Meitnerium110 Ds Darmstadtium111 Rg Roentgenium112 Cn Copernicum113 Nh Nihonium114 Fl Flerovium115 Mc Moscovium116 Lv Livermorium117 Ts Tennessine118 Og Oganesson
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