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 -->

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=""></script>

  <div><img src="" alt="before"></div>
  <div><img src="" 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…):