SMILES / SELFIES Renderer
A Visual Studio Code extension that renders SMILES (Simplified Molecular Input Line Entry System) and SELFIES (SELF-referencIng Embedded Strings) as molecular structure diagrams on hover.
Powered by RDKit.js for visualization and @milicazm/selfies-js for SELFIES support - industry-standard tools for professional-quality molecular representations.
Features
- Hover to visualize: Hover over any SMILES or SELFIES string to see the molecular structure
- SELFIES Support: Full support for SELFIES notation, the 100% valid molecular representation
- Structure Viewer Panel: Collect and compare multiple structures in a persistent side panel with physicochemical properties
- Molecular Properties: View MW, LogP, HBD, HBA, Rotatable Bonds, and TPSA for each molecule
- Interactive Actions: Copy SMILES to clipboard or save structures as SVG files
- Molecule support: Renders organic molecules, inorganic compounds, ions, stereochemistry, and multi-component systems (salts)
- Reaction support: Displays complete reaction schemes with reactants, reagents, and products
- Simple SMARTS support: Displays SMARTS pattern for reaction; due to rdkit.js limitations may not be able to display complex SMARTS
- Professional quality: Publication-ready chemical structures with standardized scaling
- Works everywhere: Supports all file types in VS Code
Usage
Hover Preview
Simply hover your cursor over a SMILES or SELFIES string in any file to see its structure. For SELFIES, the tooltip will show both the SELFIES notation and the corresponding SMILES.
Structure Viewer Panel
Build a collection of molecular structures for comparison and review with integrated property calculations:
Open the Structure Viewer:
- Press
Cmd+Shift+P (Mac) / Ctrl+Shift+P (Windows/Linux)
- Type "SMILES: Open Structure Viewer"
- Or use the keyboard shortcut:
Cmd+Option+V (Mac) / Ctrl+Alt+V (Windows/Linux)
Add structures:
- Place cursor on or near a SMILES or SELFIES string
- Press
Cmd+Option+V (Mac) / Ctrl+Alt+V (Windows/Linux)
- Or use Command Palette: "SMILES: Add to Structure Viewer"
View molecular properties:
Each structure card displays calculated physicochemical properties:
- MW: Molecular Weight (g/mol)
- LogP: Partition coefficient (lipophilicity)
- HBD: Hydrogen Bond Donors
- HBA: Hydrogen Bond Acceptors
- RotB: Rotatable Bonds
- TPSA: Topological Polar Surface Area (Ų)
Interact with structures:
- Click Copy to copy the SMILES to clipboard
- Click SVG to save the structure as an SVG file
- Click × to remove individual structures
- Click Clear All to remove all structures
- Click Export All to save all SMILES to a text file
The panel displays structures in a responsive grid layout with SMILES labels and properties. Duplicate SMILES are automatically prevented.
Example SMILES Strings
Molecules:
CCO // Ethanol
c1ccccc1 // Benzene
CC(=O)O // Acetic acid
CC(C)O // Isopropanol
OC(=O)[C@@H](https://github.com/milicazmarkovic/render-smiles/blob/HEAD/O)C // L-lactic acid (with stereochemistry)
CN1C=NC2=C1C(=O)N(C(=O)N2C)C // Caffeine
[Na+].[Cl-] // Sodium chloride (multi-component)
Cl.NNCCc1ccccc1 // Salt with organic component
SELFIES Strings:
[C][C][O] // Ethanol
[C][Ring1][=C][C][=C][C][=C][Ring1] // Benzene
[C][N][C][=N][C][=C][Ring1][Branch1][C][=Branch1][C][=O][N]... // Caffeine
[Cl].[N][N][C][C][C][=C][C][=C][C][=C][Ring1][=Branch1] // Multi-component (salt)
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:2]=[O:1]>>[C:2][OH:1] // Aldehyde reduction SMARTS
[O:1]=[C:2][O:3][C:4]>>[O:1]=[C:2][OH].[OH:3][C:4] // Ester hydrolysis SMARTS
Requirements
- Visual Studio Code 1.74.0 or higher
- ~15MB disk space for RDKit.js library
Supported Features
✅ Organic and inorganic molecules
✅ SELFIES notation (100% valid molecular representation)
✅ Aromatic systems with proper representation
✅ Ionic species and formal charges
✅ Multi-component systems (salts, mixtures with . separator)
✅ Stereochemistry (cis/trans, R/S configurations)
✅ Ring systems of any size
✅ Reaction SMILES (reactants>reagents>products)
✅ Reaction SMARTS (simple)
✅ Physicochemical property calculations (MW, LogP, HBD, HBA, RotB, TPSA)
✅ Export capabilities (Copy SMILES, Save SVG)
SELFIES Features:
- Automatic SELFIES detection and conversion to SMILES
- Support for complex polycyclic structures (e.g., caffeine, steroids)
- Multi-component SELFIES with dot notation (e.g.,
[Cl].[C][C][O])
- Stereochemistry support (backslash notation)
- Compatible with @milicazm/selfies-js v2.0.1
⚠️ 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)ONaBH4 → [BH4-].[Na+]- For conditions without structure, use:
reactants>>products
Technical Details
- Rendering Engine: RDKit.js v2025.3.4 (WebAssembly)
- SELFIES Library: @milicazm/selfies-js v2.0.1
- Extension Size: ~12-15MB (includes full RDKit module)
- Performance: Lazy loading - RDKit initializes only when needed
- Output Format: SVG with standardized bond lengths (30px)
- Property Calculations: Performed using RDKit molecular descriptors
- Molecule Display: 250×200px for molecules, 800×300px for reactions
Known Limitations
- The extension uses pattern matching to detect SMILES/SELFIES 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
- SELFIES from Python library with underscore syntax (e.g.,
[Branch1_2]) may not work with all features
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.
