Easily display hierarchical data

Hierplane is an open-source Javascript library for visualizing and exploring trees.

Intuitive UX, Out of the Box

Get Started

For detailed instructions and code examples, check out the Hierplane documentation on GitHub.

Using Hierplane in a web page without dependencies

  1. Add the following <script> tag to your web page

    <script src="//unpkg.com/hierplane/dist/static/hierplane.min.js"></script>
  2. Add the following styles to your web page, likely in the <head /> tag

    <link rel="stylesheet" type="text/css" href="//unpkg.com/hierplane/dist/static/hierplane.min.css">
  3. Then invoke hierplane.renderTree(tree[, target]) as is desired.

    • tree object the tree to visualize.
    • target string an optional css selector, specifying the element into which the visualization should be rendered. If not specified, the tree is rendered into the <body />.

Using Hierplane in a ReactJS web application

  1. Install the hierplane dependency.

    npm install --save hierplane
  2. Then, simply import the Tree component, and pass it the tree you'd like to render:

    import { Tree } from 'hierplane';
    import React from 'react';
    const aTree = { ... };
    class TreeContainer extends React.PureComponent {
      render() {
        return <Tree tree={aTree} />;

Proudly built by

Hierplane is maintained by the nonprofit Allen Institute for Artificial Intelligence (AI2). Originally built as an internal tool for AI2’s Project Euclid, we decided to open-source Hierplane in keeping with our mission: AI for the common good.