Embedded components

Our embedded components allow you to use JBrowse in your application

@jbrowse/react-app2

This component embodies the entire jbrowse-web application as a NPM installable react component

Here is a table of different usages of the @jbrowse/react-app2 using different bundlers

Bundler	Demo	Source code	Note
next.js	demo	source code	Uses next.js. Currently is hardcoded to use /demos/app-nextjs/ as sub-uri, update next.config.js to customize as needed.
vite	demo	source code	Uses vite. This demo was updated to utilize the webworkers in 2024
rsbuild	demo	source code	Uses rsbuild (https://rsbuild.dev/)
vanillajs	demo	source code

This NPM package consists of a single linear genome view that is usable as a React component

Here is a table of different usages of the @jbrowse/react-linear-genome-view2 using different bundlers

Bundler	Demo	Source code	Note
vite	demo	source code	Uses vite. This demo was updated to utilize webworkers in 2024
rsbuild	demo	source code	Uses rsbuild (https://rsbuild.dev/)
next.js	demo	source code	Uses next.js. Currently is hardcoded to use /demos/lgv-nextjs/ as sub-uri, update next.config.js to customize as needed. This demo was updated to use webworkers in 2024
vanilla js	demo	source code	Uses a script tag to include a UMD bundle, and doesn't require any transpilation or bundling. see also dev tutorial here https://jbrowse.org/jb2/docs/tutorials/embed_linear_genome_view/01_introduction/

This component consists of a single JBrowse 2 circular view.

@jbrowse/react-circular-genome-view2 circular genome view React component on NPM
Storybook - docs for the circular genome view React component

Here is a table of different usages of the @jbrowse/react-circular-genome-view2 using different bundlers

Syntax	Demo	Source code	Note
create-react-app v5	demo	source code	Uses CRAv5 (webpack based)
vanilla js	demo	source code	Uses a script tag to include a UMD bundle, and doesn't require any transpilation or bundling
nextjs	demo	source code	Uses next.js