Today we’re open sourcing and releasing DemoKit, our new Electron app for scripting product demos. Using the web technologies you’re already familiar with, you can now record demos, tutorials, or any other videos that show off your products. Since the demos are scripted, you can check them into GitHub, incorporate feedback and changes, and even simply re-record them when your products visually change so they’re never out of date. In order to help get you started, we’re also open sourcing RunKit’s demo that appears on our homepage.
How It Works
DemoKit includes a bunch of prebuilt “props” for your movie too: browser windows (that host your live webpage to interact with), terminal windows, and code editors. One of the cool experimental features we’ve added recently is the ability to embed buttons in your videos as well. Basically, DemoKit will track where all the buttons are in your video and generate a script to make those areas clickable on your web page as well.
One of the things we wanted to do for the RunKit rename was create a demo video of our product for our new homepage. But the idea of doing this filled me with a fair amount of dread since creating demos is such a laborious process for me. I’m always making mistakes when I type, and its rarely a collaborative or iterative process since it never feels worth it to go re-record large portions of a video.
We originally wondered whether we could abuse Selenium and QuickTime screen capture to be able to program a demo the way we programmed our tests, and this actually got us quite far. Unfortunately, Selenium really isn’t designed for this task and has some issues running simultaneous animations and commands. At this point we decided to go all-in and build a dedicated tool using many of these ideas.
The result is something we’re really proud of: any member of our team
can now tweak the demo and keep it up to date and fresh. More importantly,
we can now invest in video tutorials which is something I’ve wanted to
do for quite some time. We’d love to hear your thoughts on it too, you can
install it with npm by typing
npm install demokit -g, or check out the
source as well.