JSchematic is a Redux application for drawing molecules and chemical reactions.
JavaScript CSS HTML
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



JSchematic is a React-Redux application for drawing molecules and chemical reactions. Sample Deployment

Alt text


Clone the GitHub repository to a local directory, and install the required dependencies using npm.

$ git clone https://github.com/nicksenger/JSchematic.git
$ cd JSchematic
$ npm install

The test-page (index.html), and Webpack-bundled build.js file are stored under JSchematic/build. The source components are stored in JSchematic/src.

##Getting Started

Customizing JSchematic, and integrating it into your own web application, will require familiarity with React.js and Redux. Each has excellent documentation available, and should be referred to as needed.

###File Structure

JSchematic's source code is divided into subdirectories by filetype, and further subdivided based on function.

The entrypoint for the app is contained within app.js of the js directory. This file renders the JSchematic React Component to an arbitrary 'container' element of the test-page's index.html.

Additional JavaScript files are organized as follows:

  • actions: contains Redux action creators (index.js)
  • components: contains simple, stateless React components
  • containers: contains React components which require access to the global state provided by Redux
  • reducers: contains Redux reducers
  • utilities: contains shared functions and logic used by multiple components/containers/reducers

###Data Structure

Files contained within the reducers subdirectory provide a basic outline of the app's data structure. Here is a short summary of each reducer:

  • reducerActiveButton: handles information regarding which button from the menu bar is selected, or being hovered over
  • reducerBodyHover: handles information regarding which bond is being highlighted by the mouse cursor
  • reducerButtons: contains information (image links, action names, etc) about the buttons to be rendered into the menu and sub-menus
  • reducerCanvasDown: handles whether the mouse is clicked 'down' on the main canvas element
  • reducerCanvasUp: handles whether the mouse is 'up' on the main canvas element
  • reducerElementSizes: contains information about sizing for basic bond and text elements rendered to the canvas
  • reducerHighlight: handles the state of which atoms are highlighted
  • reducerLockPositions: handles the positioning of atoms relative to bond elements
  • reducerManageElements: state containing the information about the type, position, and orientation of every element drawn in the canvas
  • reducerMouseCoord: handles information about the position of the user's mouse cursor on the page
  • reducerSubSelect: handles rendering of sub-menus
  • reducerTextHover: state regarding whether or not a user is hovering over a text element


JSchematic's functionality involves the interplay of numerous React components, most of which require access to the global state. All components and containers are linked to corresponding SASS scss files of the same name in the css folder. The stateless components are:

  • App (app.js): contains and organizes other important elements
  • Highlight (highlight.js): simple blue highlighting when user hovers over a particular atom

Stateful components:

  • BasicBond (basicBond.js): this is the lowest-level bond component, all bond-systems involve rendering of the BasicBond, or a collection of BasicBonds in a particular orientation

  • BondHead (bondHead.js): within each BasicBond are 2 BondHeads, corresponding to each atom involved in the bond

  • BasicButton (button.js): menu buttons are each BasicButton components

  • Canvas (canvas.js): the main drawing space for the application, controls creation and removal of elements, and triggers rendering of top-level elements

  • ExpandaButton (expandaButton.js): menu buttons that trigger the enpansion of a sub-menu

  • MenuBar (menuBar.js): main menu component

  • SubButton (subButton.js): buttons of a sub-menu

  • SubMenu (subMenu.js): sub-menus that appear on mouse-down of menu SubButtons

  • Text (text.js): text boxes rendered in the canvas

  • bondSystems: These components simply render particular arrangements of BasicBonds

  • elements: These components are special added items like charges, arrows, symbols and lobes


Contributions that address any unresolved issues or provide additional features are encouraged and appreciated! Please indicate what changes are being made in the commit message.


JSchematic is copyright (c) 2016, Nicholas Senger. It is distributed under the BSD 3-Clause License.