- Open Access
ChemDoodle Web Components: HTML5 toolkit for chemical graphics, interfaces, and informatics
Journal of Cheminformaticsvolume 7, Article number: 35 (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.
Using web standard technology has a number of advantages over 3rd party plugins like Java applets and Flash:
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.
The 2D graphics engine in the ChemDoodle Web Components is based on HTML5 <canvas> technology. The <canvas> tag creates a bitmap drawing surface in an HTML document that is controllable with JS. CWC abstracts the <canvas> interface and provides a uniform codebase for drawing a wide range of 2D chemical graphics within 2D CWC components:
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.
While the ChemDoodle desktop application offers complete manual control over graphics placement and position, CWC is optimized for quick communication by defining algorithms that help to automatically layout graphics. For example, lone pairs and implicit hydrogens are automatically placed on attributable elements, standard bond angles are used by default, reaction equations are spaced evenly, and component contents are scaled up or down to fit the <canvas> dimensions. Styling of graphical elements can be highly customized from default settings via the CWC visual specifications API however. The visual specifications cover standard settings such as label font and color, and bond length and width, but also offer control over more unique settings such as lone pair size, label buffer (padding) size, dash length and spacing for dashed bonds, and much more (Figure 3A). A large number of molecular representation styles can be achieved by customizing the visual specifications, such as the popular ACS Document 1996 style. Conveniently, the 2D and 3D visual specifications can be defined globally to ensure a consistent, site-wide appearance, assigned to a specific component, or defined locally on individual atoms or bonds.
The 3D graphics engine is also based on the HTML5 <canvas> element, but uses the 3D WebGL context instead of the 2D context. WebGL is a graphics card technology that enables hardware accelerated rendering of graphics through the OpenGL pipeline. CWC provides a codebase for producing a large range of 3D graphics with 3D components:
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.
While the ChemDoodle Web Components offers high quality graphics output, it is mainly a toolkit for producing advanced interfaces for chemical data. Each ChemDoodle Web Component is configured to handle chemical data in a particular way, requiring graphics display, user interaction, animation, and/or other technical systems. For example, molecular data loaded into a Viewer component is displayed as a static 2D Lewis structure drawing, whereas the same data in a Rotator3D component appears as a 3D rotating molecule. The main use cases for the CWCs are:
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
Lab3D.io is an example of how the CWC interfaces can be used to create a chemistry web application. The goal of Lab3D.io (Figure 4) is to visualize organic chemistry reactions taught at the college level. The web app dynamically links different types of information that describe a chemical reaction. For each reaction there is
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
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–1363
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–1189
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.
About this article
- ChemDoodle Web Components
- Chemical graphics
- Structure editor
- Structure query