Embedded components

JBrowse's embedded components let you add genome browsing to any webpage.

See the embedding tutorial and the FAQ entry on embedded vs. full JBrowse for background.

Choosing the right package

| Goal | Package | | -------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Full JBrowse UI (multiple views, synteny, file import dialogs) | @jbrowse/react-app2 — Storybook | | Single linear genome view, API-controlled data | @jbrowse/react-linear-genome-view2 — Storybook | | Static deployment with no build step (script tag) | jbrowse-web UMD bundle |

@jbrowse/react-app2

This package bundles the entire jbrowse-web application as an npm-installable React component.

Bundler examples for @jbrowse/react-app2:

| 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 | |

@jbrowse/react-linear-genome-view2

A single linear genome view as an npm-installable React component.

Bundler examples for @jbrowse/react-linear-genome-view2:

| 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/ |

@jbrowse/react-circular-genome-view2

A single JBrowse 2 circular view as an npm-installable React component.

Bundler examples for @jbrowse/react-circular-genome-view2:

| Syntax | Demo | Source code | Note | | ---------- | ----------------------------------------------- | ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | 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 |