smilesdrawer
SmilesDrawer.
It turns molecular text strings into clean drawings in the browser.
Chemists often store molecules as SMILES, short text strings like the one for aspirin. SmilesDrawer reads the string, builds the molecular graph and draws the 2D structure, as SVG or on a canvas, in the browser. It gets about 26,000 npm downloads a 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 tells you which atoms are bonded to which, but nothing about where to put them on the page. SmilesDrawer works that out, rings and stereochemistry included, and draws the result. It all runs in the browser, so a web app can show a molecule without a chemistry toolkit on the server.
Chemists read molecules from structure drawings, so a web app that shows one needs a drawing that is chemically correct and easy to read.
ii.Vismara and rings
As a graph, a molecule is atoms joined by bonds, and a ring is a cycle in that graph. For benzene that's trivial. Fused, bridged and cage molecules contain many overlapping cycles, and the layout needs only the small set a chemist would call the rings. The old heuristic sometimes counted them wrong: cubane has six square faces, and it found five.
I finished a TypeScript implementation of Vismara's algorithm, built on new BitSet and BitMatrix primitives, and it replaced the heuristic. It finds the minimum cycle basis (often called the SSSR) and the relevant cycles, which is what fused and bridged systems need.
iii.Stereochemistry and layout
The old stereochemistry code was a stack of patches. I replaced it with a lazy CIP priority tree (CIPTree) that follows the IUPAC P-9 rules and is checked against an RDKit reference suite. I also fixed the layout of bridged rings (using Kamada-Kawai), E/Z double bonds, SVG bounding boxes and some pseudo-element bugs.
iv.Tooling and infra
I set up CI with vitest for the unit, regression and stereo-reference suites, moved the build to esbuild, and put a new docs and demo site on GitHub Pages.