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.

@jbrowse/react-linear-genome-view linear genome view React component on NPM
Storybook - docs for the reusable linear genome view React component
Live demo with create-react-app v4 - (source code, download)
Live demo with create-react-app v5 - (source code, download). Note: for create-react-app v5, we use craco to update the webpack config to polyfill some node modules
Live demo with vite - (source code, download). Note: for vite, we use rollup to polyfill some node polyfills similar to craco in create-react-app v5
Live demo with vanilla JS - (source code, download). These vanilla JS demos use a script tag to include a UMD bundle, and don't require any transpilation or bundling

This component consists of a single JBrowse 2 circular view.

@jbrowse/react-circular-genome-view circular genome view React component on NPM
Storybook - docs for the reusable circular genome view React component
Live demo with create-react-app v4 - (source code, download)
Live demo with create-react-app v5 - (source code, download). Note: for create-react-app v5 we use craco to update the webpack config to polyfill some node modules
Live demo with vanilla JS - (source code, download). These vanilla JS demos use a script tag to include a UMD bundle, and don't require any transpilation or bundling