{title}

treebox

Treebox is a vanilla JS solution for programmatically rendering multiple views with template literals. I currently use treebox to display each view within the "photography" section of this site. For example, here's a slightly simplified version of the inline JS that displays those views (minus the code that governs the History API/location.hash routing):

<script type="module">
  import TreeBox from 'link/to/treeboxjs/on/unpkg';

  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});
</script>

Links: