Graphical editor for chemical structures
SketChem is a graphical editor for chemical structures. It is a free software and it is open source. A client side web application, built using React, Redux, Kekule.js and typescript. SketChem allows you to create and edit chemical structures.
Demo - SketChem Demo
SketChem is a free software and it is open source.
With the usage of the Kekule.js library, SketChem can access two of the most powerful chemical structure libraries: OpenBabel and Indigo. Both are imported as WebAssembly modules. All the calculations are done on the client side with the help of WebAssembly.
With 145+ different formats, almost any chemical structure can be imported or exported when you are using SketChem.
The sketchpad is based on svg objects, therefore everything you see is vector based. This allow you to zoom in to the tiniest details and still view a crisp colorful display.
In order to use SketChem, you need to install the following dependencies:
- Npm: npm
- Yarn:
npm install --global yarn
To Build the application, run the following commands:
git clone https://github.com/itayYaakov/SketChem.git
cd sketchem-react
To run the application, run the following commands:
yarn install
yarn build
cd build
python -m http.server
(or any other local server)- open http://localhost:8000/
Or you can run the application in the development mode:
cd sketchem-react
yarn start
- open http://localhost:3000/
To rebuild kekule.js library dependencies, run the following commands:
git clone https://github.com/itayYaakov/Kekule.js.git
cd Kekule.js
yarn install
(only required for the first time)cd utils/jsMinifier
yarn build_prod
- from Kekule.js/custom_dist/ copy kekule.min.js to SketChem/sketchem-react/public/kekule-js-dist (you can also copy the extra folder if it changed)
- Navigating - pan with the mouse middle button, zoom in/out with the mouse wheel
- Atom - just choose an atom from the right panel, or from the periodic table, and click on the canvas to add it to the structure. You can also change an existing atom by clicking on it, or drag the mouse from an existing atom to create a new one.
- Bond - select a bond type from the left panel, and click on the canvas to create a new bond.
By default, two carbon atoms are connected to the bond.
You can also:
- Drag the mouse from an existing atom to create a new one
- Click an existing bond to change its type (single, double, triple, etc) (a stereo bond will be reversed if you click on it)
- Click an atom to connect it to the bond in the optimal way
- Chain - just like a bond, but as many as you want.
- Erase - click on an atom or bond to erase it. You can also drag the mouse to erase a group of atoms or bonds.
- Charge -/+ - click on an atom to add or remove a charge.
- Periodic Table - not enough atoms? Click on the periodic table button to get more.
- Clear - click on the clear button to erase all the atoms and bonds from the sketchpad.
- Copy - copy the current selection to the clipboard.
- Paste - paste the clipboard contents to a new location.
- Undo - undo the last action.
- Redo - redo the last action.
- Import - import a structure from a file or from a clipboard.
- Export - export the current structure to a file or to a clipboard.
- Select Lasso - select a group of atoms or bonds by drawing a lasso.
- Select Rectangle - select a group of atoms or bonds by drawing a rectangle.
Not enough? I hear you!:
- Easy Change - select atoms or bonds and apply a new charge/label/bond type by simply clicking the desired button.
- Implict Hydrogen - smart guessing of an atom's implicy hydrogen based on its neighbors, label and charge.
- Gradient - bonds are colored based on their connected atoms' colors.
- Valence Error - breaking some chemistry laws? red warning will appear
Function | Symbol |
---|---|
Single Bond | 1 |
Double Bond | 2 |
Triple Bond | 3 |
Single Or Double Bond | 4 |
Wedge Front Bond | 5 |
Wedge Back Bond | 6 |
Select - Box | Q |
Select - Lasso | W |
Chain | E |
Periodic Table | R |
Charge Minus | Z |
Charge Plus | X |
Erase | Del, Backspace, Clear |
Export | Ctrl + S |
Import | Ctrl + O |
Clear | Shift + N |
Copy | Ctrl + C |
Paste | Ctrl + V |
Undo | Ctrl + Z |
Redo | Ctrl + Y |
Hydrogen Atom | H |
Carbon Atom | C |
Nitrogen Atom | N |
Oxygen Atom | O |
Fluorine Atom | F |
Sulphur Atom | S |
Phosphorus Atom | P |
Iodine | I |
You can contribute to Sketchem by opening an issue or creating a pull request on GitHub. Currently, the application is in development mode. Don't hesitate to open an issue if you have any questions or suggestions. Questions and suggestions are always welcome.
SketChem is licensed under the MIT license.