demokit

by runkit-open-source

runkit-open-source /demokit

DemoKit is a Library and Electron app for building product demos and tutorials using web technologie...

410 Stars 24 Forks Last release: Not found MIT License 27 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:


DemoKit is a Library and Electron app for macOS to build product demos and tutorials using web technologies

  • Maintainable Since DemoKit demos are just JavaScript modules, you can commit them to version control, diff them, collaborate with others, iterate and tweak to your heart's content, and simply re-capture the video if your product's UI ever changes. The videos for your product can now receive the same treatment as any other asset for your product instead of going stale.
  • 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!

Example

    

<browser id="duckduckgo" title="Duck Duck Go" contenturl="https://duckduckgo.com" contentrect="{" origin: x: y: size: width: height:></browser>

<recording.start filepath="videos/video"></recording.start>

<using window="duckduckgo">
    <click selector="input[type=text]"></click>
    <type>How do I use <paste>JSX</paste>?</type>
    <click selector="input[type=submit]"></click>
</using>

<recording.stop></recording.stop>

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.

We've also open sourced the video we made for our homepage at https://runkit.com/, which is available here: https://github.com/runkitdev/runkit-demo.

Installation

npm install demokit -g

Note: DemoKit only works on macOS

Usage

$ demokit new my-demo
$ demokit ./my-demo/index.js

The

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.

Documentation

Visit the Wiki for our documentation.

Acknowledgments

This library would not have been possible without the awesome PhotonKit, CodeMirror, Smooth Scroll, Screen Recorder, and although it is no longer a dependency, RobotJS.

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.