# Molecular Visualizer
SMILES to 3D Molecular Visualizer - A powerful web-based tool for visualizing molecular structures.
[](https://www.npmjs.com/package/molecular-visualizer)
[](https://opensource.org/licenses/MIT)
## 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
```bash
npm install molecular-visualizer
```
### Download
Download the standalone package from [Releases](https://github.com/你的用户名/molecular-visualizer/releases)
## Usage
### Method 1: Standalone HTML
Copy `index.html` and the `lib/` folder to your project:
```html
```
### Method 2: As npm Dependency
```javascript
// Import styles
import 'molecular-visualizer/css/styles.css';
// The app auto-initializes when loaded
// Just include the HTML element:
/*
*/
```
### Method 3: Local Development
```bash
# Install dependencies
npm install
# Start development server
npm start
# Open http://localhost:8080
```
### Method 4: Python Server (included)
```bash
# If installed via pip (see Python package)
pip install molecular-visualizer
molecular-visualizer
```
## Quick Start
```javascript
// Visualize a molecule
const smiles = "CCO"; // Ethanol
document.getElementById('smiles-input').value = smiles;
document.getElementById('visualize-btn').click();
```
## API
### Configuration Options
```javascript
// 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](https://3dmol.org/) - WebGL molecular visualization
- [OpenBabel.js](https://openbabel.org/) - Chemical informatics
## Development
```bash
# 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](LICENSE) file for details.
## Contributing
Contributions are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for guidelines.
## Changelog
See [CHANGELOG.md](CHANGELOG.md) for version history.