JBrowse 2 · Linear Genome View examples

JBrowse Linear Genome View

@jbrowse/react-linear-genome-view2 is a React component that embeds a full linear genome browser (tracks, search, zoom/pan, and track selection) in your app. For the parts rather than the finished component, the Build your own examples start from this same engine and add the chrome back one piece at a time.

Live demo

Human genes on hg38, opened at the SHH locus. Everything below is the source that produced it.

View source — 35 lines
import { LinearGenomeView } from '@jbrowse/react-linear-genome-view2'

export default function WithInit() {
  return (
    <LinearGenomeView
      assembly={{
        name: 'hg38',
        uri: 'https://jbrowse.org/genomes/GRCh38/fasta/hg38.prefix.fa.gz',
        refNameAliases: {
          uri: 'https://jbrowse.org/genomes/GRCh38/hg38_aliases.txt',
        },
        cytobands: {
          uri: 'https://jbrowse.org/genomes/GRCh38/cytoBand.txt',
        },
      }}
      tracks={[
        {
          type: 'FeatureTrack',
          trackId: 'hg38-ncbi-refseq-curated',
          name: 'NCBI RefSeq Curated',
          assemblyNames: ['hg38'],
          adapter: {
            type: 'Gff3TabixAdapter',
            uri: 'https://jbrowse.org/ucsc/hg38/ncbiRefSeqCurated.gff.gz',
            csi: true,
          },
        },
      ]}
      init={{
        loc: 'chr7:155,799,529..155,812,871',
        tracks: ['hg38-ncbi-refseq-curated'],
      }}
    />
  )
}

Install

yarn add @jbrowse/react-linear-genome-view2
npm install @jbrowse/react-linear-genome-view2 --legacy-peer-deps
pnpm add @jbrowse/react-linear-genome-view2

--legacy-peer-deps silences npm's peer-dep warnings. yarn and pnpm don't need it.

Two things that cost people an hour

It renders on the client only. The view needs a real DOM; server-rendering and hydrating it are not supported. Vite, rsbuild and plain script tags just work. In an SSR framework, mount it client-side — our Next.js demo wraps it in a 'use client' component loaded through next/dynamic with { ssr: false }.

It wants Roboto. Add @fontsource/roboto or the chrome falls back to the host page's font.

A step-by-step build is the embedding tutorial; the embedded components page compares the packages and lists a deployed starter repo per bundler (Vite, rsbuild, Next.js, vanilla JS). The full assembly and track config shape is the config guide.

Browse the examples

Each example renders live and shows its full source.

Getting started

Navigation & search

Tracks & styling

Sessions & integration

Real-world demos