MolPad

React component for drawing and editing molecular structures.

Installation

npm install @chemistry/molpad

Usage

import { useRef } from 'react';
import { MolPad, MolPadHandle } from '@chemistry/molpad';

function App() {
  const molpadRef = useRef<MolPadHandle>(null);

  const loadMolecule = () => {
    molpadRef.current?.loadMolecule(moleculeData);
  };

  const exportMolecule = () => {
    const jmol = molpadRef.current?.getJmol();
    console.log(jmol);
  };

  return <MolPad ref={molpadRef} />;
}

Tech Stack

• React 18/19, TypeScript 5.9, ES2024 target, ESM
• Zustand 5 for state management (with devtools)
• Vitest for testing, 98%+ coverage (270 tests)
• ESLint 10 (flat config) + Prettier
• Native tsc build (no bundler)
• Node.js 22+

Commands

| Command | Description | | ---------------------- | ------------------------------------------------------------- | | npm run build | Build the library | | npm run test | Run unit tests | | npm run lint | Run ESLint | | npm run format:check | Check Prettier formatting | | npm run type-check | Run TypeScript type checking | | npm run verify | Full verification (type-check + lint + format + test + build) |

Showcase App

A Vite-based demo is available in showcase/:

cd showcase
npm install
npm run dev

Release

git tag v3.1.0
git push --tags

The release.yml GitHub Action will publish to npm and create a GitHub Release automatically.

License

This project is licensed under the MIT license, Copyright (c) 2025 Volodymyr Vreshch. For more information see LICENSE.