Hi HN!<p>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.<p>Here's a Capsule video I just made of me using HN: <a href="https://capsule.click/playback/1608649966705" rel="nofollow">https://capsule.click/playback/1608649966705</a>
(hint: try using your mouse in the demos)<p>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 <i>webpage</i> that /looks/ like a video.<p>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).<p>(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!)<p>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.<p><i></i>I think this would be useful to you if:<i></i><p>- 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.<p>- 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.<p>- 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!<p>--<p>Let us know what you use Capsule for! It's totally free to use and we hope you find it useful.<p>P.S. Remember to sign up for our mailing list to hear about the crazy features we release next! <a href="https://capsule.click/#email-form" rel="nofollow">https://capsule.click/#email-form</a>