Molecular drawings.
Native to the web.

Write Chemfig in Markdown. Get crisp, accessible SVG—without a LaTeX installation.

A focused Chemfig subset for remark, rehype, and JavaScript.

Chemfig sourceEditable

Edit the drawing code. The preview updates as you type.

AspirinSVG preview

An aromatic scaffold with two branched functional groups.

Part of the paragraph.

Fenced blocks for figures. Inline code for the smaller connections.

An alcohol group, , right where you need it.

`chemfig: H_3C-CH_2-OH`

Small syntax. Real structures.

The familiar drawing primitives, not a new chemistry notation.

Angles & branches

Predefined, absolute, and relative angles. Defaults stay scoped to each chain.

[:30]--[:-30](=[6]O)--[:-30](-[6]NH_2)-(=[2]O)-[:-30]OH

Rings & aromaticity

Regular rings, connected rings, nested rings, and explicit aromatic circles.

*6(-=-(-**6(------))=-=)

Labels & stereochemistry

Subscripts, superscripts, and all six solid, hashed, and hollow Cram bonds.

H_3C-[:30](<[:90]OH)(<:[:-90]H)-[:-30]C(=[:30]O)-[:-30]OH

A plugin, not a pipeline.

Drop it into unified. The output is an ordinary HTML tree with real SVG elements. No raw HTML switch, server process, or client-side runtime required.

Already working with HTML? Use rehypeChemfig after remarkRehype instead.

API and configuration

import { remarkChemfig } from
  'rehype-chemfig';

unified()
  .use(remarkParse)
  .use(remarkChemfig)
  .use(remarkRehype)
  .use(rehypeStringify);

Know the boundaries.

This is a native renderer for a documented subset of Chemfig, not a TeX engine. It draws what you write; it doesn’t infer hydrogens, validate valence, or optimize your layout.

Reaction schemes, charge macros, arbitrary TeX, TikZ styles, and submolecule aliases are not implemented. Unsupported input stays visible, with a diagnostic you can act on.

Full compatibility reference

Molecular drawings.Native to the web.