Introducing DemoKit: Scriptable Product Demos

by Francisco Tolmasky and Pieter Ouwerkerk
Share on facebook or twitter

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:

A code example of using DemoKit to open a page on DuckDuckGo
DemoKit is declarative and easy to follow

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.

What is RunKit?

  • RunKit is an interactive playground for running Node.js in the cloud.
  • RunKit offers serverless functions with zero deploy time — prototype code changes in real time!
  • RunKit can be embedded in your tutorials and docs to make them interactive as seen on,, and
Follow RunKit Blog updates with the RSS Feed
Follow @runkitdev on Twitter for the latest updates from RunKit
© 2015–2018 Playground Theory, Inc.