# 3dmol

> JavaScript/TypeScript molecular visualization library

Latest version **2.5.5** (published 2026-05-22) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install 3dmol
pnpm add 3dmol
yarn add 3dmol
bun add 3dmol
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; no esm support; large bundle.

## Facts

| | |
|---|---|
| Version | 2.5.5 |
| Published | 2026-05-22 |
| First published | 2016-12-11 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | >=16.16.0 |
| Dependencies | 4 |
| Unpacked size | 19.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1018 |
| Author | David Koes and contributors |
| Maintainers | helblazer811, dkoes |

## Links

- npm: https://www.npmjs.com/package/3dmol
- Repository: https://github.com/3dmol/3Dmol.js
- Homepage: http://3dmol.org
- Issues: https://github.com/3dmol/3Dmol.js/issues
- npm.io page: https://npm.io/package/3dmol

## Dependencies (4)

- [pako](https://npm.io/package/pako.md) ^2.1.0
- [upng-js](https://npm.io/package/upng-js.md) ^2.1.0
- [iobuffer](https://npm.io/package/iobuffer.md) ^5.0.0
- [netcdfjs](https://npm.io/package/netcdfjs.md) ^3.0.0

## Recent versions

- 2.5.5 (latest) — 2026-05-22
- 2.5.4 — 2026-01-22
- 2.5.3 — 2025-09-27
- 2.5.2 — 2025-07-30
- 2.5.1 — 2025-06-26
- 2.5.0 — 2025-06-03
- 2.4.2 — 2024-11-08
- 2.4.1 — 2024-11-06
- 2.4.0 — 2024-09-04
- 2.3.0 — 2024-07-31
- 2.2.1-post1 — 2024-07-18
- 2.2.1 — 2024-07-17
- 2.2.0 — 2024-07-07
- 2.1.0 — 2024-03-11
- 2.0.6 — 2023-10-23
- … 36 more at https://npm.io/package/3dmol/versions

## README

# 3Dmol.js
[![CDNJS](https://img.shields.io/cdnjs/v/3Dmol.svg)](https://cdnjs.com/libraries/3Dmol)
[![codecov](https://codecov.io/gh/3dmol/3Dmol.js/branch/master/graph/badge.svg)](https://codecov.io/gh/3dmol/3Dmol.js)
[![Github CI](https://github.com/3dmol/3Dmol.js/actions/workflows/CI.yml/badge.svg)](https://github.com/3dmol/3Dmol.js/actions)

3Dmol.js is an object-oriented, WebGL accelerated JavaScript library for online molecular visualization.

Since 3Dmol.js is licensed under the permissive BSD open-source license, you are free to use it in any project, as long the code is properly acknowledged and [cited](http://dx.doi.org/10.1093/bioinformatics/btu829).

With 3Dmol.js, you can add beautifully rendered molecular visualizations to your web applications. Features include:
* support for pdb, sdf, mol2, xyz, cif, cdjson, mmtf, prmtop, gro, pqr, cube, and vasp formats
* parallelized molecular surface computation
* sphere, stick, line, cross, cartoon, and surface styles
* atom property based selection and styling
* labels
* clickable interactivity with molecular data
* geometric shapes including spheres and arrows

See the [documentation](https://3dmol.org/doc/index.html) to learn how to use 3Dmol.js as a [hosted viewer](https://3dmol.org/doc/tutorial-url.html), [embeddable viewer](https://3dmol.org/doc/tutorial-embeddable.html), or as a component of a larger application.

## Examples

### [HTML](https://3dmol.org/doc/tutorial-embeddable.html)

<img src="examples/embed.png" width=400>

```html
<script src="https://3Dmol.org/build/3Dmol-min.js"></script>     
 
 <div style="width: 400px; height: 400px;" 
        class='viewer_3Dmoljs' data-pdb='4N8T' data-style='cartoon:color=spectrum'
        data-surface='opacity:.7;color:white'></div>
```

#### JavaScript
We support the use of both PDB queries as well as PDB files.

![Alt Text](examples/example1.png)

First you simply create the viewer with a div's id.
```javascript
var viewer = $3Dmol.createViewer($("#div"));
```
Then you can download a protein data bank model (here pdb:1MO8) and display it with the styling of your choosing.

```javascript
$3Dmol.download("pdb:1MO8",viewer,{multimodel:true, frames:true},function(){
	viewer.setStyle({}, {cartoon:{color:"spectrum"}});
	viewer.render();
});

```
#### Surfaces
We also support the use of surfaces that are asynchronously loaded and support different color schemes

![Alt Text](examples/example2.png)

```javascript
viewer.addSurface($3Dmol.SurfaceType.VDW, {
    opacity:0.85,
    voldata: new $3Dmol.VolumeData(volumedata, "cube"),
    volscheme: new $3Dmol.Gradient.ROYGB(range[1],range[0])
},{});
```

#### Shapes
The use of different shapes and styles is supported.

![Alt Text](examples/example3.png)

```javascript
viewer.addCylinder({start:{x:0.0,y:2.0,z:0.0},
    end:{x:0.0,y:10.0,z:0.0},
    radius:0.5,
    fromCap:false,
    toCap:true,
    color:'teal'});
viewer.addCylinder({start:{x:15.0,y:0.0,z:0.0},
    end:{x:20.0,y:0.0,z:0.0},
    radius:1.0,
    color:'black',
    fromCap:false,
    toCap:false});
```

## Documentation

Please check out our documentation at [3dmol.js](https://3dmol.org/doc/index.html). We have tutorials, as well as the stable release of the platform.

## Contact

Please address any questions or concerns to [dkoes@pitt.edu](mailto:dkoes+3dmol@pitt.edu).
You may also [submit an issue](https://github.com/3dmol/3Dmol.js/issues/new/choose) on github.

## Citing

If you use 3Dmol.js, please cite our [Bioinformatics paper](http://bioinformatics.oxfordjournals.org/content/31/8/1322).

## Funding

3DMol.js is funded through R35GM140753 (and previously R01GM108340) from the National Institute of General Medical Sciences. The content is solely the responsibility of the authors and does not necessarily represent the official views of the National Institute of General Medical Sciences or the National Institutes of Health.

---
_Source: https://npm.io/package/3dmol · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._