Examples

TipInteractive Examples

All examples on this page are fully interactive! You can edit the code and see changes in real-time. Use the controls to toggle auto-update and view execution logs.

This page provides practical, hands-on examples of using the MolViewSpec API in MolViewStories. Each example builds on concepts from the previous one.

Basic Example

Here’s a simple example that loads and displays a protein structure. We use the Mol* viewer and MolViewStories JavaScript libraries to dynamically build a MolViewSpec state tree which is rendered on a Mol* canvas.

Basic Protein Structure (1CBS)

What’s happening here? 1. Download: Fetch structure from PDBe 2. Parse: Read the binary CIF format 3. Model: Create a 3D structure 4. Component: Select polymer chains (protein/nucleic acid) 5. Representation: Show as cartoon (secondary structure) 6. Color: Apply blue color

Selections and Multiple Components

This example shows how to create multiple representations for different parts of a structure. We select the polymer, water, and ligand separately, each with its own style.

Protein with Ligand

Key concepts: - Multiple components: Each component() creates a separate selection - Branching: Store nodes in variables (like ligand) to add multiple children - Focus: The focus() method centers the camera on the ligand

Using Interactive Controls

When controls="true" is set, you get an interactive control panel: - Toggle auto-update on/off to control when the viewer re-renders - Show execution log to see execution details and errors - Edit the code and see changes in real-time

Interactive Controls Demo

Try it: Edit the color, change cartoon to ball_and_stick, or try selector: 'protein'

Separating Story and Scene Code

You can split your code using --- as a separator: - Story code (above ---): Hidden setup code, runs but doesn’t appear in editor - Scene code (below ---): Visible, editable code in the viewer

This is useful for: - Hiding boilerplate setup - Reusing structure definitions - Focusing attention on the interesting parts

Using Story and Scene Code

Writing Reusable Functions

Create functions to improve code reusability and reduce duplication:

Using Functions

Benefits: - Encapsulate common patterns - Make code more readable - Easy to reuse across scenes

Chain-Specific Coloring

Use selectors to apply different colors to specific chains:

Multi-Chain Coloring

Highlighting Residue Ranges

Select and highlight specific residue ranges:

Highlighting Active Site

Multiple Structures

Load and display multiple structures simultaneously:

Comparing Structures

Color Schemes

MolViewSpec supports various built-in color schemes:

Color Schemes

Representation Types

Explore different representation styles:

Representation Types

Code Block Attributes

You can customize code blocks with these attributes:

```{.molviewspec title="My Title" controls="true"}
// Your code here

```

Available attributes: - title: Display title in header (optional) - controls: Show interactive controls ("true" or "false", default: "false") - When enabled, adds auto-update toggle and execution log

MolViewSpec Builder API Reference

For complete API documentation, see:

Next Steps