MolView — SMILES & SELFIES Preview

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, @milicazm/selfies-js for SELFIES support, and Indigo for automatic atom mapping - 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
• Mapped-reaction analysis: For atom-mapped reactions, highlights broken (🔴), formed (🟢), and order-changed (🟠) bonds and reports a summary
• Automatic atom mapping: Unmapped reactions are mapped on the fly using the Indigo toolkit
• Retrosynthesis templates: Extract SMARTS retro-templates from mapped reactions in the library-compatible rdchiral style (ASKCOS / AiZynthFinder) or a compact simple style
• SMARTS filter for reactions: Substructure filters apply per-side (reactant / agent / product), highlight matched atoms directly in the reaction SVG with a purple halo, and show a badge indicating where the pattern hits
• Simple SMARTS support: Visualize 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:

1. 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)

2. 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"

3. 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 (Ų)

4. 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.

Mapped Reactions & Retro-Templates

When you hover over or add a reaction SMILES with atom-map numbers (e.g. [C:1]...>>...[C:1]...), the extension analyzes the reaction center and shows:

• Colored highlights on the reactant and product structures:
  • 🔴 Red — bonds broken from reactant → product
  • 🟢 Green — bonds formed
  • 🟠 Orange — bonds whose order changed (e.g. single → double)
• Reaction center summary — a count of broken / formed / changed bonds. Bonds that live entirely inside a departing leaving group (e.g. the six internal bonds of a Boc group during Boc deprotection) are excluded from the count.
• Mapping validation — if two atoms share a map number but have different elements, the analyzer flags it.
• Retro-template — a SMARTS retrosynthesis template extracted from the reaction, with a "Show template highlight" toggle on each reaction card.

If your reaction is unmapped, the extension will atom-map it using the Indigo toolkit (best-of-N over reactant orderings, scored by chemically meaningful bond changes).

SMARTS Substructure Filter

Highlight a substructure across every hover preview and Structure Viewer card:

1. Set a pattern in any of these ways:
   • Click the SMARTS: … item in the status bar (bottom-right).
   • Command Palette: Cmd+Shift+P / Ctrl+Shift+P → "SMILES: Set SMARTS Substructure Filter".
   • In the Structure Viewer, type into the SMARTS bar at the top and click Apply (or press Enter).
2. See matches:
   • Matching atoms and bonds are drawn with a purple halo in the structure SVG.
   • For reactions, the filter is applied per side (reactant / agent / product), and a badge shows where it hit (e.g. ✓ reactant + product).
   • Molecule cards show a ✓ Match / ✗ No match badge.
3. Clear the filter by clicking Clear in the viewer, or by setting an empty pattern.

Example patterns: c1ccccc1 (benzene ring), [OH] (hydroxyl), C(=O)N (amide).

Settings

All settings live under the smilesRenderer.* namespace. To change them:

• Settings UI: open Settings with Cmd+, (Mac) / Ctrl+, (Windows/Linux), then search for smilesRenderer (or browse to Extensions → MolView - SMILES & SELFIES Preview).

• Command Palette: Cmd+Shift+P / Ctrl+Shift+P → "Preferences: Open Settings (UI)".

• settings.json: Cmd+Shift+P / Ctrl+Shift+P → "Preferences: Open User Settings (JSON)" and add the keys directly, e.g.:

  {
    "smilesRenderer.retroTemplateRadius": 2,
    "smilesRenderer.templateStyle": "rdchiral",
    "smilesRenderer.canonicalizeTemplate": true
  }
  

Settings can be scoped to User (all projects) or Workspace (current project only) via the tabs at the top of the Settings UI.

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

Mapped reactions (produce retro-templates):

[CH3:1][C:2](https://github.com/milicazmarkovic/render-smiles/blob/HEAD/=[O:3])[OH:4].[CH3:5][OH:6]>>[CH3:1][C:2](https://github.com/milicazmarkovic/render-smiles/blob/HEAD/=[O:3])[O:6][CH3:5].[OH2:4]   // Esterification
[NH2:1][C:2](https://github.com/milicazmarkovic/render-smiles/blob/HEAD/[CH3:3])=[O:4]>>[NH3:1].[C:2](https://github.com/milicazmarkovic/render-smiles/blob/HEAD/=[O:4])([CH3:3])[OH]                       // Amide hydrolysis

Requirements

• Visual Studio Code 1.74.0 or higher
• ~15–20MB disk space for the bundled RDKit.js and Indigo modules

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)
✅ Atom-mapped reaction analysis (reaction-center highlighting, bond-change counts)
✅ Automatic atom mapping via Indigo for unmapped reactions
✅ Retrosynthesis template extraction (simple and rdchiral styles)
✅ 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)O
• NaBH4 → [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
• Atom Mapping: indigo-ketcher v1.45.1 (WebAssembly)
• Extension Size: ~15-20MB (includes full RDKit and Indigo modules)
• Performance: Lazy loading - RDKit and Indigo initialize 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 (mapping will fail for reactions containing these)
• 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

Reactions & Atom Mapping

• Automatic mapping is heuristic. Indigo's automap can mis-assign atoms when a reaction contains multiple look-alike fragments (e.g. two similar aryl rings in a Suzuki coupling). Best-of-N over reactant orderings mitigates this, but the search is capped (default 6 permutations), so reactions with many equivalent reactants may still be mapped incorrectly.
• Redox / valence-changing centers may be left unmapped. By default Indigo's automap considers atom charge and valence when matching (its ignore_charges / ignore_valence options exist precisely to relax this). As a result, an atom whose charge or valence changes drastically may not be matched to its counterpart and can be dropped from the mapping entirely. When that happens the reacting atom carries no map number, so the reaction center comes up empty ("no bond changes detected") even though a real change occurred. Affected families include nitro → amine, azide → amine, nitrile → amine, N-oxide and sulfoxide/sulfone reduction/oxidation, diazonium chemistry, and ozonolysis (C=C cleaved to two C=O). Supplying a pre-mapped reaction SMILES (with explicit [X:n] labels) sidesteps this.
• Symmetric-atom ambiguity. When equivalent ring atoms get their map numbers swapped between sides, the analyzer detects and masks the artifact, but surfaces an "ambiguous atom mapping" note — re-mapping may yield a cleaner template.
• Inconsistent mappings are not analyzed. If the same map number labels different elements on the two sides, reaction-center analysis is flagged as unreliable and retro-template extraction is skipped.
• Atom map 0 means "unmapped". RDKit (used for parsing) represents an unset atom-map as 0, so an atom written as [C:0] is indistinguishable from [C] — it won't appear in the reaction center or the retro-template. Use 1 or higher for atoms you want tracked.
• Stereochemistry is not captured. Reaction-center analysis and retro-templates encode connectivity and atom environment (element, H-count, degree, charge, aromaticity) only — chirality (@/@@) and double-bond geometry (/, \) are ignored.
• Special-group promotion uses a fixed list. Only a curated set of reactive groups (carbonyls, sulfonyls, phosphoryls, halogens, …) is auto-promoted into templates; reactive motifs outside this set won't be locked in as intact environments.
• Reagents/agents must be valid SMILES. Text conditions like "NaBH4" or "reflux" are not parsed — use proper SMILES, or the empty reactants>>products form for structure-free conditions.

Release Notes

0.1.0

• Atom-mapped reaction analysis with reaction-center highlighting (broken / formed / changed bonds)
• Automatic atom mapping for unmapped reactions via Indigo (best-of-N over reactant orderings)
• Retrosynthesis template extraction (rdchiral style by default, simple also available) with configurable radius and optional canonical renumbering (default on)
• SMARTS substructure filter for molecules and reactions, with per-side matching and purple-halo highlighting
• Correct handling of leaving groups (e.g. Boc removal reports 1 broken bond, not 7)
• Detection and masking of symmetric-atom mapping ambiguities (e.g. equivalent ring atoms swapped between sides), with an "ambiguous atom mapping" note
• Full-width reaction cards in the Structure Viewer so long reaction schemes aren't squeezed into narrow columns
• 3 new settings: retroTemplateRadius, templateStyle, canonicalizeTemplate
• 262 unit tests across 5 suites

0.0.7

• Keyboard shortcut changed to Cmd+Option+V (Mac) / Ctrl+Alt+V (Windows/Linux) to avoid conflicts
• Fixed Structure Viewer not auto-opening on the shortcut

0.0.6

• SELFIES support with automatic detection and conversion to SMILES
• Physicochemical properties on each card: MW, LogP, HBD, HBA, RotB, TPSA
• Interactive actions: Copy SMILES, Save as SVG, per-card and Clear All / Export All
• Multi-component molecule support (salts, mixtures with .)

0.0.5

• Simple reaction SMARTS support with atom mapping
• Improved reaction rendering (Kekulé structures, coordinate generation)

0.0.4

• Performance: hover debouncing, SMILES canonicalization caching, cache invalidation on edits
• Added extension icon

0.0.2 (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, and Indigo (via indigo-ketcher) for atom mapping — both industry-standard open-source cheminformatics toolkits.