molecular-visualizer

v1.2.0

Published

10 days ago

SMILES to 3D Molecular Visualizer - Web-based molecule visualization with measurement tools, PubChem search, and dark mode

Downloads

0High
0Medium
0Low

tanshiqian

molecule visualization 3d chemistry smiles webgl molecular-structure chemical

Molecular Visualizer

SMILES to 3D Molecular Visualizer - A powerful web-based tool for visualizing molecular structures.

Features

SMILES Input - Enter SMILES strings to generate 3D molecular structures
File Upload - Import XYZ and PDB files
Multiple Styles - Stick, Sphere, Ball+Stick, Line, Cross, Cartoon, Surface
Measurements - Distance, Angle, and Dihedral angle measurements
PubChem Search - Search compounds by name or CID
Export - Save as PNG or SVG images
Dark Mode - Easy on the eyes for long sessions
Molecular Properties - MW, H-bond donors/acceptors, atom counts
Presets - Quick configuration for different use cases
Keyboard Shortcuts - Efficient navigation

Installation

npm

npm install molecular-visualizer

Download

Download the standalone package from Releases

Usage

Method 1: Standalone HTML

Copy index.html and the lib/ folder to your project:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div id="viewer-container"></div>
    
    <script src="lib/3Dmol-min.js"></script>
    <script src="lib/openbabel.js"></script>
    <script src="lib/openbabel.wasm"></script>
    <script src="lib/openbabel.data"></script>
    <script src="js/app.js"></script>
</body>
</html>

Method 2: As npm Dependency

// Import styles
import 'molecular-visualizer/css/styles.css';

// The app auto-initializes when loaded
// Just include the HTML element:
/*
<div id="viewer-container"></div>
<div class="controls">
    <input type="text" id="smiles-input" placeholder="SMILES...">
    <button id="visualize-btn">Visualize</button>
</div>
*/

Method 3: Local Development

# Install dependencies
npm install

# Start development server
npm start

# Open http://localhost:8080

Method 4: Python Server (included)

# If installed via pip (see Python package)
pip install molecular-visualizer
molecular-visualizer

Quick Start

// Visualize a molecule
const smiles = "CCO"; // Ethanol
document.getElementById('smiles-input').value = smiles;
document.getElementById('visualize-btn').click();

API

Configuration Options

// Style options: 'stick', 'sphere', 'ball+stick', 'line', 'cross', 'cartoon', 'surface'
viewer.setStyle({}, { stick: { radius: 0.2 } });

// Background colors
viewer.setBackgroundColor('white'); // or 'black', 'lightgray', 'transparent'

Keyboard Shortcuts

| Key | Action | |-----|--------| | R | Reset view | | +/- | Zoom in/out | | ↑↓←→ | Rotate molecule | | Space | Toggle auto-rotation | | H | Show shortcuts | | Esc | Clear selection |

Examples

See example.html for embedding examples.

Browser Support

Chrome 60+
Firefox 55+
Safari 11+
Edge 79+

Dependencies

3Dmol.js - WebGL molecular visualization
OpenBabel.js - Chemical informatics

Development

# Clone the repository
git clone https://github.com/你的用户名/molecular-visualizer.git
cd molecular-visualizer

# Install dependencies
npm install

# Run tests
npm test

# Start dev server
npm run dev

License

MIT License - see LICENSE file for details.

Contributing

Contributions are welcome! Please see CONTRIBUTING.md for guidelines.

Changelog

See CHANGELOG.md for version history.