WebMolKit is an open source cheminformatics toolkit for the web. Written in TypeScript (cross-compiled to JavaScript), it provides an interactive sketcher, molecule and datasheet file handling, reaction support, and a variety of other features.

Overview

Sketcher

Embedding

Status

Overview


WebMolKit is a cheminformatics toolkit built with the TypeScript language, which cross-compiles to JavaScript, the native runtime environment of the web. It is hosted as an open project on GitHub. Because all modern platforms offer a standards-compliant web browser this means it can run anywhere, but it can also be wrapped within a desktop framework using Electron (e.g. SketchEl2) or embedded within native mobile apps.

Sketcher


Embedding


The application shown above should provide a live functioning demo of the sketcher. The JavaScript engine is hosted by RawGit, which reflects the latest content on the open GitHub page. There is a very similar embedded example within the project itself, but it takes a bit more work to try it out in real time.

To embed the sketcher in a page, the first thing to do is make sure that the WebMolKit library is included, and jQuery as well, if you don't already have it:

<script src="{BASE}/bin/jquery.js" type="text/javascript"></script>
<script src="{BASE}/bin/webmolkit-build.js" type="text/javascript"></script>

where {BASE} is wherever the binary files are stored, which could be set to http://cdn.rawgit.com/aclarkxyz/web_molkit/master if you want to mirror the latest version on GitHub.

Setting up the sketcher takes just a few lines of code:

var wmk = WebMolKit;
wmk.initWebMolKit('{BASE}/res');
var mol = wmk.Molecule.fromString({MOLECULE});
var sketcher = new wmk.Sketcher(null);
sketcher.setSize(800, 500);
sketcher.defineMolecule(mol);
sketcher.setup(() => sketcher.render($('#sketcher')));

The first line defines wmk as the WebMolKit namespace. Before any of its functionality is invoked, it is necessary to let it know where to find its resources, which are also part of the GitHub repository. Setting a default molecule is optional.

For a more complete example, look at the raw source of this HTML file, or see the raw demo file in the repository.

Status


As of May 2018, the WebMolKit library and its sketcher are moderately mature, but it has only been used in a handful of projects. If you are interested in using it and run into trouble, send questions or feedback to info@molmatinf.com.

See Also


Mobile Molecular DataSheet (iOS), Products