Sequence alignment visualization for React.

A self-contained component that renders multi-FASTA data as a fully interactive alignment viewer — no backend, no preprocessing, no extra configuration.

View Documentation Try the Playground GitHub

Install

npm install reseqtjs

See it in action

Hemoglobin alpha-chain (HBA) across six vertebrates. Try the toolbar — color schemes, search, zoom, conservation track.

Desktop experience

The interactive alignment viewer is designed for desktop use. Open this page on a wider screen to explore the live demo.

Loading viewer…

Everything you need

Built for real-world use — not just a pretty colored grid.

Canvas rendering

Smooth scrolling and crisp rendering via HTML5 canvas. Handles hundreds of sequences and long alignments without layout issues.

Minimal API

Two props: fasta and isAminoAcid. Pass a FASTA string, get a fully functional viewer. Nothing more required.

Four color modes

Switch between residue, conservation, identity against reference, or monochrome — directly from the built-in toolbar.

Built-in dark mode

Responds to [data-theme="dark"] on <html> via a MutationObserver. One attribute change, instant update.

Rich interactions

Search, sort, zoom, select regions, copy as FASTA, export as PNG. Keyboard shortcuts for everything.

NT & AA support

Biochemically meaningful color palettes for both nucleotide and amino acid sequences. Color legend included.

Quick start

Up and running in under a minute.

Nucleotide alignment

App.tsx

import { ReSeqt } from "reseqtjs";
import "reseqtjs/style.css";

const fasta = `
>Seq1
ATGCATGCATGC
>Seq2
ATGC--GCATGC
>Seq3
ATGCATGC--GC
`.trim();

export default function App() {
  return <ReSeqt fasta={fasta} />;
}

Protein sequences

App.tsx

// For protein sequences, set isAminoAcid={true}
// to switch to the amino acid color scheme.
<ReSeqt fasta={proteinFasta} isAminoAcid />

Dark mode

// Toggle dark mode by setting data-theme on <html>.
// ReSeqt responds via a MutationObserver — no re-render needed.
document.documentElement.setAttribute("data-theme", "dark");

// Revert to light:
document.documentElement.setAttribute("data-theme", "light");

Dark mode

One attribute. Full dark mode.

ReSeqt watches for data-theme="dark" on <html> via a MutationObserver. Canvas colors and UI chrome both switch instantly. Theming is further customizable via CSS variables.

Dark mode guide

Who is this for?

React developers

Building a bioinformatics web app and need a production-ready alignment viewer? Install, import, pass FASTA. Done.

Bioinformaticians

Exploring MSA data in the browser, sharing results with collaborators, or building custom tooling on web technologies.

Research & education

Embedding interactive alignments in papers, supplementary materials, course platforms, or lab portals.

Built for

Phylogeny.fr

ReSeqt was originally developed for Phylogeny.fr, a web platform for phylogenetic analysis. The need for a modern, embeddable alignment viewer — one that could live directly in a React app without a backend — is what led to this library. It is now open source and available for anyone to use.

Ready to use it?

Read the docs for the full API reference, or jump straight into the playground.

Read the docs Open Playground