SMILES Drawing Test

This page tests browser-based rendering of chemical structures from SMILES notation using SmilesDrawer.

How It Works

1. The SmilesDrawer library is loaded site-wide via extra_javascript in mkdocs.yml.
2. Each molecule is declared as a <canvas> element with a data-smiles attribute.
3. The js/smiles.js script calls SmilesDrawer.apply() at page load, converting every tagged canvas into a 2D structural diagram.

Smiles Test HTML

Simple Molecules

• Water O

• Methane C

• Ethanol CCO

• Acetic Acid CC(=O)O

Aromatic Compounds

• Benzene c1ccccc1

• Toluene Cc1ccccc1

• Naphthalene c1ccc2ccccc2c1

• Phenol Oc1ccccc1

Drug Molecules

• Aspirin CC(=O)Oc1ccccc1C(=O)O

• Caffeine Cn1c(=O)c2c(ncn2C)n(C)c1=O

• Ibuprofen CC(C)Cc1ccc(cc1)[C@@H](C)C(=O)O

• Penicillin G CC1([C@@H](N2[C@H](S1)[C@@H](C2=O)NC(=O)Cc3ccccc3)C(=O)O)C

Biomolecules

• Glucose OC[C@H]1OC(O)[C@H](O)[C@@H](O)[C@@H]1O

• Alanine C[C@@H](N)C(=O)O

• ATP c1nc(c2c(n1)n(cn2)C3CC(C(O3)COP(=O)(O)OP(=O)(O)OP(=O)(O)O)O)N

• Cholesterol CC(CCCC(C)C)C1CCC2C1(CCC3C2CC=C4C3(CCC(C4)O)C)C

Functional Groups

• Formaldehyde (aldehyde) C=O

• Acetone (ketone) CC(=O)C

• Diethyl Ether CCOCC

• Methylamine (amine) CN

SMILES Reference

Name	SMILES
Water	O
Methane	C
Ethanol	CCO
Acetic acid	CC(=O)O
Benzene	c1ccccc1
Aspirin	CC(=O)Oc1ccccc1C(=O)O
Caffeine	Cn1c(=O)c2c(ncn2C)n(C)c1=O
Glucose	OC[C@H]1OC(O)[C@H](O)[C@@H](O)[C@@H]1O
Penicillin G	CC1([C@@H](N2[C@H](S1)[C@@H](C2=O)NC(=O)Cc3ccccc3)C(=O)O)C
Ibuprofen	CC(C)Cc1ccc(cc1)[C@@H](C)C(=O)O