DemoKit is a Library and Electron app for building product demos and tutorials using web technologies
- Web Technologies DemoKit uses the web technologies you already know and JSX (without React) to allow to specify the sequence of actions that take place in your demo. Creating professional looking product videos is as easy as using CSS.
- Component-Based DemoKit has a number of built-in components (or "props" in movie lingo) ready to to use for your demos. Browser windows that can load your site, terminal windows and code editor windows that can play supporting roles, and more. You can create and share custom components as well.
Currently only macOS is supported, but you can help us change that!
<demo><scene = = /><browser = "duckduckgo"= "Duck Duck Go"= ""= /><recording.start = "videos/video" /><using = "duckduckgo"><click = "input[type=text]" /><type>How do I use <paste>JSX</paste>?</type><click = "input[type=submit]" /></using><recording.stop /></demo>
This example shows someone how to do a simple search on Duck Duck Go. It sets up the scene's size, creates the browser window with the real duck duck go site loaded, and then proceeds to move the mouse and type in text. Once its completed, the video will be saved to "videos/video - CURRENT DATE". That way you can keep running it without overwriting pre-existing takes.
npm install demokit -g
$ demokit new my-demo $ demokit ./my-demo/index.js
new command will create a template project for you. Simply edit the index.js, or add more files, and then run using the demokit command.
Visit the Wiki for our documentation.