SMILES Renderer

A Visual Studio Code extension that renders SMILES (Simplified Molecular Input Line Entry System) strings as molecular structure diagrams on hover.

Powered by RDKit.js - the industry-standard chemistry toolkit for professional-quality molecular visualizations.

Features

• Hover to visualize: Hover over any SMILES string to see the molecular structure
• Molecule support: Renders organic molecules, inorganic compounds, ions, and stereochemistry
• Reaction support: Displays complete reaction schemes with reactants, reagents, and products
• Professional quality: Publication-ready chemical structures with standardized scaling
• Works everywhere: Supports all file types in VS Code

Usage

Simply hover your cursor over a SMILES string in any file to see its structure.

Example SMILES Strings

Molecules:

CCO                              // Ethanol
c1ccccc1                        // Benzene
CC(=O)O                         // Acetic acid
C[C@H](https://github.com/milicazmarkovic/render-smiles/blob/HEAD/O)COOH                   // L-lactic acid (with stereochemistry)
CN1C=NC2=C1C(=O)N(C(=O)N2C)C   // Caffeine
[Na+].[Cl-]                     // Sodium chloride

Reactions:

CCO>[O]>CC=O                                               // Ethanol oxidation
c1ccccc1.[N+](https://github.com/milicazmarkovic/render-smiles/blob/HEAD/=O)[O-]>OS(=O)(=O)O>c1ccc([N+](https://github.com/milicazmarkovic/render-smiles/blob/HEAD/=O)[O-])cc1  // Benzene nitration
CC(=O)O.CCO>OS(=O)(=O)O>CC(=O)OCC.O                       // Esterification
C=C.Br2>>BrC-CBr                                           // Alkene bromination

Requirements

• Visual Studio Code 1.74.0 or higher
• ~15MB disk space for RDKit.js library

Supported Features

✅ Organic and inorganic molecules
✅ Aromatic systems with proper representation
✅ Stereochemistry (chiral centers, E/Z isomers)
✅ Ionic species and formal charges
✅ Ring systems of any size
✅ Reaction SMILES (reactants>reagents>products)
✅ Multiple reactants/products

⚠️ Important: Reagents in reactions must be valid SMILES structures. Text abbreviations like "NaBH4", "H2SO4", or "ether" are not supported. Use proper SMILES notation instead:

• H2SO4 → OS(=O)(=O)O
• NaBH4 → [BH4-].[Na+]
• For conditions without structure, use: reactants>>products

Technical Details

• Rendering Engine: RDKit.js v2025.3.4 (WebAssembly)
• Extension Size: ~12-15MB (includes full RDKit module)
• Performance: Lazy loading - RDKit initializes only when needed
• Output Format: SVG with standardized bond lengths (30px)

Known Limitations

• The extension uses pattern matching to detect SMILES strings
• Invalid SMILES are silently ignored (no error messages)
• Text abbreviations in reaction SMILES are not supported
• Large molecules (>100 atoms) may render slowly on first load

Release Notes

0.0.1 (Initial Release)

• SMILES molecule visualization with hover
• Chemical reaction rendering
• RDKit.js integration (WebAssembly)
• Standardized scaling for consistent structures
• Support for stereochemistry and aromatic systems

License

MIT

Credits

This extension uses RDKit.js, the JavaScript/WebAssembly port of RDKit - the industry-standard open-source cheminformatics toolkit.