This is part of the web_molkit hosted on GitHib.

The sketcher is part of the WebMolKit project, which has been open source for quite some time: it has a lot of molecular manipulation functionality as well as the ability to draw molecules, and is one of the most advanced cheminformatics projects that is 100% web based, being written in TypeScript and cross-compiled to work on any JavaScript-based runtime.

The WebMolKit library may be used by anyone under the terms set by the general Gnu Public License (v3.0).

 

Version 9 is a major update to the ChemDoodle Web Components library. There has been a complete refactor of the library to ES6 best standards. The sketcher and editor UIs have been improved with SVG button icons. New Cloud features include advanced CIP stereochemistry support, reaction equation balancing, and stereochemistry enforcement in mechanism matching. The ChemDoodle Web Components website has been recreated to be responsive, much easier to read, and support high-DPI displays for clarity.

The website has some great examples of what can be generated.

 

In the dim and distant past the only option for molecules (particularly biomolecules) was a Unix workstation and specialist software, with the advent of web technologies a number of Java applets were developed that enabled users to visualise proteins etc within the web browser. However, due to security concerns java applets have now been discontinued and a range of javascript based molecular viewers have been developed. This is a list of the viewers that I have come across, please feel free to contact me with any I've missed.

A list of Javascript/WebGL molecule viewers

Structure displayed using 3Dmol.js.

Hide surface Display Labels

Mouse Controls

Movement		Mouse Input		Touch Input
Rotation		Primary Mouse Button		Single touch
Translation		Middle Mouse Button or Ctrl+Primary		Triple touch
Zoom		Scroll Wheel or Second Mouse Button or Shift+Primary		Pinch (double touch)
Slab		Ctrl+Second		Not Available

You might also be interested in these pages

Open Source Cheminformatics Tookits

Open Source Python Data Science Libraries

 

Just got this message..

The HELM project team is happy to announce the release of an open source web-editor to complement it's existing suite of software. This web-editor is designed to support organisations that do not wish to deploy a thick client. This is an initial release and the functionality will be extended in further releases during 2017.

HELM Web Editor brings HELM’s industry standard biomolecular representation to the browser, greatly enhancing the deployability of the technology for its adopters

Current functionality includes:

• HELM 1 support
• The ability to use the supplied monomer libraries to draw macromolecules, visualise them as sequences or atom/bond structures and calculate properties.
• Import/export of HELM and xHELM.
• A limited set of rules that allow you to manipulate the structure.

 

An interesting article from ChemAxon on the history and demise of Java Applets.

 

A nice comparison of the options for displaying crystal structures within a browser without the need for plugins/applets.

Full blog post is here

Here we compare four open-source browser engines for plugin-free rendering of the crystalline structures in CIF format.

 

The latest issue of Journal of Cheminformatics has a paper that might be of interest to a variety of people involved in spectroscopy or data visualsation. SpeckTackle: JavaScript charts for spectroscopy.

We present SpeckTackle, a custom-tailored JavaScript charting library for spectroscopy in life sciences. SpeckTackle is cross-browser compatible and easy to integrate into existing resources, as we demonstrate for the MetaboLights database. Its default chart types cover common visualisation tasks following the de facto ‘look and feel’ standards for spectra visualisation.

SpeckTackle is an open-source JavaScript library to create custom-tailored charts for spectroscopy in life sciences. Implemented charts exist for mass spectrometry, one- and two-dimensional NMR, UV/VIS, IR, and general continuous data use cases such as chromatograms.

The authors kindly supply a demo web page demonstrating different chart types and functions of the SpeckTackle library. Example data is embedded in the web page (800 kb file size). Click on the buttons at the top of the page to see the data displayed. For the Chromatogram, Difference Chart and Spectral Match click the button then the Add Data button.

Highlighting a section of the spectra expands the view and mouseover on the 2D NMR spectra provides a tooltip giving chemical shifts

I've added this to the spectroscopy resources page

 

Un1Chem is a new web resource provided by the EBI, it is a 'Unified Chemical Identifier' system, designed to assist in the rapid cross-referencing of chemical structures, and their identifiers, between databases. Currently the uniChem contains data from 21 different data sources.

This script originally created by Sune Askjær first calculates the InChiKey for molecules in a workspace and then uses Un1Chem to search for information in multiple databases, then it provides a summary and a link to a locally generated summary table.

Full details are here Scripting Vortex 18.

 

Several sites are now using javascript rather than java plugins to render 3D chemical structures, ChemTube 3D contains interactive 3D animations and structures, with supporting information for some of the most important topics covered during an undergraduate chemistry degree.

ChemTube3D news - 2014 version uses Javascript and so works on iPads. It is slower but less problematic than Java. Please use latest versions browsers for best results.

Henry Rzepa has used his blog to offer insights into reaction mechanisms. However the issues of security have made the use of java plugins an onerous task to maintain. His solution:-

Replace the use of Java applets with one not dependent on Java. In the last 18 months an amazing effort to do this has resulted in JSmol, which uses only JavaScript (which has nothing to do with Java despite the name).

I see more and more sites using the javascript and HTML5, recently we have see and update the ChemDoodle Web Components, I suspect all chemical drawing packages will need a javascript version in the future for both 2D and 3D rendering.

iChemLabs have just announced the release of ChemDoodle Web Components 6, this is a major update to their javascript based chemical structure drawing and rendering package.

One of the most important changes from a developers point of view is the external libs (jQuery, jQuey UI, jQuery plugins, glMatrix) are now included into the ChemDoodle scope. This offers several advantages, including eliminating all library conflicts, reducing the number of files required to be installed, and controls the versions used by ChemDoodle. You can now include these libraries yourself at any version and not worry about conflicts. To use the libraries inside of ChemDoodle, call them from the ChemDoodle.lib closure. When I created the interactive graph using FLOT this was one of the issues.

There is also a new EditorCanvas3D canvas which is the 3D component allowing you to interact with and alter chemical data as the 2D Sketcher does in 2D. The 3D editor supports many new WebGL features including picking, highlighting and measurements (distances, angles and torsions).

Lewis Dot Structure style bonds can now be rendered.

As well as editing and drawing structures ChemDoodle web components provides an means to simulate NMR and mass spectra in a web browser

There are also a number of bug fixes and other improvements.

Please Note

This update includes some major refactors, such as the renaming of the sketcher files and packages and inclusion of the external libraries internal to the ChemDoodle scope, so pay careful attention when upgrading.

Fusion Charts have provided a very useful comparison of 6 javascriptHTML5 chart plotting libraries.

The six libraries are FusionCharts Suite XT, HighCharts, Google Chart Tools, Sencha ExtJS, Charts, Chart.js, Flot, jqPlot. I’ve used Flot a couple of times and found it a very useful lightweight library. But as they say choice is good.