Use WACZ to share pages in development with coworkers

This week I’ve been working on adding animations to our new landing page at Rinse.

During the earlier part of the landing page project, I had sent my designer and project manager videos of the in-development version to get their feedback. But for the scroll-driven animations, it would be better if they could actually interact with the page to feel how things felt.

My first thought was to use the SingleFile extension to create an HTML file they could view locally. However, even after enabling JavaScript in the extension settings, I couldn’t get JavaScript working in the exported HTML version of the page. Some functionality worked, but my scroll-driven animations didn’t.

Looking into the GitHub issues, I found a comment where the developer recommended the WARC format, an archive format used by the Internet Archive. From that, I found WACZ, which adds some improvements on top of WARC. WACZ files can be created with an extension (I used ArchiveWeb.page) and viewed with a playback tool.

I sent my designer the WACZ file and a link to ReplayWeb.page, and things worked perfectly!

I like this approach better than using tunnels like ngrok or Cloudflare Quick Tunnels. It’s a little slower, as it requires me to manually click through the page to download all the assets, but it’s nice that I don’t need to expose my development server to the entire internet. And my coworkers can try out the page on their own time; they don’t need me to have my development server running and tunnel open to see it.