A tree viewer built for SNP trees, such as those from vSNP, that you can share as a link, a file or a PDF.
- Branch lengths as SNP counts. Switch the scale from substitutions/site to SNPs, using the positions in your SNP alignment.
- Share a tree as a link. Colors, rerooting and all travel inside the link, and it opens fully interactive on computers and phones, iPhone included. No uploads, no accounts.
- Or as a single file. Save a self-contained HTML file or a PDF to attach to an email. It works offline.
- Private. Your trees stay on your device. Nothing is ever uploaded.
- Nothing to install. Runs in any modern browser, on desktop or phone.
- Open a tree. Click Open file… or drag a tree file onto the page. To try it first, click Load example tree.
- Explore. Scroll to zoom, drag to move around, and click a branch to select that clade.
- Share. Click Save PDF, Save as HTML, or Copy share link (under Export in the side panel).
Supported files: Newick (.tre, .nwk, .newick, .tree, .treefile, .contree) and NEXUS (.nex, .nexus). If a file holds several trees, choose one from the menu at the top.
| Task | How |
|---|---|
| Change the layout | Layout: rectangular, slanted, circular, fan or unrooted radial. Use Cladogram to ignore branch lengths. |
| Reroot | Select a branch, then Rooting → Reroot on branch. Also: Midpoint root, Outgroup root, or turn on Reroot mode and click any branch. Undo steps back. |
| Color clades | Select a clade, pick a color, click Color clade. |
| Color by metadata | Color by metadata → Load CSV / TSV…. The first column must hold tip names; choose any other column to color by. A legend is added automatically. |
| Find samples | Type in Search. Matches are highlighted; Zoom jumps to them. |
| Tidy the tree | Ladder ↑ / ↓ sorts clades by size. Double-click a node to collapse or expand it. |
| Show values | Display: branch lengths, support values, node dots, aligned tip labels. |
Selecting: click a tip or branch. Shift-click adds to the selection; Shift-drag draws a box.
Keyboard: F fit to window · R rotate node · C collapse · Z undo · Esc clear selection · / search
Tree files store branch lengths as substitutions per site. To see SNP counts instead:
- In Display, set Branch units to SNPs.
- Enter the number of SNP positions, meaning the number of columns in your SNP table. Or click From FASTA… and choose the SNP alignment the tree was built from; the viewer counts the positions for you.
The scale bar, branch labels and pop-up details then read in SNPs.
Note
SNPs = branch length × number of SNP positions. The tree program estimates branch lengths with a model, so the numbers are close to, but not always identical to, the differences you would count in the SNP table.
All three options keep your colors, rerooting, collapsed clades, metadata and settings.
| Option | Best for | Computer | Android | iPhone |
|---|---|---|---|---|
| Copy share link | Quick sharing by email or chat | ✅ | ✅ | ✅ |
| Save as HTML | A file to keep or attach | ✅ | ✅ | Picture + "Open interactive tree" button |
| Save PDF | Reports, printing, viewing anywhere | ✅ | ✅ | ✅ |
- Share link: the whole tree travels inside the link. Recipients get the full interactive viewer, even on iPhone.
- HTML file: opens fully interactive in any browser on a computer, and in Chrome on Android. iPhones can't run web pages saved as files, so they show a still picture with a button that opens the interactive version.
- PDF: a sharp picture of the whole tree that zooms cleanly. Choose the page size under Export → PDF page: Sized to the tree (best on screens), or Letter / A4 for printing.
Also under Export: SVG and PNG images for figures, and Newick to save the rerooted tree.
Caution
Links, saved HTML files and PDFs contain your tree. Anyone you send them to can see the sample names, and your email or chat service keeps a copy of the message, as it would with any attachment. Share them the way you would share the tree file itself.
Open the viewer's web address or a share link on any phone, iPhone included, and you get the full interactive viewer. The one exception: an HTML file sent as an email or chat attachment shows a still picture on iPhone (with a button to open the interactive version).
The viewer adapts to small screens:
- Toolbar at the bottom: Search, Fit, SNPs/Subs, Layout and Options.
- Pinch to zoom and drag to move. Names stay a readable size as you zoom in, and samples at the same spot are listed one under another.
- Tap a branch to select a clade. The toolbar switches to Zoom, Color, Collapse, Rotate and Reroot.
- Tap a tip to see its details.
- Options opens every setting, plus Open file, Save PDF, Save HTML and Share link.
Some names disappear when I zoom in. When names would overlap, the viewer hides some until you zoom in further and there's room. Tap any tip to see its name. To always show every name, turn off Readable zoom under Display.
Does opening a share link, or tapping "Open interactive tree", send my tree anywhere? No. Your tree stays on your device and is never uploaded. The link just opens the viewer. One tip: your browser remembers the links you visit, and some browsers copy that history to your Apple or Google account. For sensitive trees, use a private browser tab.
My sample names show spaces instead of underscores. That's standard Newick behavior. Metadata still matches whether your table uses spaces or underscores.
Someone on an iPhone only sees a picture. Email and chat apps on iPhone can't run interactive HTML files. Send a share link instead, or a PDF.
A share link won't open, or says the tree couldn't be read. Some chat apps cut off very long links (large trees). Send the HTML file or PDF instead.
Can I use it offline?
Yes. Download TreeViewer.html from this repository and open it in your browser. Everything works without internet.
Publishing and safety checks
- The repository is
USDA-VS/phylogenetic-tree-html-viewer. - Upload
TreeViewer.html,README.md,viewer-desktop.pngandviewer-phone.png(Add file → Upload files). - Add the two safety files with Add file → Create new file, pasting in their contents: name one
.gitignore, and the other.github/workflows/publish.yml(typing the slashes creates the folders). - Go to Settings → Pages → Build and deployment, and set Source to GitHub Actions.
- The page is published at https://usda-vs.github.io/phylogenetic-tree-html-viewer/ a minute or two after each change.
VIEWER_URL_DEFAULT in TreeViewer.html holds this page's address, so share links and the "Open interactive tree" button work from any copy of the viewer, including downloaded ones. If the page ever moves, update that line.
- The viewer holds no data.
TreeViewer.htmlis a blank tool. Trees are only ever opened in a visitor's own browser. - Privacy lock. A Content-Security-Policy in
TreeViewer.htmlblocks the page from loading outside code or sending anything over the network. - Allow-list
.gitignore. When using GitHub Desktop or git on your computer, only the files listed above can be added. Trees, tables, alignments, PDFs and saved tree pages are ignored. - Check on every change. The workflow rejects any file that isn't on the list, any HTML file with a saved tree inside it, and any
TreeViewer.htmlmissing the privacy lock. If a check fails, nothing is published and GitHub emails you. - Only
TreeViewer.htmlis published. The website serves it as its front page, so the viewer opens at the plain page address. Even if something else lands in the repository, the website serves the viewer alone. - Warning banner. If a saved tree file is ever opened from a website, the page shows a red warning.
The one rule: never upload files made with Save as HTML (*_tree.html), tree files, SNP tables or screenshots of real data. For README pictures, use the example tree or invented names.
The repository is public, so a pushed file is visible even if the website never shows it. Make the repository private right away (Settings → General → Danger Zone), delete the file, and follow GitHub's guide Removing sensitive data from a repository. Deleting a file alone does not remove it from history.