smilesdrawer
SmilesDrawer.
It turns molecular text strings into clean drawings in the browser.
Chemists often store molecules as SMILES: compact text strings like the one for aspirin. SmilesDrawer parses that text, understands the molecular graph, and draws a readable 2D structure as SVG or Canvas in any browser, with about 26,000 npm downloads per week.
Reymond Group · ~26k npm/week
Draw it yourself
Type a SMILES string; the drawing is the renderer's reading of it
More presets and options on the full site: reymond-group.github.io/smilesDrawer ↗
i.What it does
A SMILES string is convenient for computers but unpleasant for humans. It says which atoms are connected, but it does not say where to place them on the page. SmilesDrawer turns that string into a drawing: atoms, bonds, rings, stereochemistry, and layout, all without a server-side chemistry toolkit.
That matters because chemical structure drawings are the language chemists actually read. If a web app shows a molecule, the drawing has to be chemically correct and visually legible.
ii.Vismara and rings
Ring perception is one of the deceptively interesting parts. In graph terms, a molecule is atoms connected by bonds, and a ring is a cycle in that graph. Simple molecules are easy. Fused, bridged, and polycyclic systems are not: the graph can contain many overlapping cycles, but the drawing algorithm needs the chemically meaningful small set.
I finished a TypeScript implementation of Vismara's algorithm on top of new BitSet and BitMatrix primitives. It recovers the minimum cycle basis (often discussed near SSSR) and the relevant cycles needed to handle fused and bridged systems properly, replacing a heuristic that could mis-count rings.
iii.Stereochemistry and layout
I also replaced patched ad-hoc stereochemistry handling with a lazy CIP priority tree (CIPTree) that follows the IUPAC P-9 rules, verified against an RDKit reference suite. Along the way I fixed bridged-ring layout with Kamada-Kawai, E/Z double-bond rendering, SVG bounding-box behavior, and pseudo-element issues.
iv.Tooling and infra
I wired vitest CI for unit, regression, and stereo-reference suites; modernized the build with esbuild; and shipped a new GitHub Pages docs and demo site. The result is a browser-first molecule renderer that is easier to test, easier to maintain, and easier to trust in downstream tools.