How to use

Clone from GitHub

Use below command to clone PhyloCanvas repository from GitHub to your local machine

$ git clone

Add to HTML

Use <script> tag to add PhyloCanvas to your HTML page. See example below.

<script type="application/javascript" src="/PhyloCanvas/src/scripts/PhyloCanvas.js"></script>

Remember to adjust the URL to suit the location of the PhyloCanvas code within your project

Initialize and Load your Tree

You only need 2 lines of code to get your phylocanvas instance up and running.

  • One to initialize the viewer and
  • Second to load the file.

var phylocanvas = new PhyloCanvas.Tree(div, [config object]); // initialize your tree viewer
phylocanvas.load(Newick / Nexus); // load your tree file


ID of the <div> or the element itself used to draw the tree
config object
Optional parameters used to configure the tree See more config options
A string or a file that contains a Newick or Nexus formatted tree Sample Newick

Your final HTML

<!DOCTYPE html>
    <script type="application/javascript" src="PhyloCanvas.js"></script>
    <script type="application/javascript">
      window.onload = function() {
        // Initializing tree object
        var phylocanvas = new PhyloCanvas.Tree('phylocanvasDiv');
        var newick_str = "((B:0.2,(C:0.3,D:0.4)E:0.5)F:0.1)A;";
    <div id="phylocanvasDiv"></div>
View live