{"id":27574,"library":"3dmol","title":"3Dmol.js","description":"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.","status":"active","version":"2.5.4","language":"javascript","source_language":"en","source_url":"https://github.com/3dmol/3Dmol.js","tags":["javascript","typescript"],"install":[{"cmd":"npm install 3dmol","lang":"bash","label":"npm"},{"cmd":"yarn add 3dmol","lang":"bash","label":"yarn"},{"cmd":"pnpm add 3dmol","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Used for WebGL matrix operations","package":"gl-matrix","optional":false},{"reason":"Utility functions used internally","package":"lodash","optional":false}],"imports":[{"note":"ESM default import for v2+. Node.js require works but is not guaranteed to be stable in all bundlers.","wrong":"const $3Dmol = require('3dmol')","symbol":"$3Dmol","correct":"import $3Dmol from '3dmol'"},{"note":"createViewer is a method on the default export, not a named export.","wrong":"const { createViewer } = require('3dmol')","symbol":"$3Dmol.createViewer","correct":"import $3Dmol from '3dmol'; const viewer = $3Dmol.createViewer(element)"},{"note":"Download is a method on the default export. Named import works in some bundlers but is not officially supported.","wrong":"const download = require('3dmol').download","symbol":"$3Dmol.download","correct":"import $3Dmol from '3dmol'; $3Dmol.download('pdb:1XYZ', viewer, {}, callback)"},{"note":"SurfaceType is a property of the default export, not a named export.","wrong":"const { SurfaceType } = require('3dmol')","symbol":"$3Dmol.SurfaceType","correct":"import $3Dmol from '3dmol'; const surface = $3Dmol.SurfaceType.VDW"}],"quickstart":{"code":"import $3Dmol from '3dmol';\n\nconst viewer = $3Dmol.createViewer('viewer-div', {\n    backgroundColor: 'white',\n    antialias: true\n});\n\n$3Dmol.download('pdb:4N8T', viewer, {}, function() {\n    viewer.setStyle({}, {cartoon: {color: 'spectrum'}});\n    viewer.render();\n});\n\nviewer.addSurface($3Dmol.SurfaceType.VDW, {\n    opacity: 0.85,\n    voldata: new $3Dmol.VolumeData({}, 'cube'),\n    volscheme: new $3Dmol.Gradient.ROYGB(-5, 5)\n}, {});\n\nviewer.addCylinder({\n    start: {x: 0, y: 2, z: 0},\n    end: {x: 0, y: 10, z: 0},\n    radius: 0.5,\n    color: 'teal'\n});","lang":"typescript","description":"Creates a 3Dmol.js viewer, loads a PDB structure, applies cartoon style, adds a surface, and draws a cylinder."},"warnings":[{"fix":"Upgrade to >=2.4.1 or set antialias: false","message":"In some older versions, Background transparency rendering can cause WebGL context loss with antialiasing.","severity":"breaking","affected_versions":"<2.4.1"},{"fix":"Upgrade to >=2.5.3","message":"Viewer grid bug on large canvases in some browsers.","severity":"breaking","affected_versions":"<2.5.3"},{"fix":"Use import $3Dmol from '3dmol' instead of require","message":"The use of require() with CommonJS may not work in all bundlers; ESM imports are recommended.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Adjust maxpixels or antialias settings; see documentation","message":"Antialiasing may not work as expected with very small or very large viewports.","severity":"gotcha","affected_versions":">=2.4.0"},{"fix":"Use callback in addSurface or call render after promise resolves","message":"Surface computation is async; ensure viewer.render() is called after surface added.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-09T00:00:00.000Z","next_check":"2026-08-07T00:00:00.000Z","problems":[{"fix":"Use import $3Dmol from '3dmol' then $3Dmol.createViewer","cause":"Importing as named export 'createViewer' instead of default import.","error":"TypeError: Cannot read properties of undefined (reading 'createViewer')"},{"fix":"Upgrade to >=2.4.1 or use a single viewer instance","cause":"Multiple viewers or inappropriate antialiasing settings in older versions.","error":"WebGL context lost error"},{"fix":"Ensure file is served over HTTP/HTTPS and correct path is provided","cause":"File path not resolved or CORS issue when loading local files.","error":"Error: PDB parsing error: unexpected token"},{"fix":"Run npm install 3dmol or include script tag from CDN","cause":"Package not installed or installed in wrong location.","error":"Cannot find module '3dmol'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}