<ul data-merge-repeat="links">
  <li>
    <a href="${url}">${title}</a>
  </li>
</ul>
<script data-type="merge-script">
  const links = {
  links: [
    {
      title: "Wunderbucket",
      url: "https://wunderbucket.io"
    },
    {
      title: "Smmall",
      url: "https://smmall.site"
    },
    {
      title: "Levi Nunnink",
      url: "https://nunn.ink"
    },
  ]
};

document.addEventListener(
  'MergeReady', 
  function() {
    const merge = new Merge({
     fetch: (url) => fetch(url), 
    }, null, document);
    merge.loadState(links);
  },
false);
</script>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/@smmall/merge/dist/Merge.min.js