Adding Jmol to an Angular Application

We recently starting working on an educational website for chemistry students. The site we’re creating  will let users choose a molecule and perform calculations on it. We want to graphically display the selected molecule, and to do this we have decided to use Jmol.  If you’re unfamiliar with Jmol, its worth getting to know.  Originally developed 17 years ago, JMOL  is a very mature, actively maintained and very widely used open-source interactive molecule viewer.  When you need a molecule viewer, you should use Jmol unless you have a very good reason not to.

The “J” in Jmol stands for Java, but we want to use it in a web application. Fortunately the Jmol people have created a Javascript version just for this purpose. You can find it inside the Jmol sources, under the jsmol directory.

Our web framework of choice is Angular . Jmol, unfortunately is not entirely up to date with current frontend development practices. We needed to help it a little so that it works in an Angular application. The good news is – it’s extremely doable.

In a series of posts we’re going to describe the various things we had to do to make Jmol work in an Angular application.

Stay tuned…..


  1. quentin74 on April 2, 2020 at 6:21 am

    Hi, i tri to use Jmol ( javascript version) in an angular app, but when i use domElement.innerHTML = Jmol.getAppletHtml(\”jmol2\”, info), it doesnt insert the canvas in my page, it only add the mol spiner,
    Do you know how to fix this issue,

    • SiteAdmin on April 2, 2020 at 7:39 am


      Thanks for your comment. We might be able to help with your issue, but in order to fully answer the question we need to see the code. Is it open source on Github or could you post the relevant lines? Also, we’d love to know what university you’re with if you don’t mind sharing.

      Thanks again for being in touch!

Leave a Comment