Author: greg Landrum

# Getting started with RDKit-JS

## Drawing molecules

First we'll work with an SVG drawing:

var smiles = "CC(=O)Oc1ccccc1C(=O)O"; var mol = RDKitModule.get_mol(smiles); var dest = document.getElementById("example-1-output"); var svg = mol.get_svg(); dest.outerHTML = "<div id='drawing'>" + svg + "</div>";

As of v2020.09 of the RDKit we can do the same thing using the HTML5 canvas:

var smiles = "CC(=O)Oc1ccccc1C(=O)O"; var mol = RDKitModule.get_mol(smiles); var canvas = document.getElementById("canvas-2"); mol.draw_to_canvas(canvas, -1, -1);

We can do substructure searches and highlight the results:

var smiles = "CC(=O)Oc1ccccc1C(=O)O"; var mol = RDKitModule.get_mol(smiles); var smarts = "Oc1[c,n]cccc1"; var qmol = RDKitModule.get_qmol(smarts) var mdetails = mol.get_substruct_match(qmol) var canvas = document.getElementById("canvas-3"); mol.draw_to_canvas_with_highlights(canvas, mdetails);
You can also change drawing options and do highlighting with the SVG renderer, but we don't show it here. You just need to replace

    mol.draw_to_canvas_with_highlights(canvas, mdetails);

with

    var svg = mol.get_svg_with_highlights(mdetails);

The same call can be used to control drawing options or to manually set the atoms/bonds which should be highlighted:

var smiles = "CC(=O)Oc1ccccc1C(=O)O"; var mol = RDKitModule.get_mol(smiles); var mdetails = {}; mdetails['atoms']=[0,1,10]; mdetails['explicitMethyl'] = true; mdetails['addAtomIndices'] = true; mdetails['legend']='aspirin'; var canvas = document.getElementById("canvas-4"); mol.draw_to_canvas_with_highlights(canvas, JSON.stringify(mdetails));

and of course we can combine the two:

var smiles = "CC(=O)Oc1ccccc1C(=O)O"; var mol = RDKitModule.get_mol(smiles); var smarts = "O=C"; var qmol = RDKitModule.get_qmol(smarts) var mdetails = JSON.parse(mol.get_substruct_match(qmol)); mdetails['highlightColour'] = [1,0,1]; mdetails['legend']='aspirin'; var canvas = document.getElementById("canvas-5"); mol.draw_to_canvas_with_highlights(canvas, JSON.stringify(mdetails));
The currently supported options are:

1. `atoms`,`bonds`: lists to specify which atoms/bonds are highlighted
2. `width`,`height` `offsetx`,`offsety`: used to draw in a subregion of a canvas. Only supported by the HTML5 canvas drawer.
3. `legend`: the legend drawn under the molecule
4. These `MolDrawOptions` values: `atomLabelDeuteriumTritium, dummiesAreAttachments, circleAtoms, splitBonds, continuousHighlight, fillHighlights, highlightRadius, flagCloseContactsDist, includeAtomTags, clearBackground, legendFontSize, maxFontSize, minFontSize, annotationFontScale, fontFile, multipleBondOffset, padding, additionalAtomLabelPadding, noAtomLabels, bondLineWidth, scaleBondWidth, scaleHighlightBondWidth, highlightBondWidthMultiplier, prepareMolsBeforeDrawing, fixedScale, fixedBondLength, rotate, addAtomIndices, addBondIndices, isotopeLabels, dummyIsotopeLabels, addStereoAnnotation, showAllCIPLabels, atomHighlightsAreCircles, centreMoleculesBeforeDrawing, explicitMethyl, includeMetadata, includeRadicals, comicMode, variableBondWidthMultiplier, variableAtomRadius, includeChiralFlagLabel, simplifiedStereoGroupLabel, singleColourWedgeBonds`

It's often useful to generate molecule renderings where the coordinates of a core are constrained.

var smiles = "c1cnc(C)nc1C(=O)O"; var mol = RDKitModule.get_mol(smiles); var template = ` Mrv2014 10192005332D 0 0 0 0 0 999 V3000 M V30 BEGIN CTAB M V30 COUNTS 6 6 0 0 0 M V30 BEGIN ATOM M V30 1 C -5.7917 2.5817 0 0 M V30 2 N -7.1253 1.8117 0 0 M V30 3 C -7.1253 0.2716 0 0 M V30 4 C -5.7917 -0.4984 0 0 M V30 5 C -4.458 0.2716 0 0 M V30 6 N -4.458 1.8117 0 0 M V30 END ATOM M V30 BEGIN BOND M V30 1 1 1 2 M V30 2 2 2 3 M V30 3 1 3 4 M V30 4 2 4 5 M V30 5 1 5 6 M V30 6 2 1 6 M V30 END BOND M V30 END CTAB M END `; var qmol = RDKitModule.get_mol(template); mol.generate_aligned_coords(qmol,true); var tdetails = mol.get_substruct_match(qmol); var canvas = document.getElementById("canvas-6"); mol.draw_to_canvas_with_highlights(canvas,tdetails);

`get_mol` can be passed a JSON dictionary of boolean options. Currently supported options are: `sanitize, kekulize, removeHs, mergeQueryHs`

var smiles = "[*:1]ccc[*:2]"; var mol = RDKitModule.get_mol(smiles, JSON.stringify({ kekulize: false })); var canvas = document.getElementById("canvas-7"); mol.draw_to_canvas(canvas, -1, -1);

The `SubstructLibrary` functionality is exposed to enable running fast substructure searches taking advantage of pre-filtering through pattern fingerprints:

var sslib = new RDKitModule.SubstructLibrary(); var mol0 = RDKitModule.get_mol("Cc1cc(F)ccc1"); var mol1 = RDKitModule.get_mol("Clc1ccccn1"); sslib.add_trusted_smiles(mol0.get_smiles()); sslib.add_trusted_smiles(mol1.get_smiles()); var query = RDKitModule.get_mol(` MJ201100 2D 6 6 0 0 0 0 0 0 0 0999 V2000 -1.0491 0.7134 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 -1.7635 0.3009 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 -1.7635 -0.5241 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 -1.0491 -0.9366 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 -0.3346 -0.5241 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 -0.3346 0.3009 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0 2 3 1 0 0 0 0 5 6 2 0 0 0 0 1 2 2 0 0 0 0 6 1 1 0 0 0 0 3 4 2 0 0 0 0 4 5 1 0 0 0 0 M END`); matches = JSON.parse(sslib.get_matches(query)); var canvas_query = document.getElementById("canvas-8-query"); query.draw_to_canvas_with_highlights(canvas_query, JSON.stringify({ legend: 'query' })); var canvas_mol0 = document.getElementById("canvas-8-mol0"); mol0.draw_to_canvas_with_highlights(canvas_mol0, JSON.stringify({ legend: `mol0 matches: ${matches.includes(0)}` })); var canvas_mol1 = document.getElementById("canvas-8-mol1"); mol1.draw_to_canvas_with_highlights(canvas_mol1, JSON.stringify({ legend: `mol1 matches: ${matches.includes(1)}` }));