GoogleChromeLabs has released an interesting component to compare two DOM elements: two-up. Let’s try it within the static generator Hugo.

First, let’s make sure Hugo (the static generator I use in this blog) renders the HTML inline correctly, which you can accomplish adding a shortcode template to insert raw HTML into the post’s markdown (thanks for the idea, Ana Ulin) simply adding a shortcode template called rawhtml.html in layouts/shortcodes/rawhtml.html in your Hugo installation. So, create an HTML document with that name, in that directory, with this content:

<!-- raw html -->
{{.Inner}}

Now all you need to do is to write your HTML code inside the Hugo markdown using this shortcode:

  &#123;{< rawhtml >}}
    Insert your <strong>HTML</strong> here
  &#123;{< /rawhtml >}}

If you don’t use Hugo, you don’t need to do any of the above. In any case, finally, to try Two-up, what’s the HTML code you have to use (calling the JS externally)? Easy!

<script src="https://unpkg.com/two-up-element@1"></script>

<two-up>
  <div><img src="https://lh3.googleusercontent.com/t-t_jepUsuxueR9K1FIYOybuiefOriG6fCrxBJSHWs56dPvztmrcknPmkemzQSlr38T9HJC6LwOfaVD0yLmpaB0ydCLHqwv8jfaJ9V50OWNORczRJjgD5uoAt1VQZ1BWLX3ueEq3NeU=w1920-h1080" alt="before"></div>
  <div><img src="https://lh3.googleusercontent.com/DBgFrRegPOAmVbaDj_ecDZdn5nJ5B_YeTtj3YtO2gMMgPC5hIqk2m-fVfjWOPj7hG0-C7A6FxQcqILUSR0hM98uKuxwWJHA6mVGZEsgwqzeqLowftjeUnfNp10xS6bzQ7IDUoDl6Mq4=w1920-h1080" alt="after"></div>

Sorry for the pictures but it’s the first ones I found in my collection. Now imagine all the uses you can give this (compare compression levels, modifications, versions…):

before
after