Ketcher 
Ketcher is an open-source web-based chemical structure editor incorporating high performance, good portability, light weight, and ability to easily integrate into a custom web-application. Ketcher is designed for chemists, laboratory scientists and technicians who draw structures and reactions.
Key Features
- ⚡️ Fast 2D structure representation that satisfies common chemical drawing standards
- :diamond_shape_with_a_dot_inside: 3D structure visualization
- :memo: Template library (including custom and user's templates)
- 🔩 Add atom and bond basic properties and query features, add aliases and Generic groups
- :cyclone: Stereochemistry support during editing, loading, and saving chemical structures
- :loop: Storing history of actions, with the ability to rollback to previous state
- :floppy_disk: Ability to load and save structures and reactions in MDL Molfile or RXN file format, InChI String, ChemAxon Extended SMILES, ChemAxon Extended CML file formats
- :microscope: Zoom in/out, hotkeys, cut/copy/paste
- :crystal_ball: OCR - ability to recognize structures at pictures (image files) and reproduce them
- :clipboard: Copy and paste between different chemical editors
- 🛠️ Settings support (Rendering, Displaying, Debugging)
- :camera: Use of SVG to achieve best quality in-browser chemical structure rendering
Editor builtin tools:
- Atom Tool, Bond Tool, and Template Tool to draw and edit structures
- Aromatize/De-aromatize Tool
- Calculate CIP Descriptors Tool
- Structure Check Tool
- MW and Structure Parameters Calculate Tool
- Select, modify, and erase connected and unconnected atoms and bonds using Selection Tool, or using Shift key
- Advanced Structure Clean up Tool (+ stereochemistry checking and structure layout)
- Simple Structure Clean up Tool (checks bonds length, angles and spatial arrangement of atoms)
- Easy to use R-Group and S-Group tools (Generic, Multiple group, SRU polymer, peratom, Data S-Group)
- Reaction Tool (reaction generating, manual and automatic atom-to-atom mapping)
- Flip/Rotate Tool
Installation and usage
At this moment Ketcher can be embedded into your application in two ways:
- as ready-to-run application (to find desired version please look at Assets block of releases). The application can be injected as IFrame or a separate page.
- as a react component library
Installation
npm install ketcher-core ketcher-reactBasic Setup
import { Editor } from 'ketcher-react';
import { StandaloneStructServiceProvider } from 'ketcher-standalone';
import 'ketcher-react/dist/index.css';
const structServiceProvider = new StandaloneStructServiceProvider();
function App() {
return (
<Editor
staticResourcesUrl="/public"
structServiceProvider={structServiceProvider}
onInit={(ketcher) => {
window.ketcher = ketcher;
}}
/>
);
}
Accessing Ketcher embedded via IFrame
When you embed the ready-to-run standalone application as an IFrame (rather than using
ketcher-react as a component library), Ketcher initializes asynchronously inside the
frame (loading the Indigo service/WASM, etc.). Because of this, window.ketcher inside the
frame is only assigned once initialization finishes — reading
iframeEl.contentWindow.ketcher right after the frame's load event (or immediately after
inserting the