Molsoft HTML5 Molecule Editor

HTML5 Molecular Editor allows you to draw 2D chemical structure inside the web browser's page. It does not require any plug-ins (like Java) and works in any modern HTML5 compatible browser with Java Script enabled (including mobile platforms).

It is lightweight, intuitive and easy to use.

Here are few simple steps how to use it in your application:

Include editor Java Script source


<script src="https://molsoft.com/lib/moledit.js" type="text/javascript"></script>

Create 'div' place-holder of the desired size and style.


<div id="myEditor" style="width:800px; height:600px; border:2px solid gray; border-radius:5px;"></div>

Create the editor inside the place-older


<script>document.moledit = new ChemicalView("c1ccccc1", "myEditor" );</script>

Minimal HTML Code Example:


<!DOCTYPE html>
<html>
<head>
<script src="https://molsoft.com/lib/moledit.js"></script>
</head>
<body>
<div id="myEditor" style="width:800px; height:600px; border:2px solid gray; border-radius:5px;"></div>
<script>
document.moledit = new ChemicalView("c1ccccc1", "myEditor" );
</script>
</body>
</html>

Public API methods:

Import chemical from MOL or SMILES


ChemicalView.prototype.importFromString = function (str)

Get SMILES string


ChemicalView.prototype.getSmiles = function ()

Get Molfile string

 
ChemicalView.prototype.getSmiles = function ()

Our popular web services which use the editor

The editor is free for academic and personal use. Please contact us about commercial use.