Reactree.js

A React component for rendering interactive phylogenetic trees from Newick strings. Zoom, pan, edit, and export — with an optional sequence alignment panel.

Get Started Try the Playground

npm install reactreejs

reactree — live demo

Loading tree…

Primate phylogeny — try the full toolbar inside the component

Capabilities

Everything you need to visualise a phylogeny

Rectangular & circular layouts

Switch between classic phylogram/cladogram and radial tree layouts. Scale branches by length or normalize them for cladogram mode.

Zoom, pan, and navigate

D3-powered zoom and pan. Mouse wheel to zoom, drag to pan. Fit-to-view resets the viewport in one click.

Reroot, flip, and swap

Click any node to reroot. Flip branch order at any internal node. Swap sibling clades to match your preferred topology.

Collapse & name clades

Collapse any internal node into a named, colored triangle. Add a label and a color. Expand back at any time.

Node coloring

Paint any node or entire subtree with a color picker. Colors propagate down the clade. Reset individual nodes or the whole tree.

Sequence alignment panel

Pass a multi-FASTA string to reveal a synchronized alignment panel. Sequence rows stay aligned with their leaf as you scroll the tree.

Bootstrap & branch lengths

Toggle display of bootstrap support values and branch lengths as node labels. Internal labels parsed in [0, 100] are treated as bootstraps.

Export SVG, PNG, PDF, Newick

Download the current view as lossless SVG, rasterised PNG, single-page PDF, or export the working tree back to Newick format.

Search and highlight

Find taxa by name with real-time highlighting. Navigate between matches, deselect with Escape. Keyboard shortcut: ⌘F / Ctrl+F.

Usage

Simple by default, capable when needed

Minimal

One import, one component, one prop. Everything else — layout toggles, editing tools, search — is built in.

tsx

import { Reactree } from 'reactreejs';
import 'reactreejs/style.css';

export default function App() {
  const newick = '((A:0.1,B:0.2):0.3,(C:0.4,D:0.1):0.2);';

  return <Reactree newick={newick} />;
}

import { Reactree } from 'reactreejs';
import 'reactreejs/style.css';

export default function App() {
  const newick = '((A:0.1,B:0.2):0.3,(C:0.4,D:0.1):0.2);';

  return <Reactree newick={newick} />;
}

With sequence alignment

Pass a multi-FASTA string and an Alignment toggle appears in the toolbar. Sequences are matched to leaf names automatically.

tsx

import { Reactree } from 'reactreejs';
import 'reactreejs/style.css';

const newick = '((Homo_sapiens:0.09,Anopheles:0.36):0.07,Mimivirus:1.22);';

const fasta = `
>Homo_sapiens
MTEYKLVVVGAGGVGKSALTIQLIQNHFVDEYDPTIEDSY
>Anopheles
MTEYKLVVVGAGGVGKSALTIQLIQNHFVDEYDPTIEDS-
>Mimivirus
----KLVVVGAGGVGKSALTIQL-QNHFVDEYDPTIEDS-
`.trim();

export default function App() {
  return (
    <Reactree
      newick={newick}
      fasta={fasta}
      defaultHeight={600}
    />
  );
}

import { Reactree } from 'reactreejs';
import 'reactreejs/style.css';

const newick = '((Homo_sapiens:0.09,Anopheles:0.36):0.07,Mimivirus:1.22);';

const fasta = `
>Homo_sapiens
MTEYKLVVVGAGGVGKSALTIQLIQNHFVDEYDPTIEDSY
>Anopheles
MTEYKLVVVGAGGVGKSALTIQLIQNHFVDEYDPTIEDS-
>Mimivirus
----KLVVVGAGGVGKSALTIQL-QNHFVDEYDPTIEDS-
`.trim();

export default function App() {
  return (
    <Reactree
      newick={newick}
      fasta={fasta}
      defaultHeight={600}
    />
  );
}

Props

Prop	Type	Default	Description
`newick`*	`string`	`—`	Newick tree string. Supports branch lengths and internal bootstrap labels.
`defaultHeight`	`number`	`520`	Initial height in pixels. The user can resize at runtime via the drag handle.
`fasta`	`string`	`—`	Multi-FASTA string. Enables the alignment panel toggle in the toolbar.

Who is it for

Scientific rigour, developer ergonomics

Reactree.js sits at the intersection of modern web tooling and real phylogenetics workflows.

🧬

Bioinformaticians

You have Newick files. You want to drop them into a web app without rebuilding a tree viewer from scratch. Reactree.js handles the rendering, the interactions, and the export — you focus on the analysis.

⚛️

React developers

One import, one component, one prop. The API is intentionally small. If you need more control — layout, height, alignment panel — additional props are there. Nothing is hidden behind magic.

🔬

Research teams

Building a lab tool, a publication supplement, or an interactive figure for a paper? Reactree.js produces publication-quality SVG and PDF exports directly from the browser.

🏗️

Platform builders

Integrating phylogenetics into a larger application — a sequence analysis pipeline, a comparative genomics portal, a species database? The component is self-contained and straightforward to embed.

Theming

Dark mode, first-class

Reactree.js reads the data-theme="dark" attribute on <html> and reacts to changes in real time via a MutationObserver. No context provider, no extra configuration.

How to activate it

tsx

// Enable dark mode — affects the tree component immediately
document.documentElement.setAttribute('data-theme', 'dark');

// Return to light mode
document.documentElement.removeAttribute('data-theme');

// React toggle example
function ThemeToggle() {
  const [dark, setDark] = React.useState(false);
  function toggle() {
    const next = !dark;
    setDark(next);
    next
      ? document.documentElement.setAttribute('data-theme', 'dark')
      : document.documentElement.removeAttribute('data-theme');
  }
  return <button onClick={toggle}>Toggle theme</button>;
}

// Respect OS preference on first load
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.setAttribute('data-theme', 'dark');
}

// Enable dark mode — affects the tree component immediately
document.documentElement.setAttribute('data-theme', 'dark');

// Return to light mode
document.documentElement.removeAttribute('data-theme');

// React toggle example
function ThemeToggle() {
  const [dark, setDark] = React.useState(false);
  function toggle() {
    const next = !dark;
    setDark(next);
    next
      ? document.documentElement.setAttribute('data-theme', 'dark')
      : document.documentElement.removeAttribute('data-theme');
  }
  return <button onClick={toggle}>Toggle theme</button>;
}

// Respect OS preference on first load
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.setAttribute('data-theme', 'dark');
}

Design tokens

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

Override any token in your own stylesheet after importing reactreejs/style.css:

css

:root {
  --clr-primary-a0: #7c3aed; /* custom accent */
}

[data-theme='dark'] {
  --clr-primary-a0: #a78bfa;
  --clr-surface-a0: #020617;
}

:root {
  --clr-primary-a0: #7c3aed; /* custom accent */
}

[data-theme='dark'] {
  --clr-primary-a0: #a78bfa;
  --clr-surface-a0: #020617;
}

Built for

Phylogeny.fr

Reactree.js was developed as the tree viewer powering Phylogeny.fr, a free online platform for phylogenetic analysis used by researchers and educators worldwide. The component is open-source and available for use in any React application.

Visit Phylogeny.fr

Ready to add a tree to your app?

One component. One prop. Everything else is optional.

Read the docs Open Playground

GitHub npmMIT LicenseReact 18 + 19