PeriodicTable for LiaScript: An Interactive Element Table in Your Course

A periodic table is a fixture of chemistry education at every level. The PeriodicTable template lets you embed a fully interactive, styled periodic table directly into a LiaScript course page with a single line — no image, no plugin, no configuration.

The table renders via a small iframe pointing to a hosted component based on Bowserinator’s Periodic-Table-JSON.

Quick Start

<!--
import: https://raw.githubusercontent.com/LiaTemplates/PeriodicTable/main/README.md
-->

Macro 1: @PeriodicTable — Full-Width Table

Inserts the periodic table at full width and 600px height.

@PeriodicTable

Macro 2: @PeriodicTable.withStyle("...") — Custom Size

Control width, height, and other CSS properties.

@PeriodicTable.withStyle("width: 50%; height: 600px;")

@PeriodicTable.withStyle("width: 100%; height: 400px; border: 2px solid #ccc;")

Example: Periodic Table on a Slide

## The Elements

Use the periodic table below to look up element properties.
Click any element to see its details.

@PeriodicTable

Try it live — click any element to see its details:

Design Notes

• The table is rendered inside an iframe pointing to https://liatemplates.github.io/PeriodicTable/index.html
• Elements are clickable and display symbol, name, and atomic number
• Not recommended to place more than one table on the same page
• For more complete molecular visualization (2D/3D structures, CML), use the KekuleJS template

Full Template Demo

Use Cases

Secondary chemistry — Replace static periodic table images with an interactive one that students can explore. Click any element for its symbol, name, and atomic number.

Exam preparation — Embed the table on a reference slide for open-resource chemistry tests.

Introduction lectures — Display the table when introducing element groups, periods, and trends.

STEM camps and workshops — Quick visual reference in LiaScript materials without needing to distribute printed tables.

Technical Facts

Try It

Related Templates

• KekuleJS — 2D/3D molecular structures, CML files, full Kekule.js integration
• ChemfigJS — structural formulas in chemfig/LaTeX syntax
• mec2 — 2D mechanism and physics simulation for STEM