Open Source React Component
HPO Visualizer
A beautiful, interactive React component for visualizing human organ systems with Human Phenotype Ontology integration.
Scroll to explore
Built for Developers
Everything you need to integrate beautiful organ visualizations into your medical or health-related applications.
🎨
Customizable Colors
Multiple color schemes with full palette customization. Adapt the visualization to match your brand or application theme.
🖱️
Interactive Controls
Hover and click interactions with smooth animations. Control organ visibility, selection, and highlighting programmatically.
⚡
Lightweight & Fast
Pure SVG rendering with zero dependencies. Optimized for performance with minimal bundle size impact.
Simple Integration
Get started in minutes with our intuitive API
App.tsx
import { HpoVisualizer } from 'hpo-visualizer';
export default function App() {
return (
<HpoVisualizer
organs={[
{ id: 'heart', colorName: 'blue' },
{ id: 'lung', colorName: 'yellow' },
]}
onSelect={(id) => console.log(id)}
/>
);
}