text-editor-recorder

This is a completely offline web application which helps you record when you type in a web based text editor and also play it back later.

Record - Click here to record and download the recording

Play - Click here to play the downloaded recording

Demos

Website - https://karuppiah7890.github.io/text-editor-recorder

Recorder - https://karuppiah7890.github.io/text-editor-recorder/recorder.html or https://karuppiah7890.github.io/text-editor-recorder/recorder

Player - https://karuppiah7890.github.io/text-editor-recorder/player.html or https://karuppiah7890.github.io/text-editor-recorder/player

I have recorded demos of various versions of the tool. The top most is the latest, and the bottom most is the oldest :)

• Text Editor Recorder Player: Demo 2 - Cursor Movement Recording and Playing https://www.youtube.com/watch?v=k-i6dwH6y70

• Text Editor Recorder Player: Demo 1 https://www.youtube.com/watch?v=t17uJKb-rho

Applications

I have personally seen a few applications for this kind of tool.

• Coding tutorial instructors using such tools to record and playback the recording for the participants who are learning. Example: https://scrimba.com . The same concept can be generalized to teachers using it to teach coding to students
• Interview coding rounds to understand how the interviewee's code evolved from the first line of code. Personally I don't like this application but I have seen some platforms and services provide this feature for recruiters.

Inspiration

This tool has been inspired by some existing things out there.

• https://asciinema.org - Open Source Tool for recording and playing terminal sessions. I learned some algorithms for playing recording from asciinema Python code.
• https://scrimba.com - Their courses show instructor typing code in actual editor and user can copy the code or even modify it in the same editor and save it separately. The tutorial can be fast forwarded and one can go back too, and pause too. There's also the instructor voice in the background as audio. It has a pretty cool UI :) Example - https://scrimba.com/scrim/cV7M2uR?pl=p7P5Hd
• https://www.openreplay.com - Recording and playing browser usage. Browser Sessions. Also, streaming browser usage live
• https://marketplace.visualstudio.com/items?itemName=vsls-contrib.codetour - Extension in Visual Studio Code to do Code Walkthroughs and Record it and Play it. Extra links: https://github.com/microsoft/codetour, https://techcommunity.microsoft.com/blog/educatordeveloperblog/codetour-vscode-extension-allows-you-to-produce-interactive-guides-assessments-a/1274297
• https://tmate.io - Instant terminal sharing

Future Ideas

• Extension in any software to do recording, playing, streaming - of the usage of the software. Example softwares where usage can be tracked, recorded, played, streamed etc - Browser, Text Editor, Terminal. Can also create separate tool or software to do the recording. This can be called as Custom Recording of the software, instead of using video recording, screen recording tools

  Examples:

  • Visual Studio Code Extensions for recording, playing, streaming the text editor usage.
  • vim Extensions for recording, playing, streaming the text editor usage.
  • emacs Extensions for recording, playing, streaming the text editor usage.
  • Any Code Editor Extensions/plugins for recording, playing, streaming the text editor usage.
  • Chrome Extensions for recording, playing, streaming the browser usage.
  • Firefox Extensions for recording, playing, streaming the browser usage.
  • Any Browser Extensions/Plugins for recording, playing, streaming the browser usage.
  • Any Software Extensions/Plugins for recording, playing, streaming the browser usage.