Introducing DemoKit: Scriptable Product Demos

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 uses JSX (but not React) along with HTML, JavaScript, and CSS to let you define a "movie script" for your demos. For example, the following snippet types and execute a query in Duck Duck Go:

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.

Why DemoKit?

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.