Introduction

Welcome to RDKit.js, the official JavaScript distribution of cheminformatics functionality from the RDKit - a C++ library for cheminformatics.

Drawing molecules

First we'll work with an SVG drawing:

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

We can do substructure searches and highlight the results:

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:

and of course we can combine the two:

The currently supported options are:

  • atoms: list to specify which atoms are highlighted
  • bonds: list to specify which bonds are highlighted
  • width, height, offsetx, offsety: used to draw in a subregion of a canvas. Only supported by the HTML5 canvas drawer.
  • legend: the legend drawn under the molecule
  • The following MolDrawOptions:
    • addAtomIndices
    • addBondIndices
    • additionalAtomLabelPadding
    • addStereoAnnotation
    • annotationFontScale
    • atomHighlightsAreCircles
    • atomLabelDeuteriumTritium
    • atomLabels
    • backgroundColour
    • bondLineWidth
    • centreMoleculesBeforeDrawing
    • circleAtoms
    • clearBackground
    • continuousHighlight
    • dummiesAreAttachments
    • explicitMethyl
    • fillHighlights
    • fixedBondLength
    • fixedScale
    • flagCloseContactsDist
    • fontFile
    • highlightBondWidthMultiplier
    • highlightColour
    • highlightRadius
    • includeAtomTags
    • includeMetadata
    • includeRadicals
    • legendColour
    • legendFontSize
    • maxFontSize
    • minFontSize
    • multipleBondOffset
    • padding
    • prepareMolsBeforeDrawing
    • rotate
    • scaleBondWidth
    • scaleHighlightBondWidth
    • symbolColour

Also, it's often useful to generate molecule renderings where the coordinates of a core is constrained:

You can compute a series of descriptors for a given molecule:

Finally, you can generate a series of identifiers for a given molecule:

Where to go next?

You can visit the React examples here, which include more advanced and interactive examples.

You can visit the Vue examples here, which include more advanced and interactive examples.

You can visit the Angular examples here, which include more advanced and interactive examples.

You can also checkout the legacy getting started and demo.