Interactive Demo

HPO Visualizer

Explore organs interactively — hover, click, and customize colors

growthHuman bodyconstitutionalthoracicCavitylungbreastheartdigestivekidneylimbsintegumentheadeyeearnervousvoicemetabolismcellendocrineneoplasmimmunemuscleprenatalblood

Current State

HoveredNone
SelectedNone
Visible organs23 / 23

Organ Controls

Example.tsx
import { HpoVisualizer } from 'hpo-react-visualizer';

// Basic usage with visible organs
<HpoVisualizer
  visibleOrgans={['heart', 'lung', 'digestive']}
  onSelect={(id) => console.log('Selected:', id)}
/>

// With external state control
<HpoVisualizer
  organs={[
    { id: 'heart', colorName: 'blue' },
    { id: 'lung', colorName: 'yellow', showOutline: true },
  ]}
  selectedOrgan={selectedOrgan}
  hoveredOrgan={hoveredOrgan}
  onSelect={setSelectedOrgan}
  onHover={setHoveredOrgan}
/>