CodeVideo is an event-sourced IDE state manager that enables software educators and content creators to create professional educational content at unprecedented speed.

To read about the theory behind the framework, check out our white paper

The framework is broken down into small parts, each with their own single responsibility:

Core Layer:

codevideo-types

Virtual Layer (Sits on top of the core layer):

codevideo-virtual-ide

codevideo-virtual-file-explorer

codevideo-virtual-editor

codevideo-virtual-terminal

codevideo-virtual-mouse

GUI Layer (Sits on top of the virtual layer):

codevideo-ide-react

SaaS App Layer:

codevideo-frontend

codevideo-backend

codevideo-api

Generators:

codevideo-doc-gen

CodeVideo is a deterministic recording system that captures coding sessions as a series of discrete events. Rather than recording your screen as a video (with all the associated editing headaches), CodeVideo builds a timeline of interactions with your code editor, file system, and terminal.

1. Action Definition: Every action is defined using
2. Timeline Construction: Events are organized into a deterministic timeline with edit capabilities.
3. Generators: The actions can be rendered in various output formats:

• Video: each step is recorded as a video in parallel and stitched together
• Markdown: generated via codevideo-doc-gen
• HTML: generated using marked.
• PDF: Currently, just a PDF format of the HTML, generated in the browser

This simple two key-value JSON object forms the entire backbone of the CodeVideo framework:

{
  "name": "editor-type",
  "value": "console.log('hello, world!');",
}

That's it!

See the IAction interface from the CodeVideo types repository for more information.

• Export Speeds:
  • 5-minute tutorial to video: ~30 seconds
  • 5-minute tutorial to markdown: ~2 seconds

This project is licensed under the MIT License - see the LICENSE file for details.

We welcome contributions from the community! Please check our CONTRIBUTING.md guide for details.