Drawing molecules on your laptop usually requires access to proprietary software such as ChemDraw (link) or free websites such as PubChem’s online sketcher (link). However, if you are feeling adventurous, you can build your personal sketcher in React/Typescript using the Ketcher package!

Ketcher is an open-source package that allows easy implementation of a molecule sketcher into a web application. Unfortunately, it does require TypeScript so the script to run it cannot be imported directly into an HTML page. Therefore we will set up a simple React app to get it working.

The sketcher is very sleek and has a vast array of functionality, such as choosing any atom from the periodic table and being able to directly import molecules from either SMILES or Mol2/SDF file format into the sketcher. These molecules can then be edited and saved to a new file in the chemical file format of your choosing.

Creating a (S)ketcher web app

1. First, create and start your React app by running the following npm (a JavaScript package manager) commands:

npx create-react-app sketcher
cd sketcher
npm start

These commands will create a blank template for your React project, which we can add our code to, and so build our molecule sketcher web-page.

2. Install the following packages and dependencies for this web-page:

npm i typescript --save-dev
npm i -s ketcher-react ketcher-standalone ketcher-core miew

3. Next we need to copy over the code for the sketcher. For simplicity, and to reduce the length of this blog post, I have just provided the necessary scripts for this to work.

• Create a file called sketcher_component.tsx in the src folder and copy the following code into it

import React from "react";
import "miew/dist/miew.min.css";
import { StandaloneStructServiceProvider } from "ketcher-standalone";
import { Editor } from "ketcher-react";
import { Ketcher } from "ketcher-core";
import "ketcher-react/dist/index.css";
import Miew from "miew";

(window as any).Miew = Miew;

const structServiceProvider = new StandaloneStructServiceProvider();

export class KetcherExample extends React.Component {
  ketcher: Ketcher;

  constructor(props: any) {
    super(props);
  }

  handleOnInit = async (ketcher: Ketcher) => {
    this.ketcher = ketcher;
    (window as any).ketcher = ketcher;
  };

  render() {
    return (
      <Editor
        errorHandler={(message:string) => null}
        staticResourcesUrl={""}
        structServiceProvider={structServiceProvider}
        onInit={this.handleOnInit}
      />
    );
  }
}

export default KetcherExample;

• Edit your src/App.js file so that it looks like this:

import KetcherExample from './sketcher_component.tsx';
import './App.css';
import React from 'react'

function App() {
  return (
    <div className="App">
      <KetcherExample />
    </div>
  );
}

export default App;

This ensures that the Sketcher component is loaded into our main app. Separating your components into separate files in JavaScript is good practice and keeps the code-base manageable!

• Edit your tsconfig.json file so that compiler_options.strict = false

4. Your sketcher web-app should work and look like this!

Congratulations! You’ve built your personal sketcher! Now you can edit it how you please. You could even add features such as displaying molecule properties or displaying a 3D structure as you sketch if you are feeling even more adventurous!