Show HN: Capsule – Make “video” recordings of any website, but as pure HTML/JS

This is really neat! It's like having a video with selectable, inspectable text/markup. I also love how there's no sign-up needed. Thanks for making this freely available.

This is so cool. I feel like it has a ton of use cases but needs some time for people to start trying it out. Do you have any examples of how people are using it in the wild?

Hi HN!

We've made a super simple free tool that lets you "screenshot" and "record" any webpage but as pure HTML/CSS/JS. What you see here aren't regular mp4 screen recordings, but are DOM recordings where we record the entire DOM as it changes.

Here's a Capsule video I just made of me using HN: https://capsule.click/playback/1608649966705 (hint: try using your mouse in the demos)

All of the core code is written from scratch using basic JS functionality and browser APIs like MutationObserver among others. When you view the recording at a Capsule link, we replay all the recorded changes one-by-one right in your browser. So although it looks like it's a regular mp4-type video due to the screen moving and such, it's actually a webpage that /looks/ like a video.

You can use your mouse, click, and scroll in the recordings. Note that all javascript is disabled automatically to ensure security. (And because we don't want a recording or an action you make in a recording to continue to make network calls / update data in a prod database in the original application).

(Note there are still bugs on some sites since there's a whole bunch of weird things people do on the internet given how large the HTML spec is!)

I like to think of what we're doing as providing "DOM recording for the masses". People have really only used DOM recording for user tracking / analytics (e.g. fullstory). But we wanted to make this same technology available for regular consumers to use.

I think this would be useful to you if:

- You're a developer and want to share the webpages you make with others. My favorite part about Capsule is that it works on localhost! So you can actually instantly "deploy" a site that you're working on locally and share it with a teammate to get instant feedback on it without needing to push it to a staging environment. It's just 1 click with the chrome extension.

- You work on a frontend dev or design team at a company and want to show your teammates (engineers or designers) new features you've made in a better way than a regular image screenshot. Just send a Capsule link or attach it in a commit/PR.

- You do web testing / QA, and you want to have better bug reporting. In Capsule recordings, you have access to the direct HTML/CSS of the webpage so you have all the info you need to reproduce bugs your users face!

--

Let us know what you use Capsule for! It's totally free to use and we hope you find it useful.

P.S. Remember to sign up for our mailing list to hear about the crazy features we release next! https://capsule.click/#email-form