ChemfigJS for LiaScript: LaTeX-Style Structural Chemical Formulas in the Browser

Chemistry educators who come from a LaTeX background know chemfig — the standard package for drawing structural formulas. The ChemfigJS template by Marcus Herbig brings the chemfig syntax to the web, generating SVG from chemfig-style code directly in the browser.

No LaTeX installation, no image conversion, no external server — just the familiar notation rendered live.

Quick Start

<!--
import: https://raw.githubusercontent.com/herbigm/ChemfigJS/master/README.md
-->

Macro: @chemfig (in fence header)

Place @chemfig in the code block header, write the chemfig formula as the content. The formula is parsed and an SVG is generated and injected into the page.

```text @chemfig
*6(-=-(-OH)=(-(-[::60]OH)=[::-60]O)-=)
```

ChemfigJS Syntax

The syntax closely mirrors the LaTeX chemfig package with a few differences.

Bonds

Bond Direction

Optional bracket arguments after each bond:

• :60 — absolute angle (60°)
• ::60 — relative angle (+60° from last bond direction)
• 1 — shortcut: 1 × 45° = 45°, 3 = 135°, etc.
• Second argument: bond color (e.g. ,red)

Atoms and Text Nodes

Write atom symbols directly after bonds: -C, =O, -[::60]NH2.

Branches

Use parentheses for branches: -(-[::60]OH).

Rings

Use *N(...) for N-membered rings: *6(...) for benzene.

Connecting Distant Atoms

Use ? to create crosslinks — first occurrence sets anchor, subsequent occurrences connect back.

Examples

Benzene Ring

```text @chemfig
*6(-=-=-=)
```

Try it live:

Ethanol

```text @chemfig
CH_3-CH_2-OH
```

Pyrimidine

```text @chemfig
*6(-=-(-OH)=(-(-[::60]OH)=[::-60]O)-=)
```

Three molecules rendered side by side in one slide — plain text, browser-native SVG:

Styling

The SVG uses CSS classes for customization. Copy the defaults from style.css:

svg .textNode {
  stroke: white;
  stroke-width: 0.5em;
  paint-order: stroke;
  font-size: 12pt;
}

svg .charge {
  font-size: x-small;
}

Configuration constants (edit in the script):

• bondLength — length of a single bond (default: 30px)
• fontSize — base font size (default: 16px = 12pt)
• bondSep — separation of parallel lines in double/triple bonds

Current Limitations

For anellated rings, draw as spiro compound and use relative bond angles to position correctly.

Full Template Demo

Use Cases

Chemistry teachers from LaTeX backgrounds — Migrate existing course materials that use chemfig formulas to LiaScript without re-drawing anything — just import the template and paste the chemfig code.

Organic chemistry courses — Draw reaction mechanisms, functional groups, and multi-step syntheses with the same notation used in textbooks.

Biochemistry — Represent amino acid side chains, nucleobases, and metabolic intermediates with structural formulas.

Open educational resources — Publish chemistry OER without locked-in vector graphics editors; the formula lives as plain text in the source.

Technical Facts

Try It

Related Templates

• KekuleJS — 2D/3D molecular structures from CML files with full Kekule.js viewer
• PeriodicTable — interactive periodic table element
• Tikz-Jax — full LaTeX/TikZ diagram rendering in the browser