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
JBrowse React Circular Genome View
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