Interactive API Demo
Try out the StorySplat Viewer API with this interactive demo. All API methods are exposed through buttons and controls, with real-time event logging.
What's in the Demo
The demo showcases all public API methods available on the ViewerInstance:
Mode Control
- Tour / Explore - Switch between guided tour and free exploration
- Orbit / Fly - Switch explore sub-modes
Navigation & Playback
- Prev / Next - Navigate between waypoints
- Play / Pause / Stop - Control autoplay
- Waypoint dropdown - Jump to specific waypoints
Camera Control
- Set Position - Programmatically set camera position (explore mode)
- Set Rotation - Programmatically set camera rotation (explore mode)
- Live position/rotation display
Progress Control
- Progress slider - Jump to any point in the tour
- Real-time progress sync during playback
Audio Control
- Mute / Unmute - Control all scene audio
Splat Swap
- Splat dropdown - Switch between additional splats
- Original - Return to initial splat
Hotspot Interaction
- Hotspot dropdown - List all hotspots
- Open / Close - Trigger hotspot popups programmatically
Portal Navigation
- Navigate to Scene - Jump to another scene by ID
Event Log
Real-time logging of all viewer events:
- ready, loaded, progress
- waypointChange, playbackStart, playbackStop
- splatChange, portalActivated
- error, warning
Example Code
// Create viewer
const viewer = await StorySplatViewer.createViewerFromSceneId(
document.getElementById('viewer'),
'your-scene-id'
);
// Mode control
viewer.setCameraMode('explore');
viewer.setExploreMode('orbit');
// Navigation (tour mode)
viewer.goToWaypoint(2);
viewer.play();
// Camera (explore mode)
viewer.setPosition(0, 1.6, 5);
viewer.setRotation(0, 180, 0);
// Audio
viewer.muteAll();
viewer.unmuteAll();
// Hotspots
const hotspots = viewer.getHotspots();
viewer.triggerHotspot(hotspots[0].id);
viewer.closeHotspot();
// Splat swap
const splats = viewer.getAdditionalSplats();
await viewer.goToSplat(splats[0].url);
viewer.goToOriginalSplat();
// Events
viewer.on('waypointChange', ({ index }) => {
console.log('Now at waypoint:', index);
});
Running Locally
You can also run the demo locally:
# Clone the repo
git clone https://github.com/storysplat/storysplat-viewer.git
cd storysplat-viewer
# Open the demo
open demo/api-controls-demo.html
Or serve it with a local server: