ferns

Ferns

How to use

You'll need to add the ferns package with yarn or npm.

Create your trees with the special "ferns-tree" class name:

<pre class="ferns-tree">
a
  -- arrow -->
    b
    c
    d
  -- other arrow -->
    d
    e
    f
</pre>

Finally, invoke renderAllTrees() in the browser.

Alternatively, you can invoke renderSingleTree() and pass your tree code directly:

renderSingleTree(containerElement, {
  code: `
    a
      -- arrow -->
        b
        c
    `,
  zoomable: true,
  draggable: true,
});

Dependencies

This package doesn't have any runtime dependencies, other than the Roboto font. Note that the font should be loaded before you render.