The simplest example

One component, three props: assembly, tracks, view.

npm install @jbrowse/react-linear-genome-view2

The view renders on the client only: in Next.js, load it through next/dynamic with { ssr: false }. Add @fontsource/roboto, or the chrome falls back to the host page’s font.

View source — 20 lines

import { LinearGenomeView } from '@jbrowse/react-linear-genome-view2'

export default function OneLinearGenomeView() {
  return (
    <LinearGenomeView
      assembly={{
        name: 'volvox',
        uri: 'https://jbrowse.org/genomes/volvox/volvox.2bit',
      }}
      tracks={[
        {
          trackId: 'volvox_gff3',
          name: 'Volvox genes',
          uri: 'https://jbrowse.org/code/jb2/main/test_data/volvox/volvox.sort.gff3.gz',
        },
      ]}
      view={{ loc: 'ctgA:1105..1221', tracks: ['volvox_gff3'] }}
    />
  )
}