Get up and running with Molstar Viewer apps in minutes!

The project serves four different Molstar visualization applications:

App	URL	Description
🧬 Viewer	/viewer	Standard molecular structure viewer
🔬 Docking Viewer	/docking-viewer	View molecular docking results
🔭 Mesoscale Explorer	/mesoscale-explorer	Explore mesoscale structures
📖 MVS Stories	/mvs-stories	Interactive visualization stories

Load any PDB structure by ID:

/viewer?pdb=1cbs

Examples:

• /viewer?pdb=1FAP - HIV-1 protease
• /viewer?pdb=1CRN - Crambin
• /viewer?pdb=4HHB - Hemoglobin

/viewer?afdb=P00520

/viewer?emdb=EMD-1832

/viewer?structure-url=https://files.rcsb.org/download/1FAP.pdb&structure-url-format=pdb

/viewer?pdb=1cbs&hide-controls=1

Use RCSB instead of default PDBe:

/viewer?pdb=1cbs&pdb-provider=rcsb

Better lighting for publication-quality images:

/viewer?pdb=1cbs&illumination=1

/viewer?pdb=1cbs&hide-controls=1&pdb-provider=rcsb&illumination=1&pixel-scale=2

Parameter	Values	Default	Description
pdb	PDB ID	-	Load PDB structure
afdb	UniProt ID	-	Load AlphaFold structure
emdb	EMDB ID	-	Load EMDB map
hide-controls	0 or 1	0	Hide UI controls
pdb-provider	pdbe, rcsb	pdbe	Data provider
illumination	0 or 1	0	Enable illumination
pixel-scale	Number	1	Rendering resolution
collapse-left-panel	0 or 1	0	Collapse left panel

See frontend/README.md for complete parameter list.

Clean viewer without controls:

/viewer?pdb=1cbs&hide-controls=1&collapse-left-panel=1

For screenshots and publications:

/viewer?pdb=1cbs&pixel-scale=2&illumination=1

Use as iframe with minimal UI:

<iframe 
  src="https://your-val.val.town/viewer?pdb=1cbs&hide-controls=1" 
  width="800" 
  height="600"
  frameborder="0">
</iframe>

From your own server:

/viewer?structure-url=https://yourserver.com/structure.pdb&structure-url-format=pdb

Use docking viewer for side-by-side comparison:

/docking-viewer?structure1=1cbs&structure2=2cbs

MVS Stories for guided visualizations:

/mvs-stories?story-id=example-story

Explore large assemblies:

/mesoscale-explorer?cellpack-url=https://example.com/cellpack.json

1. Check if PDB ID is valid at RCSB PDB
2. Try different provider: add &pdb-provider=rcsb
3. Check browser console for errors (F12)

1. Lower pixel scale: &pixel-scale=0.5
2. Use WebGL1: &prefer-webgl1=1
3. Try different power preference: &power-preference=low-power

1. Open browser console (F12) to see error messages
2. Check if JSR imports are loading correctly
3. Verify browser supports WebGL

• Read the full README.md for architecture details
• Check frontend/README.md for all URL parameters
• Explore the original source code in viewer/, docking-viewer/, etc.
• Review CHANGELOG.md for migration details

<a href="/viewer?pdb=1cbs">View Structure 1CBS</a>

function loadStructure(pdbId) {
  window.location.href = `/viewer?pdb=${pdbId}`;
}

// Wait for viewer to be created
window.addEventListener('molstarViewerCreated', (event) => {
  const viewer = event.detail.viewer;
  console.log('Viewer ready!', viewer);
  
  // Now you can interact with the viewer programmatically
  viewer.loadPdb('1cbs');
});

• Bookmark common structures with full URLs including parameters
• Use consistent providers (pdbe or rcsb) for better caching
• Start with pixel-scale=1 and adjust based on performance
• Enable illumination for better visual quality in presentations
• Hide controls when embedding in other applications
• Check the console (F12) for detailed error messages

• Mol* Homepage
• RCSB PDB
• PDBe
• AlphaFold DB
• EMDB

---

Ready to visualize? Start with: /viewer?pdb=1cbs