3D Structure Inspector
Render PDB, SDF, MOL2, XYZ, CIF, GRO, CUBE, MMTF, VASP, and more.
PDB · SDF · MOL · MOL2 · XYZ · CIF · CDJSON · MMTF · PRMTOP · GRO · PQR · CUBE · VASP
How to inspect a molecular structure
Load a coordinate file, choose how it should be drawn, then carve out the part you actually care about, all rendered locally by your GPU, with no upload step.
Load a structure
Drag in a PDB, GRO, XYZ, CIF, MOL2, CUBE or other coordinate file, or type a four-character PDB ID to pull it straight from RCSB.
Pick a representation
Choose cartoon for proteins, stick or ball-and-stick for small molecules, sphere for packing. Colour by element, chain, B-factor, secondary structure, or set every element by hand.
Narrow the selection
Use the builder dropdowns for chain, residue and element, add a within radius for binding pockets, or slice along an axis with the spatial sliders. Isolate hides everything else; Highlight keeps the context as a faint wireframe.
Measure and export
Click two atoms for a distance or three for an angle, switch on Figure mode to fade the surrounding structure, restyle the lines and labels to taste, then save a high-resolution PNG or copy the numbers as a table.
How the viewer works
WebGL rendering
Geometry is built and rasterised by 3Dmol.js on your graphics card. Because the whole scene lives in GPU memory, rotation and zoom stay smooth on structures with hundreds of thousands of atoms, but every style change has to rebuild that geometry, which is why very large systems take a moment to re-draw.
Selections are JSON, not strings
3Dmol filters atoms with plain JavaScript objects such as {chain:'A', resn:'HEM'}. The query box compiles your text into exactly that shape, so anything you type here maps directly onto the library's own API, useful if you later script the same selection yourself.
Neighbour search
Distance queries (within:) index the target atoms into a uniform grid first, then test only the cells that could fall inside the radius. That keeps a pocket selection near-instant instead of comparing every atom against every other atom.
Labels are built across frames
Placing thousands of labels in one synchronous loop is what freezes a tab, nothing paints until the last one is done. Labels here are added in slices of about 150 per animation frame, with a progress readout, so the viewer stays interactive and you can watch them fill in. Starting a new label pass cancels the one in flight rather than queueing a second.
Scope beats capping
A cap alone still labels whichever atoms happen to come first in the file, which is rarely what you are looking at. Set Label scope to Current selection to label only what you isolated; when a scope still exceeds the limit, the atoms nearest the centre of the view are kept in preference to the rest.
The selection language
Every token is key:value, separated by spaces. Tokens are combined with AND, chain:A elem:Fe means iron atoms in chain A. Prefix any token with not: (or !) to invert just that token.
Atom attributes
| Token | Selects |
|---|---|
chain:A | Chain identifier as written in the file. |
resn:HOH | Residue name. Accepts comma lists: |
resi:1-50 | Residue number: a single value, a comma list, or an inclusive range. |
elem:Fe | Element symbol, case sensitive as stored in the file. |
atom:CA | Atom name | more specific than element ( |
ss:h | Secondary structure: |
b:>30 | B-factor. Supports |
serial:1-99 | Atom serial number range. |
Named groups
| Token | Selects |
|---|---|
protein:1 | Standard amino-acid residues. |
nucleic:1 | DNA and RNA residues. |
solvent:1 | Water under its common names (HOH, WAT, SOL, TIP3…). |
ion:1 | Frequently seen monatomic ions. |
backbone:1 | Protein backbone atoms N, CA, C, O. |
sidechain:1 | Amino-acid atoms that are not backbone. |
hetero:1 | Atoms flagged as HETATM | ligands, cofactors, solvent. |
Geometry and logic
| Token | Selects |
|---|---|
x:>4.8 | Cartesian coordinate filter on |
within:5,chain:A | Every atom within 5 Å of anything matching the inner selection. The radius comes first, then a comma, then a nested query. |
not:resn:HOH | Inverts the token that follows. |
or:chain:A|chain:B | Union of the pipe-separated clauses. |
byres:1 | Expands the result so that any residue with one selected atom is selected entirely. |
Worked examples
| Query | Meaning |
|---|---|
within:5,resn:HEM byres:1 | The complete residues lining the haem pocket, the standard way to picture a binding site. |
within:5,chain:A not:chain:A byres:1 | The protein–protein interface: residues close to chain A that belong to a different chain. |
protein:1 not:solvent:1 b:>60 | The most mobile parts of the protein | often loops and termini. |
ss:h chain:A | Helices of chain A only. |
z:>30 not:solvent:1 | The upper leaflet of a membrane system with water stripped out. |
References & documentation
- Rego, N., & Koes, D. (2015). 3Dmol.js: molecular visualization with WebGL. Bioinformatics, 31(8), 1322–1324. doi:10.1093/bioinformatics/btu829
- 3Dmol.js API, AtomSelectionSpec reference (University of Pittsburgh).
- Berman, H. M., et al. (2000). The Protein Data Bank. Nucleic Acids Research, 28(1), 235–242. rcsb.org
- Wikipedia: Accessible surface area · B-factor.
Frequently asked questions
Is my structure uploaded anywhere?
Which file formats are supported?
Why does the cartoon style show nothing?
Why are my labels capped or disabled?
My high-resolution export came out smaller than I asked for.
What is the difference between Isolate and Highlight?
Which surface type should I use?
Turning on labels used to freeze the tab. What changed?
How do I make a clean measurement figure?
Can I get the measurement numbers out as data?
Why does building a surface still pause the viewer?
Can I script the same selections elsewhere?
chain:A resn:HEM is simply {chain:'A', resn:'HEM'} in the library's own API. Open the console and call app.select('within:5,resn:HEM') to get the matching atoms back as an array.Runs entirely in your browser, no data leaves your device. Rendering by 3Dmol.js (Rego & Koes, 2015).