• Townie
    AI
  • Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
zcpbx

zcpbx

MolstarViewer

Public
Like
MolstarViewer
Home
Code
3
README.md
H
index.tsx
molstar-viewer.tsx
Branches
1
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
Code
/
Search
index.tsx
https://zcpbx--0ef36fdca84411f098c20224a6c84d84.web.val.run
README.md

Molstar Viewer - 1FAP Structure

This Val displays the 1FAP (HIV-1 protease) protein structure using the Molstar Viewer v5.

Features

  • Interactive 3D Visualization: Full Molstar viewer with rotation, zoom, and pan controls
  • PDB Structure Loading: Loads the 1FAP structure directly from RCSB PDB
  • Responsive Design: Works on desktop and mobile devices
  • Error Handling: Graceful fallbacks and loading indicators

Structure Information

1FAP: HIV-1 protease complexed with the inhibitor CGP 53820

  • Resolution: 2.3 Å
  • Method: X-ray crystallography
  • Organism: Human immunodeficiency virus 1

Files

  • index.tsx - HTTP endpoint that serves the HTML page
  • molstar-viewer.tsx - React component containing the Molstar viewer
  • README.md - This documentation

Usage

The viewer loads automatically when you visit the HTTP endpoint. Use these mouse controls:

  • Left click + drag: Rotate the structure
  • Right click + drag: Zoom in/out
  • Middle click + drag: Pan the view

Technical Details

  • Uses Molstar v5.0.0 from unpkg CDN
  • React 18.2.0 for the UI components
  • TypeScript for type safety
  • Loads PDB files directly from RCSB PDB servers

Customization

To view a different PDB structure, modify the pdbId prop in the MolstarViewer component:

Create val
<MolstarViewer pdbId="YOUR_PDB_ID" />

Links

  • View 1FAP on RCSB PDB
  • Molstar Documentation
  • PDB Format Specification
HTTP
  • index.tsx
    zcpbx--0e…84.web.val.run
Code
README.md
H
index.tsx
molstar-viewer.tsx
FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
ExploreDocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.