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:
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
offsety: used to draw in a subregion of a canvas. Only supported by the HTML5 canvas drawer.
legend: the legend drawn under the molecule
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.