MX at Work: Building a Pure JavaScript Chemical Structure Editor

February 16, 2009

MX is a fast, lightweight cheminformatics toolkit that can be used in many programming environments. Previous articles have shown how easy it is to use MX in Ruby and Python, but that's just the beginning.

Because MX is written in Java and is both small and self-contained, it can also be compiled into pure JavaScript thanks to the Google Web Toolkit.

Duan Lian has taken this idea and run with it, creating a pure JavaScript chemical structure editor called jsMolEdit.

The new jsMolEdit demo page is impressive: it reads molfiles, writes molfiles, and supports interactive drawing features such as moving, editing atoms and bonds, zooming in/out, and atom/bond highlighting.

jsMolEdit doesn't yet support some important features needed by an interactive structure editor, but it's an amazing proof of concept.

My company sells an applet-based chemical structure editor called ChemWriter, from which the MX codebase was extracted. Although ChemWriter has been used successfully as a fast-loading, easy-to-use editor on a number of Web sites, one limitation is that users require a properly configured Java plugin for it to work. The possibility of deploying ChemWriter as a pure JavaScript tool is very attractive for this reason.

There are many other ways to apply the basic concept. For example, I recently wrote about JSpecView, a spectrum viewer/editor deployed as an applet.

Based on the jsMolEdit demonstration, it should be clear that this and many other interactive, pure JavaScript tools for chemistry are now well within reach.