PkgFoundry
Catalog npm
Back to packageRELEASE DETAILS

2.5.5

npm

3dmol

JavaScript/TypeScript molecular visualization library

Published22 May 2026
Direct dependencies37
Transitive dependenciesNot calculated

README

Current package documentation

3Dmol.js

CDNJS codecov Github CI

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.

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 to learn how to use 3Dmol.js as a hosted viewer, embeddable viewer, or as a component of a larger application.

Examples

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

First you simply create the viewer with a div's id.

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.

$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

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

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. We have tutorials, as well as the stable release of the platform.

Contact

Please address any questions or concerns to dkoes@pitt.edu. You may also submit an issue on github.

Citing

If you use 3Dmol.js, please cite our Bioinformatics paper.

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.

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 37

Native requirements
37 direct targetsNot calculated transitive count
Package / targetRequirementRelationship
iobuffer
Environment
{
  "local_name": "iobuffer",
  "alias": false,
  "peer_metadata": null
}
^5.0.0runtime
netcdfjs
Environment
{
  "local_name": "netcdfjs",
  "alias": false,
  "peer_metadata": null
}
^3.0.0runtime
pako
Environment
{
  "local_name": "pako",
  "alias": false,
  "peer_metadata": null
}
^2.1.0runtime
upng-js
Environment
{
  "local_name": "upng-js",
  "alias": false,
  "peer_metadata": null
}
^2.1.0runtime
@babel/core
Environment
{
  "local_name": "@babel/core",
  "alias": false,
  "peer_metadata": null
}
^7.20.7development
@babel/eslint-parser
Environment
{
  "local_name": "@babel/eslint-parser",
  "alias": false,
  "peer_metadata": null
}
^7.19.1development
@babel/plugin-transform-typescript
Environment
{
  "local_name": "@babel/plugin-transform-typescript",
  "alias": false,
  "peer_metadata": null
}
^7.20.7development
@types/pako
Environment
{
  "local_name": "@types/pako",
  "alias": false,
  "peer_metadata": null
}
^2.0.0development
better-docs
Environment
{
  "local_name": "better-docs",
  "alias": false,
  "peer_metadata": null
}
github:3dmol/better-docs#masterdevelopment
canvas
Environment
{
  "local_name": "canvas",
  "alias": false,
  "peer_metadata": null
}
^2.11.0development
clean-jsdoc-theme
Environment
{
  "local_name": "clean-jsdoc-theme",
  "alias": false,
  "peer_metadata": null
}
github:3dmol/clean-jsdoc-theme#masterdevelopment
codecov
Environment
{
  "local_name": "codecov",
  "alias": false,
  "peer_metadata": null
}
^3.8.3development
del
Environment
{
  "local_name": "del",
  "alias": false,
  "peer_metadata": null
}
^7.0.0development
eslint
Environment
{
  "local_name": "eslint",
  "alias": false,
  "peer_metadata": null
}
^9.0.0development
eslint-webpack-plugin
Environment
{
  "local_name": "eslint-webpack-plugin",
  "alias": false,
  "peer_metadata": null
}
^5.0.0development
glcheck
Environment
{
  "local_name": "glcheck",
  "alias": false,
  "peer_metadata": null
}
github:3dmol/glcheckdevelopment
jest
Environment
{
  "local_name": "jest",
  "alias": false,
  "peer_metadata": null
}
^29.0.0development
jest-environment-jsdom
Environment
{
  "local_name": "jest-environment-jsdom",
  "alias": false,
  "peer_metadata": null
}
^29.3.1development
jest-fixed-jsdom
Environment
{
  "local_name": "jest-fixed-jsdom",
  "alias": false,
  "peer_metadata": null
}
^0.0.9development
jest-webgl-canvas-mock
Environment
{
  "local_name": "jest-webgl-canvas-mock",
  "alias": false,
  "peer_metadata": null
}
^0.2development
jquery
Environment
{
  "local_name": "jquery",
  "alias": false,
  "peer_metadata": null
}
^3.6.3development
jsdoc
Environment
{
  "local_name": "jsdoc",
  "alias": false,
  "peer_metadata": null
}
^4.0.0development
jsdom
Environment
{
  "local_name": "jsdom",
  "alias": false,
  "peer_metadata": null
}
^20.0.3development
jsdom-worker
Environment
{
  "local_name": "jsdom-worker",
  "alias": false,
  "peer_metadata": null
}
^0.3.0development
node-fetch
Environment
{
  "local_name": "node-fetch",
  "alias": false,
  "peer_metadata": null
}
^2.7.0development
raw-loader
Environment
{
  "local_name": "raw-loader",
  "alias": false,
  "peer_metadata": null
}
^4.0.2development
source-map-support
Environment
{
  "local_name": "source-map-support",
  "alias": false,
  "peer_metadata": null
}
^0.5.21development
taffydb
Environment
{
  "local_name": "taffydb",
  "alias": false,
  "peer_metadata": null
}
^2.7.3development
terser-webpack-plugin
Environment
{
  "local_name": "terser-webpack-plugin",
  "alias": false,
  "peer_metadata": null
}
^5.3.6development
ts-loader
Environment
{
  "local_name": "ts-loader",
  "alias": false,
  "peer_metadata": null
}
^9.4.2development
ts-node
Environment
{
  "local_name": "ts-node",
  "alias": false,
  "peer_metadata": null
}
^10.9.1development
tsc
Environment
{
  "local_name": "tsc",
  "alias": false,
  "peer_metadata": null
}
^2.0.4development
typescript
Environment
{
  "local_name": "typescript",
  "alias": false,
  "peer_metadata": null
}
^5.6.3development
url-loader
Environment
{
  "local_name": "url-loader",
  "alias": false,
  "peer_metadata": null
}
^4.1.1development
webpack
Environment
{
  "local_name": "webpack",
  "alias": false,
  "peer_metadata": null
}
^5.75.0development
webpack-bundle-analyzer
Environment
{
  "local_name": "webpack-bundle-analyzer",
  "alias": false,
  "peer_metadata": null
}
^4.7.0development
webpack-cli
Environment
{
  "local_name": "webpack-cli",
  "alias": false,
  "peer_metadata": null
}
^5.0.1development

Distribution files

1 collected
Distribution 1

Source distribution

Source file
Checksums from source
{
  "integrity": "sha512-kqNHouGqq3YfW58174tdERvm0XYTmP0tavQKOqIw1ouc2OJ7epkXEFrtEkVXV0clBZT2Ze2xHRC/qxX0u0qCdw==",
  "shasum": "932bff7b1490bf5ef531a36f9af439eae942d7ed",
  "tarball": "https://registry.npmjs.org/3dmol/-/3dmol-2.5.5.tgz",
  "fileCount": 494,
  "unpackedSize": 20652518,
  "signatures": [
    {
      "keyid": "SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U",
      "sig": "MEQCIEYQxbswCoFKc4Kp7pMmi621zwLuZIEBlR+PI43uB64NAiA1dGDzKSmYpe1xiF5UmW93CcBNOhveJvVlqlcSuMjWOg=="
    }
  ]
}

Repository

PENDING
3dmol/3dmol.js

Shared repository data · GitHub

License detected in repository
Not collected

Repository

PENDING
dkoes/3dmol.js

Shared repository data · GitHub

License detected in repository
Not collected

Metadata history

Meaningful changes
Current collected state Current

Observed since 20 Oct, 19:40 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:f3741d5c0b31aaa6bffdedd5a3d527f0b9a35b2d2d81158ff1ec7268059fd457

Other collected versions

2.5.422 Jan2.5.327 Sept2.5.230 Jul2.5.126 Jun2.5.03 Jun2.4.28 NovView all collected versions →