InsightsTopicsContact
Eckher
Your guide to what's next.
Eckher
Insights
Topics
Home › Eckher Insights › Working with ChemDraw JS
Jan 7, 2020

Working with ChemDraw JS

ChemDraw JS makes it possible to create, view, and edit chemical structures in the browser.

ChemDraw JS is a library for working with chemical structures. Its features include drawing chemical structures and reactions and converting names to structures and structures to names. It also supports hotkeys and shortcuts, structure templates, and structure query tools.

Notable users of ChemDraw JS include ChemDraw Cloud, Signals Notebook Individual Edition, Lead Discovery, and PerkinElmer Signals Lead Discovery.

A demo site showcases the features of the library.

Using ChemDraw JS

To use ChemDraw JS in your app, you need a license file. You can get the license file by contact PerkinElmer.

Load the ChemDraw JS script

<script src="https://chemdrawdirect.perkinelmer.cloud/js/chemdrawweb/chemdrawweb.js"></script>

This script loads the perkinelmer object into the window which is used to create a ChemDraw JS instance:

window.perkinelmer.ChemdrawwebManager.attach({
    license: '<?xml version="1.0" encoding="UTF-8" standalone="no"?><License ...',
    element: document.getElementById('chemdraw-mounting-point'),
    callback: (chemdraw) => {
        // Use the `chemdraw` instance here, call APIs, etc.
    },
    errorCallback: (error) => {
        // ...
    }
});

In the callback callback, use the chemdraw to load an example CDXML:

const dimethylamineCdxml =
    `<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE CDXML SYSTEM "http://www.cambridgesoft.com/xml/cdxml.dtd">
    <CDXML>
        <page>
            <fragment>
                <n id="9" p="106 118" />
                <n id="11" p="131.98 103" Element="7" />
                <n id="13" p="157.96 118" />
                <b id="12" B="9" E="11" />
                <b id="14" B="11" E="13" />
            </fragment>
        </page>
    </CDXML>`;

chemdraw.loadCDXML(dimethylamineCdxml);

See also

Cover
See also
How to scp?
Using the scp command.
<select> in React
How to implement a controlled <select> in React?
Styling native HTML dropdowns
How to style the native HTML dropdown?
Useful SEO resources
Tools and services for validating SEO.
Asynchronous iteration in JavaScript
Gotchas with asynchronous iteration in JavaScript.
What does a senior developer do?
The difference between an intermediate and senior developer.
Eckher
Your guide to what's next.
Copyright © 2021 Eckher. Various trademarks held by their respective owners.