react-molviewer

A React component for displaying molecules using JSmol.

How to use

Find out more information: React-MolViewer

Development

This project uses Vite for fast development and optimized builds.

Prerequisites

• Node.js >= 20.0.0 < 25.0.0
• Yarn package manager

Getting Started

# Install dependencies
yarn install

# Start development server (http://localhost:8080)
yarn start

# Build library for production (outputs both ESM and UMD formats)
yarn build

# Build demo application
yarn build:demo

# Preview production build
yarn preview

Environment Variables

Environment variables should be prefixed with VITE_ to be exposed to the application.

Copy .env.example to .env and configure as needed:

cp .env.example .env

Access variables in code using import.meta.env.VITE_*

Build Outputs

The library build produces two module formats:

• ESM (dist/react-molviewer.es.js) - Modern ES modules, tree-shakeable
• UMD (dist/react-molviewer.umd.js) - Universal module for broader compatibility

Docker

# Build image
docker build -t react-molviewer .

# Run container
docker run -p 4173:4173 react-molviewer

Contact Us

If you have any questions or suggestions, please contact the contributors:

• Paggy Huang
• Claire Lin

Thank you JSmol

Jmol: an open-source Java viewer for chemical structures in 3D. http://www.jmol.org/