Skip to content
react-bio-viz

Getting started

Install

Section titled “Install”
Terminal window
npm install react-bio-viz

react-bio-viz works with React 18 and 19 and has no other runtime dependencies — everything it uses is bundled. It is safe to import in server-rendered apps (Next.js, Remix, Astro); the visualizations themselves draw in the browser. The components are marked "use client", so they can be rendered from React Server Components, and the pure helpers (parseNewick, …) are also exported from react-bio-viz/utils to run on the server — see Server Components and Next.js.

Styling

Section titled “Styling”

There is no stylesheet to import: the components add theirs to the page’s <head> the first time react-bio-viz is imported in the browser. It carries the styling for the components’ own chrome (toolbars, menus) and default theme tokens. It never restyles the rest of your page, and if your app already defines the shadcn/ui theme tokens (--background, --foreground, --font-sans, …) the components use yours instead — see Theming.

The same stylesheet ships as a file, for the cases where you should load it yourself:

import "react-bio-viz/style.css";
  • Server-rendered pages, so the components are styled before the JavaScript loads.
  • A Content Security Policy without 'unsafe-inline' styles, which blocks injected <style> elements.
  • Components rendered inside a shadow root, which styles in <head> don’t reach — add the file to the shadow root instead.

Importing it as well is harmless: both copies hold the same rules.

Your first views

Section titled “Your first views”

  1. An alignment is an array of { identifier, sequence } records, all of the same length (see Data formats for every component’s input):

    import { MultipleSequenceAlignment } from "react-bio-viz";
    

    const msa = [
      { identifier: "seq1", sequence: "MKTAYIAKQR-QISFVKSHFSRQ" },
      { identifier: "seq2", sequence: "MKTAYIAKQRQQISFVKSHFSRQ" },
      { identifier: "seq3", sequence: "MKSAYIAKQR-QLSFVKSHFS-Q" },
    ];
    

    <MultipleSequenceAlignment msa={msa} width={800} height={300} />;

  2. A tree is nested { name, length, children } nodes. Parse Newick with the bundled helper:

    import { PhyloTree, parseNewick } from "react-bio-viz";
    

    const tree = parseNewick("((seq1:0.1,seq2:0.12)95:0.05,seq3:0.2);");
    

    <PhyloTree tree={tree} width={800} height={400} interactive />;

  3. Observe what the user does — every interactive component reports its state changes:

    <MultipleSequenceAlignment
      msa={msa}
      onViewportChange={(viewport) => console.log("showing columns", viewport.x0, "–", viewport.x1)}
      onSelectionChange={(selection) => console.log(selection.columns)}
    />

Sizing

Section titled “Sizing”

Components take their size in pixels (width, and a maximum height). To fill a responsive container, measure it:

function Responsive({ msa }) {
  const ref = useRef<HTMLDivElement>(null);
  const [width, setWidth] = useState(0);
  useLayoutEffect(() => {
    const observer = new ResizeObserver(([entry]) => setWidth(Math.floor(entry.contentRect.width)));
    observer.observe(ref.current!);
    return () => observer.disconnect();
  }, []);
  return <div ref={ref}>{width > 0 && <MultipleSequenceAlignment msa={msa} width={width} />}</div>;
}