Slightly interactive UI + templating with ES6. No handlebars, no react.

string_to_dom.js

const stringToDom = (string) => document.createRange().createContextualFragment(string);

function viewTest(test) {
  window.location.hash = test.id;
  document.querySelector('#viewer').innerHTML = `
    <iframe src="${test.link}"></iframe>
  `;
}

fetch('/tests')
  .then((res) => res.json())
  .then((tests) => {
    const $nav = document.querySelector('#nav');
    tests.forEach((test) => {
      const node = stringToDom(`
        <div class="test">
          <button class="view">${test.name}</button>
          <div class="description">${(test.description || '').trim()}</div>
        </div>
      `);

      node.querySelector('button.view').onclick = () => viewTest(test);

      $nav.appendChild(node);
    });

    viewTest(tests.find((test) => test.id === window.location.hash.replace('#', '')) || tests[0]);
  });