JBrowseMSA user guide
June 20, 2026 · View on GitHub
JBrowseMSA (the react-msaview package) is an interactive multiple sequence
alignment viewer that runs entirely in the browser. It renders a phylogenetic
tree alongside a protein or nucleotide alignment on HTML5 canvas, using tiled
scrolling so it stays responsive on very large inputs (it can render the 230k-
node UCSC SARS-CoV-2 sample tree). Nothing is uploaded — your data is parsed and
drawn locally.
This guide tours the live app. Every
figure below links to a live version of the app loaded into that exact state
via the ?data= URL parameter — click any screenshot to open and explore it
yourself. To embed the viewer in your own React/HTML/R code instead, see the
embedding guide.
Getting started
Open the app and you land on the import form.
The import form, with preloaded examples — a 230k-node COVID tree from UCSC, CLUSTAL-formatted alignments, RNA and protein Stockholm files, and a large tree+MSA generated by MAFFT. Click any example to load it, or supply your own data with the file/URL/paste inputs below.
You can load an alignment on its own, a tree on its own, or both together. When both are present, rows are ordered and connected to match the tree.
Loading your own data
The import form accepts a pasted string, a local file, or a remote URL for each of the alignment, the tree, and (optionally) a domain-annotation track.
| Input | Formats |
|---|---|
| Alignment | FASTA (gaps already inserted), Stockholm (.stock, single or multi-alignment, may embed a tree and SS), Clustal (.aln), A3M, EMF |
| Tree | Newick (.nh), or the tree embedded in a Stockholm/EMF file |
| Domains | InterProScan GFF3 (generate it with the CLI) |
Stockholm files may carry both the tree and a secondary-structure annotation inline, so a single file can populate the whole view. A "multi-Stockholm" file with several alignments is supported too.
A tour of the viewer
Once data is loaded the view has four parts:
- Tree panel (left) — the phylogeny, with clickable branch nodes.
- Alignment panel (right) — the residues, colored by the active scheme.
- Header (top) — menu buttons for files, color schemes, and tree/MSA settings, plus zoom controls.
- Minimap & conservation track — an overview ruler above the alignment for fast navigation and a per-column conservation histogram.
Hovering a column highlights the corresponding position across rows (and on the tree), making it easy to read a single site down the whole family.
Navigating
- Pan by click-dragging the alignment, or scroll vertically/horizontally.
- Zoom with the magnifier buttons in the header, or enable scroll zoom (MSA settings menu) to zoom with the mouse wheel.
- Fit the alignment to the window — fit both axes, horizontally, or vertically — from the zoom controls, and Reset zoom returns to defaults.
- Set tiny row height / column width to "zoom out" far enough to see big-picture patterns across a large alignment at a glance.
Color schemes
Open the palette menu in the header to switch schemes live.
The color-scheme menu. Protein schemes include clustal, maeditor, lesk, cinema, flower, and the jalview family (hydrophobicity, taylor, zappo, buried, and the propensity schemes); nucleotide schemes include nucleotide, rainbow_dna, and clustalx_dna.
Two schemes are dynamic — they color each column from statistics about the residues in that column rather than from a fixed per-letter table:
clustalx_protein_dynamic — ClustalX-style coloring driven by per-column
composition.
percent_identity_dynamic — columns shaded by their percent identity, so
conserved sites stand out.
Working with the tree
Click a branch node to collapse that subtree. Collapsing also hides any alignment columns that consist only of gaps introduced by the collapsed rows, so the alignment tightens up as you fold clades away.
A collapsed subtree, drawn as a triangle labelled with its tip count (here 3). The rows beneath it are hidden and the gap-only columns they introduced are removed.
The tree settings menu toggles branch-length rendering, right-aligned vs tree-adjacent labels, and clickable branch bubbles. You can also compute a neighbor-joining tree (BLOSUM62) directly from an alignment that arrived without one.
Protein domains
Load an InterProScan GFF3 track (from the import form, the Open domains… menu item, or by querying InterProScan from within the app) to overlay protein domains on the alignment. Each protein's domain coordinates are translated into MSA coordinate space, so they line up across the family even where alignment gaps shift the underlying sequence positions.
A real Src-family kinase family (SRC, YES, FYN, FGR, HCK, LYN, LCK, BLK) with
its tree and real InterProScan domains generated by
react-msaview-cli interproscan. Zoomed out to full length, the shared SH3,
SH2, and tyrosine-kinase catalytic domain architecture lines up across every
member.
Viewing metadata
Alignment file headers and per-sequence information are available from the Metadata dialog (file menu).
The metadata dialog showing the CLUSTAL header and the raw sequences, with options to copy them and to show/hide gaps.
Sharing and exporting
- Share a session by copying the page URL — the full view state (data, colors, zoom, collapsed clades) is encoded in it, so a collaborator who opens the link sees exactly what you see.
- Export an image with Export SVG (file menu) for a crisp, scalable figure of the current viewport or the entire alignment, optionally including the minimap and annotation tracks.
The Export SVG dialog — choose the whole alignment or just the current viewport, and whether to include the minimap and tracks.
Settings reference
The More settings dialog gathers the less-common options, including the color-scheme editor and tree/MSA layout controls.
The settings panel, with the color-scheme editor and other layout options.
Scaling to large data
Both axes are tiled, so memory and draw time scale with what's on screen rather than with the size of the file.
A real ~60-sequence ncRNA family (the Rfam Lysine riboswitch, RF00168) rendered with its full inferred tree and secondary-structure annotation, both extracted straight from the Stockholm file — the canvas tiling holds up well past toy- sized data.
Embedding and related projects
- Embed the viewer in your own app — see the embedding guide for React, the UMD-in-HTML bundle, and the R package.
- jbrowse-plugin-msaview — a JBrowse 2 plugin that shows an MSA alongside genome-browser panels (demo).
- ProteinBrowser — a fuller suite of protein-analysis tools built on this viewer.