3dmol

library2.5.4jsnpmunverified

3Dmol.js is a WebGL-powered JavaScript library for interactive molecular visualization in browsers. Current stable version is 2.5.4, released with improvements to aromatic bond visualization. Releases occur approximately every 2-4 months with incremental feature additions and bug fixes. Key differentiators include support for multiple molecular formats (PDB, SDF, MOL2, XYZ, CIF, MMTF, etc.), parallelized surface computation, rich styling (cartoon, stick, sphere, surface), and both hosted/embeddable viewer modes. It is licensed under BSD and widely cited in bioinformatics. Unlike alternatives (e.g., NGL Viewer, JSmol), 3Dmol.js offers seamless integration with JavaScript apps and a simpler API for quick molecular rendering.

data

npm install 3dmol

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · 3DMOL

3dmol

datajavascriptv2.5.4

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

$3Dmol

✓ import $3Dmol from '3dmol'

✗ const $3Dmol = require('3dmol')

ESM default import for v2+. Node.js require works but is not guaranteed to be stable in all bundlers.

$3Dmol.createViewer

✓ import $3Dmol from '3dmol'; const viewer = $3Dmol.createViewer(element)

✗ const { createViewer } = require('3dmol')

createViewer is a method on the default export, not a named export.

$3Dmol.download

✓ import $3Dmol from '3dmol'; $3Dmol.download('pdb:1XYZ', viewer, {}, callback)

✗ const download = require('3dmol').download

Download is a method on the default export. Named import works in some bundlers but is not officially supported.

$3Dmol.SurfaceType

✓ import $3Dmol from '3dmol'; const surface = $3Dmol.SurfaceType.VDW

✗ const { SurfaceType } = require('3dmol')

SurfaceType is a property of the default export, not a named export.

Creates a 3Dmol.js viewer, loads a PDB structure, applies cartoon style, adds a surface, and draws a cylinder.

import $3Dmol from '3dmol'; const viewer = $3Dmol.createViewer('viewer-div', { backgroundColor: 'white', antialias: true }); $3Dmol.download('pdb:4N8T', viewer, {}, function() { viewer.setStyle({}, {cartoon: {color: 'spectrum'}}); viewer.render(); }); viewer.addSurface($3Dmol.SurfaceType.VDW, { opacity: 0.85, voldata: new $3Dmol.VolumeData({}, 'cube'), volscheme: new $3Dmol.Gradient.ROYGB(-5, 5) }, {}); viewer.addCylinder({ start: {x: 0, y: 2, z: 0}, end: {x: 0, y: 10, z: 0}, radius: 0.5, color: 'teal' });

3dmol --version

Debug

Known issues

breakingIn some older versions, Background transparency rendering can cause WebGL context loss with antialiasing.

fix

Upgrade to >=2.4.1 or set antialias: false

affects: <2.4.1

breakingViewer grid bug on large canvases in some browsers.

fix

Upgrade to >=2.5.3

affects: <2.5.3

deprecatedThe use of require() with CommonJS may not work in all bundlers; ESM imports are recommended.

fix

Use import $3Dmol from '3dmol' instead of require

affects: >=2.0.0

gotchaAntialiasing may not work as expected with very small or very large viewports.

fix

Adjust maxpixels or antialias settings; see documentation

affects: >=2.4.0

gotchaSurface computation is async; ensure viewer.render() is called after surface added.

fix

Use callback in addSurface or call render after promise resolves

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'createViewer')

Importing as named export 'createViewer' instead of default import.

fix

Use import $3Dmol from '3dmol' then $3Dmol.createViewer

WebGL context lost error

Multiple viewers or inappropriate antialiasing settings in older versions.

fix

Upgrade to >=2.4.1 or use a single viewer instance

Error: PDB parsing error: unexpected token

File path not resolved or CORS issue when loading local files.

fix

Ensure file is served over HTTP/HTTPS and correct path is provided

Cannot find module '3dmol'

Package not installed or installed in wrong location.

fix

Run npm install 3dmol or include script tag from CDN

Upgrade

Version history

2.5.4latest on npm

Audit

Dependencies

gl-matrixrequiredUsed for WebGL matrix operations

lodashrequiredUtility functions used internally

Agent activity

87 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/3dmol/3Dmol.js ↗

packagehttps://www.npmjs.com/package/3dmol ↗

homepagehttps://3dmol.csb.pitt.edu ↗