Treebox -


Treebox is a vanilla JS solution for programmatically rendering multiple views with template literals. In other words, it's basically a simple, embeddable SPA router. I currently use treebox to display my "photography" gallery. For example, here's a slightly simplified version of the inline JS that displays those views (minus the code that powers the History API/location.hash routing):

<script type="module">
  import TreeBox from 'path/to/treeboxjs/index.browser.js';

  const nodes = {
    display: '<div><% import gallery template html %></div>',
    children: {
      image1: {
        display: '<div><% markup for image1 %></div>',

  const root = document.getElementById('root');
  const config = {
    initialPath: '/',
    onnavigate: ({to}) => {
      // use History API to handle programmatic routing

  const tb = new TreeBox({config, nodes, root});

See the Pen treebox-demonstration by Jared Gorski (@jaredgorski) on CodePen.