GenomeBrowser

import { GenomeBrowser, type GenomeTrack } from "react-bio-viz";

const tracks: GenomeTrack[] = [
  { id: "repeats", label: "Repeats", kind: "feature", data: [{ id: "r1", start: 1200, end: 1800, label: "LINE" }] },
  { id: "rnaseq", label: "RNA-seq", kind: "coverage", data: [{ position: 1000, value: 12 }, /* … */] },
  { id: "gene", label: "My gene", kind: "genemodel", data: gene },
];

<GenomeBrowser tracks={tracks} referenceLength={50_000} referenceName="chr1" width={900} />;

All tracks share one pan/zoom viewport and a position ruler. Overlapping features are stacked into rows automatically. trackRenderers adds your own track kinds or replaces the built-in ones.

SimpleGenomeBrowser

The same view without the toolbar, and fully controlled — for building your own navigation around it. It keeps no state: every interaction reports through its on*Change callback and shows once you pass the value back (see Simple components).

const [viewport, setViewport] = useState<Viewport>();

<SimpleGenomeBrowser tracks={tracks} referenceLength={length} viewport={viewport} onViewportChange={setViewport} />

All props → · SimpleGenomeBrowser props →