Documentation

Everything you need to integrate and configure ReSeqt in your React application.

Installation

npm install reseqtjs
# or
yarn add reseqtjs

ReSeqt requires React 19 as a peer dependency. It ships pre-compiled — no bundler configuration needed.

Usage

Import the component and its stylesheet. The CSS import is required — without it the layout and theming will break.

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

For protein sequences, pass isAminoAcid to use the amino acid color palette:

App.tsx

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

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

The component uses browser APIs (document, canvas). If you use SSR (Next.js, Remix…), load it with a dynamic import and ssr: false.

Props

ReSeqt has a deliberately minimal API. All interactive features — sorting, color scheme, zoom, search — are built into the toolbar inside the component.

Prop	Type	Default	Description
`fasta`	string	required	Raw multi-FASTA string. See Input format below.
`isAminoAcid`	boolean	`false`	When `true`, uses amino acid color scheme and legend instead of nucleotide.

ReSeqtProps is exported for use in typed projects: import type { ReSeqtProps } from 'reseqtjs'

Input format

The fasta prop accepts standard FASTA format as a plain string. Each sequence starts with a > header line, followed by one or more lines of sequence data.

>Human_HBA
MVLSPADKTNVKAAWGKVGAHAGEYGAEALERMFLSFPTT
>Mouse_HBA
MVLSGEDKSNIKAAWGKIGGHGAEYGAEALERMFASFPTT
>Zebrafish_HBA
MSLSDKDKAAVRALWSKIGPNVEADIGAEALGRMLTVYPQ

Gap characters–, . and spaces are all treated as gaps.

Multi-line sequencesThe parser concatenates lines automatically. Line breaks inside a sequence are fine.

WhitespaceLeading and trailing whitespace around sequence data is stripped.

Empty sequencesAccepted gracefully. They appear as all-gap rows in the viewer.

Alignment sizeNo hard limit is enforced. Performance depends on the browser and the device — see Notes below.

Color schemes

The toolbar includes a color scheme selector. Four modes are available:

Mode	Description
Residue	Static per-character colors based on biochemical type. Default mode.
Conservation	Intensity scaled by conservation score (0–1) per column. Higher conservation = more saturated.
Identity	Match/mismatch compared against a selected reference sequence. The reference row uses residue colors.
Mono	No background colors — text only. Most readable at zoom ≥ 14 px/cell.

Nucleotide palette (isAminoAcid=false, default)

A · Adenine

T / U · Thymine

C · Cytosine

G · Guanine

Ambiguous

Amino acid palette (isAminoAcid=true)

Groups residues by biochemical property:

Group	Residues	Color
Hydrophobic	A V I L M F W	Indigo
Tyrosine	Y	Violet
Histidine	H	Cyan
Polar	S T N Q	Emerald
Basic / Positive	K R	Red
Acidic / Negative	D E	Orange
Cysteine	C	Yellow
Glycine	G	Slate
Proline	P	Pink

Keyboard shortcuts

Shortcut	Action
Ctrl + F	Open sequence search (filter by name)
Ctrl + G	Go to position (1-based column index)
Ctrl + = / Ctrl + +	Zoom in
Ctrl + −	Zoom out
Ctrl + Scroll	Zoom with mouse wheel
Ctrl + A	Select all sequences and columns
Ctrl + C	Copy selected region as FASTA
Esc	Close open panels / clear selection

Dark mode

ReSeqt has full dark mode support. It reads data-theme="dark" on the <html> element and switches both CSS variables and canvas rendering colors automatically. A MutationObserver watches for changes — no prop, no React state, no page reload needed.

Static dark mode

Set the attribute directly on <html> in your HTML file:

index.html

<!-- index.html -->
<html data-theme="dark">

Dynamic toggle

Toggle at runtime via JavaScript:

// Toggle at runtime
document.documentElement.setAttribute("data-theme", "dark");

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

React toggle component

ThemeToggle.tsx

"use client";
import { useState } from "react";

export function ThemeToggle() {
  const [dark, setDark] = useState(false);

  const toggle = () => {
    const next = !dark;
    setDark(next);
    document.documentElement.setAttribute("data-theme", next ? "dark" : "light");
  };

  return <button onClick={toggle}>{dark ? "Light" : "Dark"}</button>;
}

Theming

ReSeqt uses CSS custom properties for all UI chrome (toolbar, labels, panels). You can override them in your own stylesheet to match your application's theme. Import your overrides after reseqtjs/style.css so they take precedence.

Core CSS variables

Variable	Light	Dark
--clr-surface-a0	#ffffff	#0f172a
--clr-surface-a10	#f8fafc	#1e293b
--clr-surface-a20	#f1f5f9	#334155
--clr-surface-a30	#e2e8f0	#475569
--clr-border	#e2e8f0	#334155
--clr-input-bg	#ffffff	#1e293b
--clr-primary-a0	#0071f2	#3b82f6
--clr-text-secondary	#475569	#94a3b8
--clr-text-muted	#64748b	#64748b

Overriding variables

theme.css

/* Import reseqtjs styles first */
import "reseqtjs/style.css";

/* Then override variables in your own CSS */
:root {
  --clr-primary-a0: #7c3aed;
  --clr-surface-a0: #fafafa;
  --clr-border: #e4e4e7;
}

[data-theme="dark"] {
  --clr-primary-a0: #a78bfa;
  --clr-surface-a0: #18181b;
  --clr-border: #27272a;
}

Note: Canvas rendering colors (cell backgrounds, gap color, row stripes) are computed in JavaScript from the current data-theme value and are not exposed as CSS variables. Those cannot be overridden via CSS.

Notes

Character labels at small zoom

Residue letters are only shown at zoom levels ≥ 14 px/cell. The default cell size is 11 px. Zoom in using the toolbar or Ctrl + scroll to see individual characters.

Large alignments

There is no hard limit on alignment size, but rendering thousands of sequences × thousands of columns in a browser is memory-intensive. The component works well for exploratory use. For very large production datasets, consider subsetting the alignment before passing it to the component.

Mobile / touch

The component is designed for desktop use. Touch-based interactions (drag-to-scroll, hover residue info) are not tested and may behave unexpectedly on mobile devices.

Server-side rendering

ReSeqt uses document, canvas, and ResizeObserver — all browser-only APIs. It is not compatible with SSR. Use next/dynamic with ssr: false (Next.js), or React.lazy + a client-only guard in other frameworks.

React version

React 19 is declared as a peer dependency. React 18 may work but is not officially tested.

Manual sort

Drag-to-reorder sequences works when the sort mode is set to 'Manual'. Switching to any other sort mode resets the manual ordering.

Try the Playground GitHub npm