ChemDoodle Web Components: HTML5 toolkit for chemical graphics, interfaces, and informatics
© Burger. 2015
Received: 21 June 2015
Accepted: 3 July 2015
Published: 16 July 2015
The ChemDoodle Web Components technology stack and features
The ChemDoodle Web Components library, released in 2009, is the first chemistry toolkit for structure viewing and editing that is originally built using only web standard technologies, HTML5, CSS, and JS, and is accordingly supported by all modern desktop and mobile browsers. CWC is made available under the free and open source, GNU GPLv3 license and is accompanied by detailed documentation and commercial support packages. The CWC source code follows JS best practices to ensure maintainability and cross-compatibility with other libraries and frameworks.
installation or updates are not required since JS is enabled in browsers by default,
JS applications are quick to load without the overhead of 3rd party plugins,
there are fewer security concerns since the code is sand-boxed in the browser,
the deep integration of HTML, CSS and JS in the browser creates a seamless user experience, and
the ChemDoodle Web Components library can be loaded and displayed wherever a HTML5 engine is available, including WYSIWIG text editors, Apple’s Cocoa development kit, and mobile app webviews.
Beyond rendering 2D and 3D chemical graphics, the library also provides access to cheminformatics algorithms, chemical file input/output and manipulation, and a toolset for chemistry web application development through a component system that gives the library its name. The components of the CWC library are specialized HTML5 <canvas> classes that expose a high-level API for quick loading and viewing of chemical data, as well as providing utility functions and multi-device event handling. When first released, CWC comprised of 6 components: the Viewer, Rotator, Transformer, MolGrabber, File Loader, and Doodler (pre-cursor to Sketcher) components. Averaging a yearly version release cycle, CWC has now grown to 20 components including ones for displaying chemical spectra, 3D WebGL graphics, and animations. The latest update, version 7, introduces new 3D features including Pipe and Plank protein models, full support for high DPI and retina display devices, query interface tools for advanced chemical searches, and structure spectrum correlation utilities.
When displayed, atom labels can show standard element labels or any alternative symbol.
Ionic/zero order, half, single, double, triple, and resonance chemical bond types, and protruding and recessed stereochemical bonds are available.
Charges, radicals and lone electron pairs are positioned automatically on attributed atoms.
Advanced query notation can be displayed on atoms or bonds to represent sets of molecules.
Synthetic, retrosynthetic, resonance and equilibrium arrows can have text placed above or below them.
Single headed (one electron), double headed (two electron) and middle merging pusher (curly) arrows can be added between selected atoms and bonds. Arrows flow around existing structures automatically.
Customizable brackets can be placed around part of or a whole molecule to indicate global charges, multiplicity or polymer units.
In addition to molecular structure graphics, spectrum components can display NMR, IR, UV/Vis and mass spectrometry spectra. Control over the plot colors, domain, range, gridlines, tick marks, and title and axes label properties is provided, and integration curves can be generated for NMR spectra. An interactive periodic table component is also available.
A text system can display labels for atoms and residues or any arbitrary text.
Molecular representations include ball-and-stick, stick, van der Waals spheres (CPK), wireframe, and line.
Ionic/zero order, half, single, double and triple bonds are available.
Nucleic acids appear as ladder and rung representations.
Proteins can be displayed as backbone, ribbon, or pipe and plank representations. Ribbon and backbone representations can be colored by chain or by residue using a number of different color presets: amino, shapely, polarity, acidity, and rainbow.
Water molecules can be displayed as spheres or stars, or hidden.
Crystallographic structures are shown in periodic unit cells, and can be built into supercells.
3D shapes for distance, angle, and torsion measurements, and a compass to indicate current orientation can be added to 3D scenes.
The visual specifications for 3D graphics, like those for 2D graphics, provide broad control over the appearance of the scene, including atom, bond and residue size and material; light position and color; and fog effects (Figure 3B, C). In addition, the scene can be displayed by a perspective or orthographic projection. Display of 2D and 3D graphics on high-resolution displays, such as the Apple Retina display, is fully supported by CWC.
rendering different types of chemical information, e.g. chemical structures and spectra,
providing a specific user experience, e.g. rotating and scaling a molecule, visualizing a process with an animation, or highlighting peaks from spectra,
enabling advanced user input, e.g. sketching molecules, and
rendering 3D scenes using WebGL, e.g. to visualize a complex protein structure in 3D.
Because CWC is open source, it is possible to modify the source code to create custom component functionality or create novel component plugins. The component framework is designed to be composable to facilitate rapid development. There are four base classes that form the building blocks of the twenty components: the Canvas, Canvas3D, AnimatorCanvas, and SpectrumCanvas classes. These base classes provide core functions such as drawing molecules to <canvas> instances and event handling for desktop and mobile devices. Each component takes one or more of the four base classes as its prototype and then adds additional properties to create custom functionality. For example, the Rotator component is implemented by extending the Canvas and AnimatorCanvas classes. In the same way, developers can extend core building blocks to get basic behavior ‘for free’ and focus on creating desired component functionality instead.
CWC provides two advanced interfaces as additional plugins: the Sketcher component, a fully functional 2D chemical sketcher, and the Editor3D component, an interface for exploring 3D molecular models. Of the CWC components, the Sketcher component is the most widely used, having the largest number of applications. Structures drawn in the sketcher can be saved as images, exported to another component, used to query chemical databases, or perform calculations. Three variations of the Sketcher component exist: a single molecule sketcher with a simplified interface, a full-featured sketcher for drawing complex figures, and a query sketcher for chemical structure searches. The Editor3D component shares a number of features with the Sketcher, including ‘Open’, ‘Save’, ‘Search’ and ‘Calculate’ functionality, allowing users to load structures and obtain basic chemical property data. In addition, the Editor3D component enables distance, angle, and torsion measurements, and creates 3D visualizations for these measurements, which can useful for students learning molecular geometry.
The sketchers and 3D editor are installed separately from other components as a plugin to the CWC library (Figure 2), which avoids extraneous downloads for applications that do not need those functions. As with the other components, the Sketcher and Editor3D interfaces can be used on both desktop and mobile devices.
The ChemDoodle Web Components API includes a wide range of cheminformatics algorithms for handling chemical data. Included are algorithms for deducing bonds and hydrogens, splitting disconnected molecule data structures, copying molecules, and an extensible system for performing calculations and ring searches. These algorithms are based on a common molecule data structure that stores atom, bond and ring data structures in arrays. Molecules can be created manually using these data structures, or built from a data source, such as a MOL file.
If more functionality is desired, the ChemDoodle Web Components can also access the full desktop ChemDoodle API via iChemLabs cloud services. Through these cloud services, developers can access tools for comparing molecules, calculating properties, accessing databases, working with other formats such as ICL, ChemDraw CDX and SMILES, generating and parsing IUPAC names, simulating spectra and more. Access to iChemLabs cloud services is provided for free to academic customers.
Lab3D.io: a case study
a word equation,
a structure equation,
a plot of energy vs. reaction coordinate,
contextual descriptions, and
a 3D interactive animation.
A Viewer component is used to display the chemical structure equation. The equation, drawn in a Sketcher component, was exported as ChemDoodle JSON for loading into the Viewer. Additional graphical elements, such as plus signs and transition state symbols are added by implementing the drawChildExtras function of the CWC API. The Movie3D component is used to show the animation and to expose hooks for additional interactive functionality. Data for the 3D animations were modeled in Spartan ‘10 (Wavefunction Inc.) and GAMESS [4, 5] molecular modeling programs. The MDL SD file containing the sequence of structures is loaded into the Movie3D component. Each molecule loaded into a Movie3D component represents a frame in the animation. To lower molecular modeling time but still produce a smooth animation a script was written that extends the molecular frame array by calculating an average structure for every pair of molecules, and inserting that molecule into the sequence. As the 3D animation plays, the user can explore the mechanism by rotating, translating, and scaling the scene, functionality provided by default by Movie3D. Media controls and a slider leverage the Movie3D component API to offer fine control over the position of the animation. For example, frameNumber, an exposed Movie3D component variable that keeps track of the next animation frame (molecule), is used to update the slider position and highlighted text description as the animation plays. Finally, molecular representation and element labels can be toggled on the fly with scripts that modify the component’s visual specifications settings.
ChemDoodle Web Components is a very useful toolkit for chemical graphics display, cheminformatics, and chemistry app development for the web. Because it uses web standard technology, CWC is a good choice for producing new chemistry content for the web. The library’s ease of use, broad browser compatibility, application across numerous chemical disciplines, high-quality graphics, robust and well-documented API, and open source licensing should lead to its popularity in academic, government, and industrial settings.
application programming interface
crystallographic information file
chemical markup language
Corey, Pauling and Koltun
ChemDoodle Web Components
dots per inch
general atomic and molecular electronic structure system
GNU’s not Unix!
general public license
hypertext markup language
International Union of Pure and Applied Chemistry
Joint Committee on Atomic and Molecular Physical Data
Java molecular editor
limited liability company
massive open online course
nuclear magnetic resonance
open graphics library
protein data bank
MDL molefile reaction format
simplified molecular-input line entry system
web graphics library
what you see is what you get
MB holds a MSc in Chemistry and in Biomedical Communications. Lab3D was created towards the degree requirements of the latter. MB currently works at Imagineeringart.com Inc., as a scientific illustrator/animator.
MB would like to thank CIHR and the Vesalius Trust for funding Lab3D development, and iChemLabs for being available to answer questions during the preparation of the manuscript.
Compliance with ethical guidelines
Competing interests The author declares that she has no competing interests.
Open AccessThis article is distributed under the terms of the Creative Commons Attribution 4.0 International License (http://creativecommons.org/licenses/by/4.0/), which permits unrestricted use, distribution, and reproduction in any medium, provided you give appropriate credit to the original author(s) and the source, provide a link to the Creative Commons license, and indicate if changes were made. The Creative Commons Public Domain Dedication waiver (http://creativecommons.org/publicdomain/zero/1.0/) applies to the data made available in this article, unless otherwise stated.
- Martz E Version history of MDL Chime [http://www.umass.edu/microbio/chime/chimvers.htm]
- Jmol: an open-source Java viewer for chemical structures in 3D [http://www.jmol.org/]
- JME molecular editor [http://www.molinspiration.com/jme/]
- Schmidt MW, Baldridge KK, Boatz JA, Elbert ST, Gordon MS, Jensen JH et al (1993) General atomic and molecular electronic structure system. J Comput Chem 14:1347–1363View ArticleGoogle Scholar
- Gordon MS, Schmidt MW (2005) Advances in electronic structure theory: GAMESS a decade later. In: Dykstra CE, Frenking G, Kim KS, Scuseria GE (eds) Theory and applications of computational chemistry: the first forty years. Elsevier, Amsterdam, pp 1167–1189View ArticleGoogle Scholar