ChemmacrosJS for LiaScript: Professional Chemistry Notation in Courses

Chemistry courses require proper notation: subscripts in molecular formulas, reaction arrows, equilibrium double arrows, and standardized GHS safety statements. ChemmacrosJS by Marcus Herbig is a LiaScript template that ports core functionality of the LaTeX Chemmacros package to the browser. With a handful of macros you get typeset chemical formulas, aligned reaction equations, GHS pictograms, and formatted H/P statements.

Quick Start

<!--
import: https://raw.githubusercontent.com/herbigm/ChemmacrosJS/refs/heads/main/README.md
-->

Formulas — @ch

Write chemical formulas with automatic sub/superscript formatting:

Potassium ferricyanide: @ch(`K3[Fe(CN)6]`)

Sulfuric acid: @ch(`H2SO4`)

Calcium carbonate: @ch(`CaCO3`)

Hydronium ion: @ch(`H3O^+`)

Dichromate ion: @ch(`Cr2O7^{2-}`)

Numbers that follow element symbols or closing brackets are automatically subscripted. Use ^ for superscripts and ^{} for multi-character superscripts.

Try it live — formulas and a combustion reaction rendered inline:

Reaction equations — @reaction

Single-line equation with automatic arrow rendering:

@reaction(`2 H2 + O2 -> 2 H2O`)

@reaction(`N2 + 3 H2 <=> 2 NH3`)

@reaction(`Fe^{3+} + 3 OH^- -> Fe(OH)3 v`)

• -> renders as a forward reaction arrow →
• <=> renders as an equilibrium double arrow ⇌
• v renders as a downward arrow ↓ (precipitate)
• ^ renders as an upward arrow ↑ (gas escape)

Aligned multi-step reactions — @reactions

@reactions(`
  CH4 + 2 O2 -> CO2 + 2 H2O
  CO2 + H2O <=> H2CO3
  H2CO3 <=> H^+ + HCO3^-
`)

Equations are stacked and aligned on the reaction arrow.

GHS pictograms — @ghspic

Display standardized GHS hazard pictograms:

@ghspic(`explos`)       <!-- explosive -->
@ghspic(`flame`)        <!-- flammable -->
@ghspic(`acid`)         <!-- corrosive -->
@ghspic(`health`)       <!-- health hazard -->
@ghspic(`environ`)      <!-- environmental hazard -->
@ghspic(`explos flame`) <!-- multiple pictograms -->

H and P statements — @hstatements / @pstatements

Render standardized GHS hazard and precautionary statements:

**Hazard statements:**
@hstatements(`302-331-315`)

**Precautionary statements:**
@pstatements(`201-273-501`)

Statements are looked up from the built-in statement library and rendered as formatted text.

Example: Laboratory Safety Data Sheet

<!--
import: https://raw.githubusercontent.com/herbigm/ChemmacrosJS/refs/heads/main/README.md
-->

# Sodium Hypochlorite — @ch(`NaOCl`)

## Properties

| Property | Value |
|---|---|
| Molecular formula | @ch(`NaOCl`) |
| Molar mass | 74.44 g/mol |
| Density | 1.21 g/cm^3 |

---

## Reactions

**Decomposition on heating:**

@reaction(`2 NaOCl -> 2 NaCl + O2 ^`)

**Reaction with @ch(`CO2`) from air:**

@reaction(`2 NaOCl + CO2 + H2O -> Na2CO3 + 2 HOCl`)

**Chlorine release in acid:**

@reaction(`NaOCl + 2 HCl -> NaCl + Cl2 ^ + H2O`)

---

## Safety Information

@ghspic(`acid oxidiz health environ`)

**H-statements:**
@hstatements(`290-314-335-400-410`)

**P-statements:**
@pstatements(`260-273-280-301+330+331-309+310`)

---

## Equilibrium Quiz

The reaction @ch(`N2 + 3H2 <=> 2NH3`) is the:

[( )] Haber-Weiss process
[(X)] Haber-Bosch process
[( )] Fischer-Tropsch process
[( )] Ostwald process

Try the full Safety Data Sheet live — typeset formulas, reaction equations, GHS pictograms, and a quiz on one slide:

Full Template Demo

Use Cases

Secondary and university chemistry — Proper notation for all formula types without requiring LaTeX or a typesetting environment.

Laboratory manuals — Inline GHS pictograms, H/P statements, and reaction equations in one consistent document.

Chemical engineering courses — Multi-step reaction pathways formatted with aligned equations.

Revision materials — Students see professionally typeset formulas instead of plain-text approximations like H2SO4 or Fe3+.

Technical Facts

Try It

Related Templates

• KekuleJS — 2D molecular structure editor and renderer
• JSXGraph — general-purpose interactive math for physical chemistry
• lia-Mathe — visual fraction exercises for math
• AVR8js-mem — microcontroller simulation for electronics courses