Skip to main content

Embedded components

Our embedded components allow you to use individual JBrowse views in your application

JBrowse React Linear Genome View

This component consists of a single JBrowse 2 linear view.

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

BundlerDemoSource codeNote
create-react-app v4demosource code (download)no polyfills needed in create-react-app v4. on newer versions of node, you can need to use export NODE_OPTIONS=--openssl-legacy-provider before building cra4 apps
create-react-app v5demosource code (download)for create-react-app v5, we use craco to update the webpack config to polyfill some node modules. This demo also uses webworkers, which is a unique ability with webpack 5. See https://jbrowse.org/storybook/lgv/main/?path=/story/linear-view--with-web-worker for details
vitedemosource code (download)for vite, we use rollup to polyfill some node polyfills similar to craco in create-react-app v5.
next.jsdemosource code (download)uses next.js 13. Currently is hardcoded to use /demos/lgv-nextjs/ as sub-uri, update next.config.js to customize as needed
vanilla jsdemosource code (download)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/

JBrowse React Circular Genome View

This component consists of a single JBrowse 2 circular view.

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

SyntaxDemoSource codeNote
create-react-app v4demosource code (download)no polyfills needed in create-react-app v4. on newer versions of node, you can need to use export NODE_OPTIONS=--openssl-legacy-provider before building cra4 apps
create-react-app v5demosource code (download)for create-react-app v5, we use craco to update the webpack config to polyfill some node modules
vanilla jsdemosource code (download)uses a script tag to include a UMD bundle, and doesn't require any transpilation or bundling