JBrowse Circular Genome View
@jbrowse/react-circular-genome-view2 is a React component that embeds a whole-genome circular overview — well suited to structural variants and other long-range, cross-chromosome relationships. For a single linear-track browser, use the @jbrowse/react-linear-genome-view2 component instead, and the Build your own examples for one whose chrome you draw yourself.
Install
npm install @jbrowse/react-circular-genome-view2 react react-domUsage
The declarative CircularGenomeView component takes an assembly and tracks, plus an init for which tracks to open (the config guide covers the assembly/track shape). Because it draws to canvas and uses browser-only APIs, render it client-side only — in a server-rendered framework (Next.js, Remix), load it with the framework's client-only wrapper (e.g. next/dynamic with { ssr: false }). The Embedding JBrowse tutorial is a worked example, and the embedded components page compares the packages and links Vite/Next.js starter templates.
Browse the examples
Each example renders live and shows its full source.
Getting started
- Volvox structural variantsA structural-variant VCF on the volvox assembly, via the managed CircularGenomeView component.
- Show a track programmaticallyOpen a track imperatively via showTrack instead of through the init prop.
- Put the session in the URLSerialize the session with encodeSession and restore it with decodeSession, for a sharable link.