ChemWidget Demo

Start ChemWidget in either editor or viewer mode. The buttons below the editor/viewer can be used to load and manipulate example structures (all of which have been created from scratch with ChemWidget).


Here is the source code snippet that shows how ChemWidget was embedded into this page. First, we included the main .js file in our page. Then, we created a div with an id (in this case, ‘#chemwidget’). Finally, ChemWidget was added to the div with a single call to initEditor. The div automatically resizes to fit its contents. ChemWidget feels at home in responsive designs: both editor and viewer will change their size seamlessly as the containing div changes.

<script type="text/javascript" src="./path/to/com.moleculenix.ChemWidget.ChemWidget.nocache.js" language="javascript"></script>
<div id="chemwidget" style="border-width: 1px; border-style: solid; border-color: #535353;"></div>
<script>
    var curr_width = document.getElementById('main').style.width;
    initEditor('chemwidget', curr_width, 480);
</script>

Structures can be loaded programmatically with a single line of code. ChemWidget is smart enough to figure out whether input is the contents of a .MOL file, or a URL pointing to a .MOL file. Optionally, a caption or a molecule name can be displayed below the structure:

setMolFile('chemwidget','http://example.com/content/aflatoxin-b1.mol', 'Aflatoxin B1');