ChemDraw Add In: How do I create a web page that uses the ChemDraw ActiveX control

Updated: 22 September,2026
 

How do I create a web page that uses the ChemDraw ActiveX control?

The following content is only useful if you are using a browser that supports the ActiveX control. Please review the Hardware/Software guide for your version of ChemDraw to see if you have a browser that supports the ActiveX control. Plugins are no longer supported by browsers, so disregard any information below that references the word Plugin.

Instead of writing HTML directly, you will instead call some simple JavaScript functions. We provide these functions for you, in the form of JavaScript files (*.js) that you can reference directly from your web pages.

This article tells you how to write these kind of pages.

1. Writing ActiveX Control Pages
2. ChemDraw JavaScript Library Function Reference
3. Troubleshooting

I. Writing Multi-browser Pages

1. Copy lib files and package files to an appropriate folder and set path variables in *chemdraw.js*.
2. Include the general ChemDraw library file *chemdraw.js* and wrapper files in the <HEAD></HEAD> part.
3. Use *cd_insertObject()* or *cd_insertObjectStr()* to insert a ChemDraw ActiveX in the appropriate position.
4. Use wrapper functions to operate ChemDraw ActiveX objects.

Here is an example.  For this example, let's consider a website whose URL is http://mywebsite/, and where you plan to write a ChemDraw Active X page with a name *mycd.htm*  and place it in the root directory.  Let's follow the 4 steps.

1. Copy files to an appropriate place.

(1) JavaScript library files

chemdraw.js - General library, includes all functions to write ChemDraw ActiveX pages.
cdlib_ie.js - Function wrapper file for ActiveX, mainly used by IE browser

You can get the files from the latest ChemDraw release package.

You can put these files anywhere -- in the same directory as your html page, in a different directory on your server, or even on a different server altogether, as long as they stay together. It's usually easiest if you put them in a directory near the top level of your web site. That way, if you have more than one page that uses the ChemDraw Control, then all of those pages can link to the same JavaScript library files. For this example, let's put them in http://mywebsite/lib/chemdraw/.

(2) ActiveX CAB file and CDPHelper CAB and JAR file

camsoft.jar - CDPHelper JAR file
camsoft.cab - CDPHelper CAB file
camsoft.cab2 - IE uses it to detect Plugin

You can get these files from the latest ChemDraw release package

Copy the files into the folder that the three Javascript library files locate in. In this case, it's http://mywebsite/lib/chemdraw/.

2. Include the general ChemDraw library file *chemdraw.js* and wrapper files in the <HEAD></HEAD> part.

3. Use *cd_insertObject()* or *cd_insertObjectStr()* to insert a ChemDraw ActiveX in the appropriate position.

The *cd_insertObject()* function will insert a ActiveX object into the page, initialized with the file "benzene.cdx", which in this case is located in the same directory as the mycd.htm page. The plugin will be created with a size of 267 by 128pixels, a name of "mycdx", not viewOnly (means editable), and no dataURL.

4. Use wrapper functions to operate ChemDraw ActiveX objects.

In this page, what I want to do is to clear all drawing when users click the *Clear Structure* button. To do this, I use ActiveX name as the inputting parameter to call wrapper function cd_clear().

When IE browsers visit this page, ActiveX control will be used.

II. ChemDraw JavaScript Library Function Reference

In this JavaScript library, many functions are defined.  But only following 10 functions is necessary for you to learn before writing activeX pages. 

Functions defined in chemdraw.js

cd_insertObject
cd_insertObjectStr
cd_includeWrapperFile

Wrapper functions defined in cdlib_ie.js and cdlib_ns.js

cd_getFormula
cd_getAnalysis
cd_getMolWeight
cd_getExactMass
cd_getData
cd_putData
cd_clear

NOTE: In following text, word required indicates the parameter is a required one, which you must give a value to;  word optional indicates the parameter is an optional one, which you may ignore.

cd_insertObject(mimeType, objWidth, objHeight, objName, srcFile, viewOnly, shrinkToFit, dataURL)

This function dynamically chooses an appropriate ChemDraw Plugin/ActiveX for your web pages according to the calling browser.

e.g.
cd_insertObject("chemical/x-cdx", 300, 200);

cd_insertObject("chemical/x-cdx", 267, 128, "mycdx", "benzene.cdx");

cd_insertObject("chemical/x-cdx", 267, 128, "mycdx", "benzene.cdx", true);

cd_insertObject("chemical/x-cdx", 267, 128, "mycdx", "empty.cdx", true, true, "benzene.mol");

cd_insertObject("chemical/x-cdx", 267, 128, "mycdx", "empty.cdx", true, true, dataurl='data:chemical/smiles,CCN(C)C(c1cccc(O)c1)=O');

cd_insertObjectStr(tagStr)

This function acts the same role as the previous one, but uses one string as parameter.  When upgrading to multi-browser pages from old Plugin pages, this function may be more convenient.

e.g.
cd_insertObjectStr("<EMBED src='HTML/blank.cdx' align='baseline' border= '0' width='267' height='128' type= 'chemical/x-cdx' name= 'mycdx'>");

NOTE: In parameter *tagStr*, only following keywords is valid, all of which are lowercase.

e.g.
cd_insertObjectStr("src='HTML/blank.cdx' width=267 height=128 type= 'chemical/x-cdx' name= 'mycdx'");

cd_includeWrapperFile(basePath, checkInstall)

This function includes wrapper file, which wraps functions/methods of ChemDraw ActiveX into the same name, .  What you do is just to call the functions defined in the wrapper files.  Furthermore, since ActiveX is a more complicated component than Plugin, which defines more attributes and methods, you may use them but you must remember that Plugin may NOT support them.  Functions defined in wrapper files are always safe and available for both Plugin and ActiveX, so in multi-browser pages, please use only wrapper functions.

e.g.
cd_includeWrapperFile("lib/wrapperfile/");

cd_includeWrapperFile("lib/wrapperfile/", false);

cd_getFormula(objName, selection)

This function returns the formula of selected/all structures.

e.g.
editFormula.value = cd_getFormula("mycdx", 0);

cd_getAnalysis(objName, selection)

This function returns the elemental analysis of selected/all structures.

e.g.
editAnalysis.value = cd_getAnalysis("mycdx", 0);

cd_getMolWeight(objName, selection)

This function returns the molecular weight of selected/all structures.

e.g.
editMolWt.value = cd_getMolWeight("mycdx", 0);

cd_getExactMass(objName, selection)

This function returns the exact mass of selected/all structures.

e.g.
editMs.value = cd_getExactMass("mycdx", 0);

cd_getData(objName, mimetype, checkMW)

This function returns the contents of the plugin in the specified data format.

e.g.
editData.value = cd_getData("mycdx", "chemical/x-daylight-smiles");

cd_putData(objName, mimetype, data)

Set the contents of the Plugin/ActiveX to the specified data.

e.g.
cd_putData("mycdx", "chemical/x-daylight-smiles", smilesData);

cd_clear(objName)

This function clears the drawing.

e.g.
cd_clear("mycdx");

cd_getVersion(objName)

This function returns the version of Plugin/ActiveX.

e.g.
var version = cd_getVersion("mycdx");

III. Troubleshooting

1. Why can't structures be loaded from a SRC file when using an IIS web server?

When you use the MS IIS web server ".cdx" files are used by the server by default as the channel definition files. So you must remove this default setting to let ChemDraw cdx files work in the ChemDraw ActiveX .

To remove this setting: Open "Internet Service Manager" --> Right click "default web site" --> Choose "Property" from the popup menu --> Choose "Main Directory" tab --> Click "Configure" button --> From "Application Mapping" list, choose ".cdx" item and click "Remove" button to delete it --> OK --> OK.

2. I'm trying to use inline CDXML, CML, or MolFile data, and I keep getting an "Unterminated string literal" error message!

JavaScript really doesn't like it when return characters appear in the middle of a string. So, trying to embed a MolFile verbatim will not work:

<script> cd_insertObjectStr("<embed width='300' height='200' name='mycdx' type='chemical/x-chemdraw' viewonly=false dataurl='data:chemical/mdl-molfile,
test.mol
  ChemDraw08300213062D

  7  7  0  0  0  0  0  0  0  0999 V2000
   -1.0717    0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -1.0717   -0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.3572   -0.8250    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    0.3572   -0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    0.3572    0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.3572    0.8250    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    1.0717    0.8250    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0
  1  2  1  0      
  2  3  1  0      
  3  4  1  0      
  4  5  1  0      
  5  6  1  0      
  6  1  1  0      
  5  7  1  0      
M  END
'>");</script>

Instead, you must convert the return characters into "\n" strings, which JavaScript is happy with:

That MolFile will probably appear on multiple lines as you view this page in your browser, but the point is that there truly must not be any returns in the actual HTML source. Any return characters in the MolFile (or CDXML file, or any other file format that uses embedded returns) must be converted to "\n".

Another option would be to forego the JavaScripts entirely, and instantiate the ActiveX using standard technology. For example, here is an example that loads the ChemDraw 7.0 control into a web page:

<object classid="clsid:AF2D2DC1-75E4-4123-BC0B-A57BD5C5C5D2" width="200" height="200" id="ChemDrawCt13" style="height: 200; width: 200">
<param NAME="DataURL" VALUE="data:chemical/x-mdl-molfile,test.mol
  ChemDraw08300213062D

  7  7  0  0  0  0  0  0  0  0999 V2000
   -1.0717    0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -1.0717   -0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.3572   -0.8250    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    0.3572   -0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    0.3572    0.4125    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
   -0.3572    0.8250    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0
    1.0717    0.8250    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0
  1  2  1  0      
  2  3  1  0      
  3  4  1  0      
  4  5  1  0      
  5  6  1  0      
  6  1  1  0      
  5  7  1  0      
M  END">
</object>

This approach, while possible, is strongly discouraged because it ties you to one specific implementation. This particular example will only work on Internet Explorer versions on machines that already have the ChemDraw 7.0 Control installed. It will not work under Netscape, and it will not work in the future when an 8.0 version of the control becomes available. Also, it will not work with any of the other JavaScript functions described on this page. Even though the Multibrowser technology introduces that minor "\n" problem with its use of JavaScript, it will be much more compatible on the long term.