JSDraw™ 2 - A Javascript Chemical/Biological Structure Editor/Viewer

JSDraw brings chemistry capabilities to your web pages. With this javascript libary you can display and draw chemical structures in web pages, which works cross browser, including IE, Firefox, Safari, Opera and Chrome, crose platform, including Windows, Windows 8, Mac, Linux, and even iPhone, Android and other mobile devices.

JSDraw Placeholder

Major Features:

  • JSDraw 2 can run in classic mode, tablet mode and phone mode (demo)
  • Full-functional chemical structure editor (demo)
  • High-quality chemical strcture rendering (demo)
  • One-line-script to publish SDF file (SDF List, SDF Grid)
  • Intelligent, editable and searchable (substructure, fullstructure) chemical structure table control (demo)
  • Substructure search
  • Stereochemistry supported
  • Reaction and reaction map supported (demo)
  • Annotation supported
  • Highlighting query or scaffold
  • Completely cross browser, cross platform
  • Inputting Mol file, Rxn file, SDF file
  • Exporting Mol file, Rxn file, SMILES, SMARTS(demo), Html, Formula, Mol weight
  • Customizable plug-in architecture (demo)
  • Atom Tag(demo)
  • HTML/Image column type (demo)
  • Name2structure integrating with Chemistry Spreadsheet (demo)
  • SDF File Viewer and Publisher (demo)

Some Drawing Tips:

  • Any tool can draw bond
  • Click single bond to set double bond
  • Mouse hove bonds and press 0-8 keys to set bond types
  • Mouse hove atoms and press characters key to set atom types
  • Mouse hove atom, bond, arrow or plus and press DEL key to delete objects
  • Drag objects to change position
  • Hold Ctrl key and drag selected objects to copy them
  • Ctrl+C for copy, Ctrl+X for cut, Ctrl+V for paste, Ctrl+Z for undo and Ctrl+Y for redo
  • Right click atom/bond/blank area for different context menu

Example 1 (Viewer, using molurl):

<div class='JSDraw' id="jsdraw1" style="width: 400px; height: 330px;border:1px solid gray" 
    dataformat='molurl' data='mol1.mol.txt' viewonly ></div>

Example 2 (Editor, using molfile):

<div class='JSDraw' id="jsdraw2" style="width: 500px; height: 300px;border:1px solid gray" 
    dataformat='molfile' data='

  5  4  0  0  0  0  0  0  0  0  1 V2000
    2.2994    2.0277    0.0000 O   0  0
    3.2617    0.3611    0.0000 F   0  0
    2.2994    0.9166    0.0000 C   0  0
    1.3372    0.3611    0.0000 N   0  0
    0.3750    0.9166    0.0000 Cl  0  0
  3  1  2
  3  2  1
  4  3  1
  5  4  1
M  END'></div'>

Example 3 (Editor, using JSDraw compatible html):

<div class='JSDraw' style='width:600px;height:300px;' viewonly>
<a i=1 e='C' p='10.192 6.656'></a>
<a i=2 e='C' p='11.543 5.876'></a>
<a i=3 e='C' p='12.894 6.656'></a>
<a i=4 e='O' p='11.543 4.316'></a>
<b a1=1 a2=2 t=1 r='black'></b>
<b a1=2 a2=3 t=1 r='black'></b>
<b a1=2 a2=4 t=2 r='black'></b>

Example 4 (SDF Viewer):

<script type="text/javascript">
    new JSDraw2.Table("sdf4.sdf.txt", {grid:true, cols:5, width:200, height:120, searchable:true});

In order to let IE9 render graphics in SVG, which is much faster than traditional VML, you need include following meta tag in <head> section:

    <meta http-equiv="X-UA-Compatible" content="IE=edge" >

class JSDraw2.Mol

  • JSDraw2.Mol was called JsMol in JSDraw 1.x
  • Constructor
    • new JSDraw2.Mol()
  • Members
    • atoms - an array contains all atoms
    • bonds - an array contains all bonds
  • Methods
    • aamap(target, fullstructure) - Perform atom-by-atom mapping, and return the map if succeeded.  target is a JsMol object; fullstructure to indicate to do a full-structure search.
    • cleanupRxn() - Clean up reaction
    • clear() - Remove all atoms and bonds
    • clone(selectOnly) - Clone a new JsMol object
    • flipX(x)
    • flipY(y)
    • fullstructureMatch(target) - Perform a full-structure search, and return true if succeeded
    • getExactMass()
    • getFormula(html)
    • getHtml()
    • getMolfile()
    • getMolWeight()
    • getRxnfile()
    • getSmiles()
    • isEmpty()
    • moveCenter()
    • scale(factor)
    • setColor(color)
    • setHtml(html)
    • setMolfile(molfile)
    • setRxnfile(rxnfile)
    • substructureMatch(target) - Perform a substructure search. and return true if succeeded

class JSDraw2.Editor

  • JSDraw2.Editor was called JSDraw in JSDraw 1.x
  • Constructor
    • new JSDraw2.Editor(div, [options]) - Convert div element into a structure editor immediately
    • JSDraw2.Editor.init() - Delay the operation to convert all DIV elements with class value as JSDraw into structure editors.  Usually call this method before page onload() event.
  • Parameters/options
    • biology - Set this flag to false to hide seqence button
    • buttonshape - circle, or square
    • dataformat - data format. It can be molfile, rxnfile, html
    • data - actual data
    • height - editor height
    • highlighterrors - set this flag to false not to show errors in red boxes
    • inktools - set this flag to flase to not to show ink tools
    • largeicon - use large toolbar icons for higher resolution
    • ondatachange - datachange event handler
    • pastechemdraw - set this flag to false to disable Paste ChemDraw menuitem
    • plugins - plugins, as an array [{iconurl, tooltips, onclick}, ...]
    • popup - Create a viewer, and double-click to show popup editor
    • query - Set this flag to false to disable query atoms (A, R, X, Q, * etc.) in periodic table
    • removeHydrogens - Remove hydrogen atoms before show the structure
    • rxn - Set this flag to false to disable reaction buttons on toolbar
    • scale - A factore to zoom the whole editor, including toolbars. This is useful for iPad applications
    • skin - set this to "w8" to display the editor in JSDraw2 mode; leave this parameter to empty to display editor in classic mode (2.0)
    • sendquery - Set this flag to false to hide PubChem, ChemSpider search button
    • showfilemenu - set this flag to false to not to show file menus
    • showimplicithydrogens - Set flag to false to hide implicit hydrogens
    • showtoolbar - set this flag to false to hide toolbar
    • viewonly
    • width - editor width
  • Members
    • m - A JSDraw2.Mol object
  • Methods
    • cleanupRxn() - Clean up reaction
    • clear() - Remove all atoms, bonds and other objects
    • destory() - For Ajax applications, call this method to release memory.
    • fitToWindow([maxBondlength]) - Scale the structure to fit the window size.
    • getExactmass()
    • getFormula([html])
    • getMolfile()
    • getMolWeight()
    • getRxnfile()
    • getSmiles() - Generate SMILES, including stereochemistry descriptors
    • getHtml([width], [height], [viewonly]) - Generate JSDraw compatible html
    • highlight(query) - Perform a substructure, and highlight the substructure if succeeded
    • moveCenter()
    • readCookie([cookie_name]) - Read the structure previously stored in cookie
    • setHtml(jsdrawHtml) - Set JSDraw compatible html
    • setMolfile(molfile)
    • setRxnfile(rxnfile)
    • sss(target) - Perform substructure search and returns the mapping
    • redo()
    • refresh() - Redraw the structure
    • setSize(width, height)
    • undo()
    • writeCookie([cookie_name]) - Wrote current structure in cookie
  • Events
    • ondatachange(jsdraw)

class JSDraw2.defaultoptions

JSDraw2.defaultoptions = {} is a place to set global editor settings.  Besides all JSDraw2.Editor parameters, it also supports following parameters:

  • popupwidth - The width of JSDraw popup editor.  It can be an integer, or a percentage string.
  • popupheight - The heightof JSDraw popup editor.  It can be an integer, or a percentage string.
  • xdraw - Set this flag to true to enable users to use ChemDraw is ChemDraw is installed.


JSDraw2.defaultoptions = { skin: "w8", popupwidth: "70%", popupheight: "70%", xdraw: true };

class JSDraw2.Table

  • JSDraw2.Table was called JsSDF in JSDraw 1.x
  • Constructor
    • new JSDraw2.Table(sdfurl [,options [,div]])
    • JSDraw2.Table.init(sdfurl, options, div)
  • Parameters
    • columns - Define columns, including key, caption, width, type (structure, id, mf, mw, int, mass, volume, integer, real)
    • filter(molfile, attributes) - A function called at loading time to determine if that record can be displayed or not (demo)
    • grid - Set this to true to show structures as grid (demo)
    • highlight - A molfile as the scaffold to be highlighted (demo)
    • molheight - The height of structure cells
    • onCellChanged(cell) - Event handler
    • removeHydrogens - Remove hydrogen atoms before show the structure
    • searchable
    • showformula
    • showmolweight
    • spreadsheet - Set this flag to true to display "define columns" button on toolbar
    • viewonly
  • Methods
    • clear() - clear all rows
    • destory() - Call this method to release this JSDraw2.Table object to avoid memory leak.  This is very important for Ajax applications.
    • highlight(scaffold) - scaffold is a molfile string, JsMol object, or JSDraw object
    • getSdf()
    • getXml()
    • insert(row, values)
    • getCell(row, col)
    • setXml(xml)
    • setSdf(sdf)
  • Events
    • onCellChanged(cell) - event fired when user change a cell value