Show HN: Replay your typing in a few lines of JavaScript

This is great!<p>I was just talking to a coworker today about &quot;libraries&quot; vs &quot;templates&quot;. You could have made this a library, but I think it&#x27;s actually way nicer for it to be code I can copy&#x2F;paste, so I can integrate it however I want. Some things are better as templates that I can copy.<p>If I have a weird use case or want to integrate it deeply into something else, the library doesn&#x27;t need to accommodate that.<p>(the tradeoff of course is, if you update the library, my copied code won&#x27;t update, so obviously this doesn&#x27;t work for everything, but I think it works for some things!)

Very clever, I can imagine a chat app where you see the message how it was typed before seeing the final message sent, could be novel

What is everyone excited about? A mediocre piece of code that actually hardcodes th string? Same could be achieved with generic code with 2 Parms - a string, and duration

Not quite the same, but if you want to do this with a terminal session, asciinema[0] is great!<p>[0] <a href="https:&#x2F;&#x2F;asciinema.org&#x2F;" rel="nofollow">https:&#x2F;&#x2F;asciinema.org&#x2F;</a>

This is nice.<p>I’m curious — it looks like you’re storing the full text string along with the timestamp. At first I thought you were capturing keystrokes, but it makes more sense to capture the full text, so you can allow people to edit with mouse&#x2F;arrow keys, etc.<p>It will fall over at some point though, right? If you work on this more, is the next logical step to store a diff with each timestamp, rather than the full string?

That’s cool. Wonder how well this could be used to create a digital fingerprint of users?

While we are on the subject: what does chatgpt use for the typing effect they have?<p>I know a stream of diffs comes in, but I think the animation is smoothened by something.

Update: I first had a naive approach and stored the full content of the text on each stroke. I updated the code with some small algorithm to reduce data and avoid storing the full text when a character was added or removed.

Amazing, I love how it&#x27;s generating short js code and no library needed

What a smart idea! I immediately sent it to my mom who has such a weird way of typing can&#x27;t wait to see if the AI can reproduce it!

Hold backspace from the end until you erase everything. Start recording and hold down undo(ctrl-z). You&#x27;re welcome.

It even captures changes made by iOS when auto correct changes the capitalization and spelling of words! :D

a web component in vanilla js would fit nice here

Really cool. Thanks for sharing.

Cool!! Thanks for sharing it.

Why can I only replay once?

Man, this is really cool!