RDKit.js - Vue + TS example

Introduction

Welcome to RDKit.js for Vue. If you didn't do it already, we first recommend to go through the JavaScript examples for a low-level overview of the RDKit.js API.

Overview

You can draw any molecule from SMILES dynamically with RDKit.js.

Loading renderer

MoleculeStructure

The examples below will mosty use the Vue component MoleculeStructure to render the examples. You can see the Vue implementation in the code below.

SVG rendering

You can render molecules using svg.

Loading renderer

Canvas rendering

You can also render molecules using the HTML Canvas API.

Loading renderer

Substructure Highlight

You can also highlight substructure of molecules with both the SVG and Canvas APIs.

Loading renderer

Multi-substructure Highlight

You can also highlight multiple substructures of molecules with SMILES, SMARTS and a combination of the two with dot notation.

Loading renderer

Substructure match

You can perform client-side substructure match.

Loading renderer

Additional Drawing Options

RDKit.js provides you a lot of options for drawing molecules. Checkout the JavaScript examples for the full list of available options.

Main structure

Substructure

Legend

Legend font size

Width

Height

Bond line width

Annotation font scale

Rotate

Highlight Colour

Background Colour (canvas only)

Legend Colour

Symbol Colour

SVG/Canvas Rendering (Uncheck for canvas rendering)

Loading renderer

Where to go next

You can visit the JavaScript examples here, which presents the low-level API of RDKit.js.

You can visit the React 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.

↑