Introducing ReduxVCR

The adorable tool that lets you record and re-watch user sessions.

The Results

Here are some of my favourite recorded sessions so far:
(give the cassettes a second or two to load)

  • Noisecore
    A bunch of really neat, really dissonant sounds using bass notes, distortion, and a myriad of other effects.
  • Gradual Experimentation
    This user makes some interesting noises with chorus. Mostly I like this session because the experimentation and discovery process is so evident.
  • Absolutely beautiful
    A lovely melody that becomes captivating with stereo tremolo. Evolves into a wub-wub dubstep bass.


Redux VCR doesn’t mind being interrupted; it’ll keep carrying out its sequence of actions, without complaining if you jam along with it.

Read on to learn more about how it works, how to get started, and where the project is going, or jump straight to the project on GitHub.

How It Works

Redux VCR is built to be modular. It consists of 4 main parts. Each of these pieces operate with Cassettes, plain objects that hold the sequence of actions needed to recreate a user’s session, as well as some metadata.


Capture is responsible for observing the stream of Redux actions, and selecting the ones it wants to record.


Persist is responsible for, well, persistence. The default module uses Firebase, and it will update the remote copy of the Cassette whenever it’s handed an updated version.


Retrieve is the inverse of Persist; it’s responsible for securely fetching the Cassettes. The default module uses Firebase as well.


Finally, Replay is the cute little VCR UI that lets you select and control cassettes. It offers the ability to modify the playback speed of actions, and I hope to add a scrubber that will let you jump to specific parts of the sequence.

Serverless Security

A concern with the development of this project was to ensure that users’ sessions were kept secure. At the same time, I didn’t want to enforce any kind of back-end. Key&Pad lives on GitHub Pages with no server-side logic.

Getting Set Up

Every project is different, and I’ve tried to make the setup as straightforward as possible while allowing for various configurations.

  • Quickstart
    This is the easiest way to get started, but it’s not recommended for production usage.
  • Production-Ready
    This version takes care to keep admin-only modules out of the production build.
  • With an Initial Cassette
    Auto-load a specific cassette, specified by a query parameter. This is useful for favouriting a specific cassette, but can also be used to load the last-played cassette from localStorage.
  • More to come!

Help Build Something Cool

This project is really early, and there’s much work to be done. I have limited time to dedicate to this project, and I’m looking for contributors! I have huge ambitions for this tool, but I can’t do it all alone.

  • A way of stubbing out server requests. We likely don’t want to send real API requests when replaying sessions.
  • Native window-level event-capturing like mousemoves and scrolls.
  • A proper web interface for managing recorded cassettes.
  • A scrubber for being able to “skip to” sections of the tape, quickly replay certain sections, etc.



Maker of things. Typically with Javascript.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store