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

JSDraw brings chemistry capabilities to your web pages. With this javascript library you can display and draw chemical structures in web pages, which works cross-browser, including IE, Firefox, Safari, Opera and Chrome, cross-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 structure 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; full tructure 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 sequence 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