A free, browser-based tool for visualizing phylogenetic trees from Newick and NEXUS files. No installation, no sign-up, no server — paste your data or drag a file and see your tree instantly.
Try it now: sminot.github.io/newick-viewer
Designed for biologists, bioinformaticians, and biomedical researchers who need to quickly inspect, compare, and share phylogenetic trees.
A phylogenetic tree is a branching diagram that shows the evolutionary relationships among species or sequences. The Newick format is the most common text representation: nested parentheses encode the tree topology, with optional branch lengths and labels. Example: ((Human:0.1,Chimp:0.1):0.3,Gorilla:0.4);
Paste a Newick or NEXUS string into the text box on the left side of the page. The tree renders automatically as you type (with a short delay). You can also drag and drop a .nwk, .tree, .nex, .nexus, or .txt file anywhere on the page. Click Load example to try a built-in primate phylogeny.
The sidebar can be collapsed by clicking the ☰ button in the toolbar to maximize the viewer area.
Newick — the standard parenthesized tree format. The parser handles:
- Branch lengths (including scientific notation like
1.5e-3) - Quoted labels with special characters (
'Homo sapiens') - Internal node labels and bootstrap values
- NHX annotations (
[&&NHX:...]) - Bracket comments (including nested)
- Multifurcating nodes and single-leaf trees
NEXUS — the #NEXUS container format used by MrBayes, BEAST, FigTree, and Mesquite. The viewer automatically detects NEXUS files, extracts the tree from the TREES block, and applies TRANSLATE tables that map numeric IDs to taxon names.
The format is detected automatically — just paste or drop the file and it works.
- Rectangular (dendrogram): The standard layout with right-angle elbow connectors and an auto-sizing scale bar showing substitutions per site.
- Radial (circular): A polar layout that fits more taxa into less space, with labels rotated to follow the circumference.
Switch between layouts using the toolbar buttons. Species names display in italic with underscores converted to spaces.
Yes. Click Tanglegram in the toolbar. Two input boxes appear for your two Newick trees. Matching leaf names are connected by curved lines across the gap. You can control:
- Tree spacing: How much gap between the two trees
- Connection color: Single color or multi-color mode
- Connection width: Line thickness
- Line style: Solid, dashed, or dotted
Yes. The tree and the text box stay in sync — edits in either direction are reflected immediately.
Left-click an internal node to flip the order of its children.
Right-click any node to open a context menu with:
- Flip children: Reverse child order at this node
- Ladderize (large first / small first): Sort the subtree by descending or ascending leaf count
- Remove node: Prune this taxon or clade from the tree
- Keep only this clade: Extract this subtree, discarding everything else
- Reroot here: Reroot the tree at this node
All edits update the Newick text in the sidebar so you can copy the modified tree. Undo and Redo buttons in the toolbar (or Ctrl+Z / Ctrl+Shift+Z) let you reverse mistakes. Up to 50 levels of history are tracked.
Yes. Upload a CSV or TSV file in the Tip Metadata panel in the sidebar. The file should have one column with tip names (matching the tree labels) and another column with a category to color by. Select the appropriate columns from the dropdowns and tips are colored instantly using a categorical palette. A legend appears in the top-right corner of the visualization.
Tip name matching is flexible — it handles underscores vs. spaces and other common naming variations.
Yes. The Open Tree of Life panel in the sidebar lets you search the Open Tree of Life taxonomy and load published phylogenies directly:
- Subtree mode: Search for a clade (e.g., "Mammalia") and load its subtree at a configurable depth
- Induced tree mode: Select multiple taxa by name and get the tree that relates them
Results are autocompleted as you type.
Click Copy link in the toolbar. The URL encodes the complete visualization state — tree data, layout mode, all display settings, and tanglegram configuration — compressed into the URL hash. Anyone who opens the link sees the exact same view. No server, no database, no account required.
Yes. The URL hash carries a s= parameter containing the JSON view state, compressed with lz-string. Any language with an lz-string implementation can build links. Python example using lzstring:
import json
import lzstring # pip install lzstring
BASE_URL = "https://sminot.github.io/newick-viewer/"
def make_tree_link(newick1, **params):
state = {
"newick1": newick1,
"newick2": params.get("newick2", ""),
"layout": params.get("layout", "rectangular"),
"tanglegram": params.get("tanglegram", False),
"style": params.get("style", {}),
"tanglegramStyle": params.get("tanglegramStyle", {}),
}
for key in ("metadata", "metadataIdCol", "metadataCatCol"):
if key in params:
state[key] = params[key]
encoded = lzstring.LZString().compressToEncodedURIComponent(json.dumps(state))
return f"{BASE_URL}#s={encoded}"
url = make_tree_link(
"((Human:0.1,Chimp:0.1):0.3,Gorilla:0.4);",
layout="radial",
style={"branchColor": "#1f77b4", "leafLabelSize": 14, "showBranchLengths": True},
)Top-level parameters:
| Parameter | Type | Default | Description |
|---|---|---|---|
newick1 |
str | "" |
Primary Newick or NEXUS tree string |
newick2 |
str | "" |
Second tree (used when tanglegram=True) |
layout |
str | "rectangular" |
"rectangular" or "radial" |
tanglegram |
bool | False |
Enable side-by-side comparison mode |
style |
dict | see below | Display settings (see next table) |
tanglegramStyle |
dict | see below | Tanglegram connection settings |
metadata |
str | — | CSV/TSV text for tip coloring |
metadataIdCol |
str | — | Column name matching tree tip labels |
metadataNameCol |
str | — | Column name to use as the display label (overrides tip ID in the tree) |
metadataCatCol |
str | — | Column name with the category to color by |
style dict keys:
| Key | Type | Default | Description |
|---|---|---|---|
branchColor |
str | "#1b1b1b" |
CSS color for branches |
branchWidth |
number | 1.5 |
Branch line width (px) |
figureTitle |
str | "" |
Title displayed above the entire figure (empty = no title) |
figureTitleSize |
number | 16 |
Figure title font size (px) |
leafLabelSize |
number | 13 |
Leaf label font size (px) |
internalLabelSize |
number | 11 |
Internal label font size (px) |
legendLabelSize |
number | 11 |
Legend label font size (px) |
legendTitle |
str | "" |
Title displayed above the legend (empty = no title) |
leafLabelColor |
str | "#1b1b1b" |
CSS color for leaf labels |
fontFamily |
str | system UI stack | Font family for all labels |
showLeafLabels |
bool | True |
Show tip labels |
showBranchLengths |
bool | False |
Annotate branches with numeric lengths |
showInternalLabels |
bool | False |
Show bootstrap / internal labels |
canvasWidth |
number | 0 |
Width override in px (0 = auto-fit) |
canvasHeight |
number | 0 |
Height override in px (0 = auto-fit) |
tanglegramStyle dict keys:
| Key | Type | Default | Description |
|---|---|---|---|
spacing |
number | 0.24 |
Gap between trees, as fraction of width (0–1) |
connectionColor |
str | "#71767a" |
Line color when connectionColorMode="single" |
connectionColorMode |
str | "single" |
"single" or "multi" |
connectionWidth |
number | 1 |
Line thickness (px) |
connectionLineStyle |
str | "solid" |
"solid", "dashed", or "dotted" |
showLeafLabels1 |
bool | True |
Show tip labels on the left tree |
showLeafLabels2 |
bool | True |
Show tip labels on the right tree |
widthScaler |
number | 0 |
Fold-change width balance: 0 = equal, 1 = left tree 2× wider, -1 = right tree 2× wider |
heightScaler |
number | 0 |
Fold-change height balance: 0 = equal, 1 = left tree 2× taller, -1 = right tree 2× taller |
Missing fields fall back to defaults; unknown fields are ignored.
Yes. The hash is a JSON state object compressed with lz-string (compressToEncodedURIComponent). Every field except newick1 is optional — missing keys fall back to defaults — so a minimal URL only needs the tree string. In Python:
# pip install lzstring
import json, lzstring
state = {"newick1": "((A:0.1,B:0.1):0.3,C:0.4);"}
encoded = lzstring.LZString().compressToEncodedURIComponent(json.dumps(state))
url = f"https://sminot.github.io/newick-viewer/#s={encoded}"
print(url)Optional keys include newick2, layout ("rectangular" or "radial"), tanglegram (bool), and the style / tanglegramStyle objects. See src/types.ts for the full shape.
- SVG: Vector graphics file, editable in Illustrator or Inkscape
- HTML: A standalone interactive page with zoom and pan, viewable in any browser without a server
- PDF: Opens the browser print dialog for saving or printing (landscape orientation, publication-ready)
The Display Settings panel in the sidebar provides:
- Branch color and width
- Label size and color
- Tree width and height: Override the auto-computed layout dimensions (set to 0 for auto-fit). Useful for controlling the aspect ratio before export.
- Show branch lengths: Toggle numeric branch length annotations along branches
- Show internal labels: Toggle bootstrap values or clade names at internal nodes
Changes apply instantly. All settings are preserved in shareable URLs.
Yes. Once the page is loaded, everything runs in your browser. The only feature that requires network access is the Open Tree of Life search.
| Shortcut | Action |
|---|---|
| Scroll wheel | Zoom in/out |
| Click + drag | Pan |
| Left-click node | Flip children |
| Right-click node | Editing context menu |
Ctrl+0 |
Fit tree to view |
Ctrl+Z |
Undo last edit |
Ctrl+Shift+Z |
Redo |
The viewer also has +/−/Fit buttons in the bottom-right corner, Undo/Redo in the toolbar, and a taxa search box in the top-left of the viewer.
Yes. A search box in the top-left corner of the viewer lets you filter by name. Matching taxa are highlighted in bold with a yellow background, while non-matching taxa fade to make the matches stand out. The search updates as you type.
The viewer renders trees with hundreds of taxa comfortably. For very large trees (1000+ leaves), the rectangular layout auto-scales the canvas height and provides fit-to-view. Performance depends on your browser and screen size.
Yes. Your tree data never leaves your browser. There is no server, no analytics, no tracking. The shareable URL contains the data itself (compressed), not a reference to a stored copy.
If you use Tree Viewer to generate a figure for a publication, you can adapt the following text for your methods section:
Phylogenetic trees were visualized using Tree Viewer (https://sminot.github.io/newick-viewer/), a free, browser-based tool for rendering Newick and NEXUS format trees.
Use the GitHub Issues page:
- Bug reports: Describe what you expected vs. what happened. Include the Newick string that caused the problem if possible, or a shareable URL that reproduces the issue.
- Feature requests: Open an issue describing what you'd like and why it would be useful. Label it as an enhancement.
- Questions: Open an issue with the "question" label if something isn't working as expected or the documentation is unclear.
Pull requests are also welcome. See DEVELOPMENT.md for setup instructions.
- Bench biologists who receive tree files from collaborators and need a quick way to view them
- Bioinformaticians who want to inspect pipeline output without installing desktop software
- Students and educators learning about phylogenetics and evolutionary relationships
- Reviewers checking supplementary tree figures in manuscripts
- Anyone who needs to share a tree visualization via a URL
See DEVELOPMENT.md for build instructions, project structure, testing, and deployment details.