node package manager


Vector Screencast Project

For an online demo see


Install Node.js first. Then download the library to your project using npm i --save vector-screencast.

<div id="recorder"></div>
<div id="player"></div>
import { Recorder, Player } from 'vector-screencast';
// to attach the recorder to your page:
var recorder = new Recorder("recorder", {
    UploadURL: "/your/upload/script/url",
    Audio: {
        host: "",
        port: 4000,
        path: "/your/audio/server/instance/path/at/your/domain"
// to attach a player to your page:
var player = new Player("player", {
    Source: "path/to/the/recording.svg"

For more settings and details, see the demo and read the API docs please.

Building the project from source

To build the project, install Node.js first. Install gulp via npm install -g gulp command. You might need to execute this command as super user. Then go to the root directory of the Vector Screencast Project and install all dependencies by running npm install command.

To build all components of the project, run the gulp command. To build only the library, run gulp release, to build only demo components, run gulp demo. To generate API documentation from the source of the library, run gulp doc. Documentation will be placed in the /doc folder. To run unit tests, run gulp test.

If you want to develop

If you have any trouble, feel free to contact me via email simon(at)


Current version: 0.9.0 -- this version covers the basic behavior which was intended for the

  • v1.0.0: Create unit tests
  • v1.1.0: Implement several new features - zooming, infinite canvas - move the canvas via draging, fullscreen
  • v1.2.0: Replace the UI layer with React.js components and introduce hot module replacement ...
  • v2.0.0:

Bachelor thesis

The original project was inspired by the guys behind the czech branch of the Khan Academy. The ideas and of this project project is described in my Bachelor thesis at the Faculty of Mathematics and Physics of the Charles University in Prague.