Developer API

Introduction

MolView has an embeddable sketcher web component that can be used in other applications and platforms, including in vanilla JS and React codebases. By default this sketcher is only accessible for subscribed MolView users. If you have a subscription, then you can immediately use the sketcher to build personal and demo applications. To enable other people to use the sketcher in your website or app, there are two options:

• Each user must get a MolView subscription to unlock the sketcher.
• Contact us to get a license for your production domain and unlocking the sketcher for all users.

Obtain a client ID

To use the API you need a client ID.

1. Sign in or Sign up.
2. Go to Account settings.
3. Scroll down to Developer tools and request a client ID.

Import JavaScript module

The client ID has the shape of a UUID. You must specify it in the URL of the MolView JavaScript module:

<script type="module" src="https://app.molview.com/api.js?id={CLIENT_ID}"></script>

You can also import the module in JavaScript to get direct access to the Sketcher class:

import { Sketcher } from 'https://app.molview.com/api.js?id={CLIENT_ID}'

Create sketcher component

There are two ways to instantiate the sketcher: in HTML or in JavaScript. In HTML the tag name of the sketcher is <molview-sketcher>. Inside this element an iframe will be created embedding the sketcher. You can query and style this element like any other HTML element, except that position is set to relative to position the inner iframe. We recommend that you wrap the element in another container to add styling.

<molview-sketcher id="sketcher"></molview-sketcher>

Through JavaScript

You can declare the element in HTML and then use querySelector to get a reference, or you can create the element in JavaScript and then insert it into the document:

import { Sketcher } from 'https://app.molview.com/api.js?id={CLIENT_ID}'

const sketcher = new Sketcher()
document.body.append(sketcher)

Save and load

The sketcher uses its own data model for chemical diagrams. You can use the save and load methods to save and load this data as a plain JavaScript object. For example, the following snippet obtains the IDs of all marked atoms:

const diagram = await sketcher.save()

const marked_atoms = diagram.atoms.filter(atom => atom.mark !== undefined)
const marked_atom_ids = marked_atoms.map(atom => atom.id)

You can also manipulate the data structure and load it back into the sketcher:

const diagram = await sketcher.save()

diagram.bonds.forEach(bond => bond.mark = undefined)

await sketcher.load(diagram)

For details about the data model, see the Diagram reference.

Import and export

You can import and export several formats, such as a SMILES string:

console.log(await sketcher.export('smiles'))

For more details, see the Sketcher reference

Customization

You can customize the toolbars and diagram stying through the set_props method. The toolbar is configured by the Toolset interface, which configures the editing capabilities that the sketcher should expose (which encompasses the toolbar but also certain gestures and keyboard interactions). You can find more information about the customizable properties here:

• Style interface
• Toolset interface

Example 1: Serif font without coloring

await sketcher.set_props({
  style: {
    typeface: 'serif',
    atom_color: 'black'
  }
})

Example 2: Only mark atoms

await sketcher.set_props({
  toolset: {
    atom: {
      mark: true
    }
  }
})

Example 3: Only create electron arrows

await sketcher.set_props({
  toolset: {
    general: {
      create: true
    },
    arrow: {
      type: ['electron_single', 'electron_pair']
    }
  }
})