Molren

Molren renders 2D chemical structures from SMILES in your Obsidian notes. Write a SMILES string (or a molfile, SDF, or reaction) in a fenced code block and Molren draws the structure inline. It uses RDKit.js, which runs locally, so nothing is uploaded.

Website: molren.amberlogica.com. Support: Buy me a coffee.

The structures stay as plain text, so they stay searchable and work with version control. The image is generated on the fly, offline.

In Obsidian: Settings → Community plugins → Browse, search Molren, then Install and Enable.

Molren reads fenced code blocks and draws what's inside. The language tag on the fence tells Molren what kind of input to expect.

1. In any note, add a code block tagged smiles with one structure:

   ```smiles
   CCO
   ```

2. Switch to Reading or Live Preview. Molren draws ethanol inline.

3. Edit the SMILES and the image updates.

Put one SMILES per line to get a responsive grid, and add a caption after the first space:

```smiles
CCO Ethanol
CC(=O)O Acetic acid
c1ccccc1 Benzene
```

Lines starting with # are treated as comments, so you can annotate a block:

```smiles
# Common solvents
CCO Ethanol
CC(C)=O Acetone
```

Stereo bonds and R/S and E/Z labels are drawn automatically. You can turn the labels off in Settings.

```smiles
C[C@H](N)C(=O)O L-alanine
```

Use a mol block for a single molfile. Molren keeps its authored coordinates. Use an sdf block for a multi-record SDF, where each record becomes a card and its title line becomes the caption.

```mol
  (paste the full molblock here, ending in "M  END")
```

```sdf
  (paste SDF records separated by $$$$)
```

Use a rxn block for reaction SMILES (reactants>>products, or reactants>agents>products). Reactions render as wide, full-width rows.

```rxn
CC(=O)O>[H+]>CC(=O)OCC Fischer esterification
```

A chem block auto-detects whether its contents are SMILES, a molfile, SDF, or a reaction. It's useful when pasting mixed content.

New to SMILES? Copy the "Canonical SMILES" from a compound's PubChem or Wikipedia page, or draw a structure in a free editor like Ketcher and export SMILES.

Settings → Community plugins → Molren:

• Multiple input formats: SMILES, molfile/molblock, SDF, and reactions, plus an auto-detecting chem fence.
• Grids with captions: one structure per line, laid out responsively.
• Stereochemistry: R/S and E/Z annotations, toggleable.
• Theme-aware: structures recolor for light and dark themes live, with no re-render.
• CoordGen layouts with tuned draw options.
• Local and offline: RDKit runs in WebAssembly, so nothing leaves your vault.
• Inline errors instead of blank boxes, plus cached rendering.

fence (smiles│mol│sdf│rxn│chem)
      │
      ▼
 parse.ts  →  detect format, split into structure specs (+ captions)
      │
      ▼
  svg.ts   →  RDKit → SVG (molecules + reactions), theme recolor
      │
      ▼
renderer.ts →  layout (single│grid│reaction stack), cache, mount

npm install      # installs deps and pulls in the RDKit wasm
npm run dev      # esbuild watch → main.js (wasm inlined)
npm test         # vitest
npm run lint     # eslint (incl. Obsidian plugin rules)
npm run format   # prettier --write
npm run build    # type-check + production bundle
npm run check    # format:check + lint + test + build (what CI runs)

To develop against a real vault, symlink molren/ into a test vault's .obsidian/plugins/, then reload Obsidian (Ctrl+R) after each build.

1. wasm delivery. The RDKit .wasm (~7 MB) is inlined into main.js as base64 (esbuild base64 loader), decoded with atob at load, and passed to initRDKitModule({ wasmBinary }). This is required because community-store and BRAT installs only download main.js/manifest.json/styles.css. Extra release assets aren't fetched, so the wasm can't ship as a separate file.
2. Coordinates. SMILES carry none, so Molren generates a CoordGen 2D layout. Molfiles and SDF bring their own, which are preserved. The choice is made per structure via RDKit's has_coords(), not by fence.
3. Theming. RDKit bakes fixed colors into the SVG. Molren rewrites any dark near-grayscale "ink" (bonds, carbons, dummy atoms drawn as #191919, annotations) plus O/N as CSS variables, so one cached SVG adapts to light and dark live.
4. SVG insertion. Parsed via DOMParser + importNode (not innerHTML) per Obsidian's guidelines.
5. RDKit types. The shipped @rdkit/rdkit types omit the reaction API and the CJS default export, so both are declared locally in src/rdkit.ts.

• CoordGen depictions with tuned draw options
• Multiple structures per block (grid)
• molfile / SDF input
• Reaction rendering
• Theme-aware (dark mode) coloring
• Interactive structure editor (evaluating Ketcher vs Kekule.js)
• Optional 3D view (Mol* / 3Dmol.js) for macromolecules

• Buy me a coffee
• molren.amberlogica.com

MIT. RDKit.js is distributed under the BSD-3-Clause license.