Molren

Molren

Turn plain-text chemistry into pictures, right inside your notes. Write a SMILES string (or a molfile, SDF, or reaction) in a code block and Molren draws the 2D structure inline — powered by RDKit.js, running entirely on your machine.

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

Molren is for anyone who keeps chemistry in Obsidian — students, chemists, researchers, teachers — and wants their notes to show the molecules, not just spell them out. Your structures stay as searchable, version-controllable text; the drawing is generated on the fly, offline, with nothing uploaded.

Install

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

• BRAT — to test the latest pre-release, add quiachonj/molren in the BRAT plugin.
• Manual — download main.js, manifest.json, and styles.css from a release into <your-vault>/.obsidian/plugins/molren/, then reload Obsidian.
• From source — see Development.

[!IMPORTANT] Molren is desktop-only and requires Obsidian 1.4.0 or later.

Usage

Molren reads fenced code blocks and draws what's inside. The fence's language tag tells Molren what kind of input it is.

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 picture updates. That's the whole idea; everything below is more of it.

Several molecules (a grid)

Put one SMILES per line for 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 comments, so you can annotate a block:

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

Stereochemistry

Stereo bonds and R/S / E/Z labels are drawn automatically (toggle in Settings):

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

Molfiles and SDF

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

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

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

Reactions

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

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

Not sure which fence? Use chem

A chem block auto-detects whether its contents are SMILES, a molfile, SDF, or a reaction — handy when pasting mixed content.

Fences at a glance

[!NOTE] In smiles and rxn blocks, text after the first space becomes a caption, # lines are comments, and a trailing CXSMILES |…| extension is kept as part of the structure. If a line can't be read, that block shows a small inline error (e.g. ⚠ Molren: invalid SMILES: …) — one bad line won't stop the others.

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

Settings

Settings → Community plugins → Molren:

Features

• 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/dark themes live, no re-render.
• High-quality depictions — CoordGen layouts with tuned draw options.
• Local & offline — RDKit runs in WebAssembly; nothing leaves your vault.
• Robust — inline errors instead of blank boxes, and cached rendering.

---

Architecture

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

Development

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.

Implementation notes

[!IMPORTANT] Molren is desktop-only (isDesktopOnly: true) and targets minAppVersion 1.4.0, so it uses the classic settings-tab API rather than the declarative one from 1.13.

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

Roadmap

• High-quality depictions (CoordGen + 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

Support

• ☕ Buy me a coffee
• 🌐 molren.amberlogica.com

License

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