SmilesDrawer
The most popular way to draw molecules in the browser. 15,000+ downloads/month on npm.
SmilesDrawer takes a SMILES string (a text representation of a molecule) and draws its 2D structure in the browser. No heavy dependencies, no setup. Just load the script, drop in a canvas, and call one function. It is the most downloaded library of its kind on npm. I took over as core maintainer after 3 years of inactivity: wrote the first test suite (189 tests), fixed long-standing rendering bugs, and I am now shipping new releases and building a documentation website with a live playground.
Tech Stack
JavaScriptSVGCanvas APIesbuildVitestnpm
Features
- Tiny footprint (~200KB) compared to alternatives that need 2-11MB of WASM or Java.
- Three lines of code to get a molecule on screen.
- SVG and Canvas output, light and dark themes.
- Wrote 189 tests from scratch. The project had zero before.
- Fixed rendering bugs that had been open for years (ring detection, overlapping atoms, charge display).
- Building a new website with a playground where you can paste any SMILES and see the result.
- Next up: publication-quality rendering mode, a Web Component, and framework integrations.
Challenges
- Inheriting a codebase with 3 years of accumulated issues and no tests.
- Fixing rendering quality without breaking backward compatibility for thousands of users.
- Understanding and rewriting the overlap resolution algorithm, which was the main source of drawing bugs.
Learnings
- Write tests before you touch anything in a rendering engine.
- Users pick tools that are simple to use. A small bundle and zero setup beat features every time.
- Shipping often and fixing visible bugs rebuilds community trust fast.