# Installation

# NPM Module

Install Phylocanvas.gl (opens new window) NPM package

npm install @phylocanvas/phylocanvas.gl

Import the library

import PhylocanvasGL, { TreeTypes } from "@phylocanvas/phylocanvas.gl";

Create a PhylocanvasGL tree instance

const tree = new PhylocanvasGL(
  document.querySelector("#demo"),
  {
    size: { width: 400, height: 300 },
    source: `(Bovine:0.69395,(Gibbon:0.36079,(Orangutan:0.33636,(Gorilla:0.17147,(Chimp:1.19268,Human:0.11927):0.08386):0.06124):0.15057):0.54939,Mouse:1.21460);`,
    type: TreeTypes.Rectangular,
  },
);

# Script Tag

Phylocanvas.gl also offers a standalone bundled version of the library - a native JavaScript scripting interface like that of d3.js. You can now use Phylocanvas.gl in prototype environments such as Codepen (opens new window), JSFiddle (opens new window), or Observable (opens new window).

To use Phylocanvas.gl in a scripting environment, include the standalone version in a script tag:

<script src="https://unpkg.com/@phylocanvas/phylocanvas.gl@latest/dist/bundle.min.js"></script>

The standalone bundled exposes one global object named phylocanvas. Any exports from the PhylocanvasGL can be accessed by phylocanvas.*:

<script>
  const tree = new phylocanvas.PhylocanvasGL(
  document.querySelector("#demo"),
    {
      size: { width: 400, height: 300 },
      source: `(Bovine:0.69395,(Gibbon:0.36079,(Orangutan:0.33636,(Gorilla:0.17147,(Chimp:1.19268,Human:0.11927):0.08386):0.06124):0.15057):0.54939,Mouse:1.21460);`,
      type: phylocanvas.TreeTypes.Rectangular,
    },
  );
</script>

Check our codepen showcase (opens new window) for examples.

Usage →