Whew, this feels like a big one.

It's Finally Here!

Today, after nearly two years in the making, I'm excited to be launching CodeVideo, an entire ecosystem for building high-quality software educational content.

Calling All Software and Coding Educators and Content Creators!

You know that dreaded feeling — you've got a great course idea, lessons laid out, but you're already discouraged at the massive effort you'll need to write the script, record the video, export the code per lesson, ensure the code is working and runnable at the end of every lesson, converting lessons to blog posts, pdfs, or presentations… the list goes on and on…

…what if — and this is a HUGE if (trust me, I didn't think it was possible either) — you could just write your course once, focusing on the best content possible, and do all of the other annoying administrative things instantly?

Export your course lessons to video? CodeVideo can do that.

Export to a markdown blog post? CodeVideo.

Export to a step-by-step PowerPoint presentation? CodeVideo.

Export PNGs, PDFs, Markdown, a website, or even an interactive React component?! CodeVideo can do all of this and more.

It gets even better: has something in your course changed or been deprecated? No problem. Load up your CodeVideo course, go to those series of steps, edit as needed, and republish everything instantly; no more pain of splicing video, searching to find at what timestamp the outdated info occurs.

CodeVideo In a Nutshell

CodeVideo is a framework for generating high-quality educational software content. The framework enables the creation of editable, replayable, or time-travelable IDE sessions, and can export those sessions to a wide variety of formats, including of course video, gif, PDF, markdown, .pptx (PowerPoint), and more — and many more to come.

Essentially, you create your course or lesson actions once and can export them anywhere. For example, here is the video export version (V3) of the framework in action, where I describe how I package my Go functions for a Netlify serverless environment:

Or some PNG snapshots of the same course:

Or, maybe you'd like a zip of the final source code of all files from the same lesson:

https://coffee-app.sfo2.cdn.digitaloceanspaces.com/codevideo/zips/go-for-netlify-functions.zip

Each one of these different export types was created with just a single click! (and, in the case of every export type except video — generated almost instantly.)

Hopefully, you're starting to get a feel for how powerful the CodeVideo framework is!

However, it still sounds like a handful, right?! Funnily enough, building exporters for additional formats is often actually an "easier" part of writing software for CodeVideo and is often quite straightforward — provided you are creative with your configuration and options settings for the given output format.

Anyways, for those interested, we're going to take a deep dive into CodeVideo: how it first came to be, its "winters", and what it is now!

The History of CodeVideo

Early Days

Initially, I started Code Video way, way back in December of 2022, after I was basically told that the startup I was working at would run out of money within 24 hours. Still stuck in startup mode, I reactionarily started looking at things to build myself. The original idea behind CodeVideo was just to take something like Carbon.io (which makes snapshots of an editor) and make a simple tool that generates videos of small code snippets. I actually managed to build that by the end of that December. In fact, that work from December 2022 is still on our homepage codevideo.io where we do some clever work with a ffmpeg ported to WASM. But for me, it was always just the proof of concept and nothing more than an MVP.

Ultimately, however, this solution were very fragile (for the frontend engine, you can still find the code in there of how the highlighter works — literally highlighting character by character and then recording a canvas — there is even still a TODO there!). In short, back in December 2022, I didn't really understand the domain and thought it was simply too time-consuming and challenging of a project as a solo dev. So for a long time — essentially all of 2023 — CodeVideo was looking like it was heading for the infamous Software Graveyard…

January / February 2024

In the quiet early months of 2024, my thoughts again returned to CodeVideo. With some discussions with a colleague, we discussed things like abstract syntax trees and making. By coincidence, I learned of Backdrop Build (I think it was V4) and for 5 weeks there was a bit of social pressure to keep shipping at least something every day. I started building out the classic "startup" essentials — a website, some draft ideas of repos, and much more. It was still clear however, I myself was still learning the domain and was rather unorganized here.

During this time, I managed to build a single Monaco editor driven by Puppeteer on Chromium that is still live today (and may forever stay live due to nostalgic reasons). Getting this API was a breakthrough moment, at least for a part of my vision: send and API endpoint a list of JSON actions, and receive a link to an mp4 of your single editor video, complete with life-like speech and realistic typing!

With this REST API, I built a neat demo video that showcased CodeVideo itself, which I'm pretty sure is what landed me a finalist position and got me in the special funding chat Telegram for Backdrop Build (though I haven't heard a peep since). It's a shame, because I thought the Backdrop Build program was a great idea really well organized!

Once again however, for most of 2024, CodeVideo experienced it's second winter…

Event Sourcing? What's That?

In October 2024, I did an event sourcing course with Ambar. The course was way above my non-existant event-sourcing skills, however. I didn't understand any of the terms at all. A few weeks later while working on CodeVideo, I remember literally asking ChatGPT what such a type of ‘auditable, and replayable framework' was official called, and if it was even possible. It of course responded "Are you thinking of event sourcing?" and I started cracking up. Perhaps what I subconsciously learned in the Ambar course was finally making its way through my head. However, I still wasn't overly sold on the traditional and what I thought was overly-complex event sourcing and decided to keep things as a sort of distilled and simpler event-sourcing for CodeVideo.

One thing I did realize, for sure, is that I would need to formalize the entire framework if I was ever going to have a solution that could be testable, debuggable, and sustainable into the future. I realized, for example, I would need an entire virtual layer before trying to render things in a UI. To do both at the same time (both the logic behind and IDE and UI itself) would certainly end in tears. It was shortly after that I began writing up CodeVideo as a formal framework in a white paper (again, I inspired by Ambar — their whitepaper is also linked on their own homepage).

The First Virtual Layer: Enter virtual-code-block

Returning to the concept of a "virtual layer": virtual-code-block was my first attempt at a programmatic way to replay and audit actions in a single editor. (Even this name has changed; now it is codevideo-virtual-editor, you'll see why in about two paragraphs.)

Many times throughout the "virtual layer" phase in the journey, Donald Knuth's quote kept popping into my head:

If you find that you're spending almost all your time on theory, start turning some attention to practical things; it will improve your theories. If you find that you're spending almost all your time on practice, start turning some attention to theoretical things; it will improve your practice.

With this quote often bouncing around in my head, I would often hop between the virtual layer and the white paper itself. This is when the domain expansion really started to take off. I realized that if I were to do a good job with CodeVideo, a single virtual code block was not even close to enough to what I needed. I would also need virtual layers for the file explorer, the mouse, and even the terminal. Thus came the next series of the virtual layer: codevideo-virtual-file-system, codevideo-virtual-terminal, codevideo-virtual-author, and of course, codevideo-virtual-editorwhich I renamed fromcodevideo-virtual-code-block`.

But wait, we're still not done! I then combined all four of those virtual layer components to a single entry point class and library: codevideo-virtual-ide!

This is the single class that drives the codevideo-ide-react component, currently used for video generation on the backend.

I could go into more detail about how the V3 API uses the codevideo-ide-react component mounted within a static Gatsby page, how a go microservice is used to manage the puppeteer stream recorder, and how much of a pain in the *&&(@##$@ it was to get audio capture on a headless Chromium instance in Docker, but that's probably all better kept for later posts. For now, just enjoy the Studio!

November 2024: Applied to YCombinator!

I didn't get in. Probably I didn't use enough AI buzzwords :)

Major Theoretical Breakthrough #2: Parallelized Video Generation

It was in the past few months that I realized due to the event-sourced nature of CodeVideo, one could generate an animated video of a course of any level of complexity in mere seconds. How? Well, since we're able to reconstitute the IDE's state at any (and every) given action in a CodeVideo project, you can record short videos (essentially short clips) of just a single action in parallel and then stitch them all together at the end. Granted, this is given you have a damn good UI to render that state (more on this pain and suffering later), and a large amount of resources (direction of 64GB+ RAM). This means at maximum, no matter how many actions your course has, the time to generate a video for said course takes approximately as long as the longest single action plus a small amount of stitching / system overhead — typically anywhere from 10 to 20 seconds.

Final Release Push in Q1 2025

With all the groundwork I laid throughout the year in 2024, in 2025, I finally returned the client, essentially rewriting from the ground up both our homepage and studio. In the meantime, as a bit of a side experiment, I built an auditable / replayable mouse react component, and a variety of export functions that power CodeVideo's markdown, HTML, and PDF export formats. It was in January 2025 that I also achieved the first parallel recorded video on my pure HTML-based test bench, where each atomic step of a course was recorded as a separate video and then stitched together to form the full video — one part of the original vision of CodeVideo, formed more than two years prior, was in sight!

..and Now We're Here

We can't forget the launch itself, can we? Today, On Friday, March 14th, 2025 (shout out to Pi day!), I'm launching CodeVideo on all platforms that I know of: Indy Hackers, Producthunt, Hacker News, Substack, Medium, here on my blog, and many more.

Growth as a Software Engineer

In a way, (I hope), CodeVideo is a symbol of my maturity as a software engineer — if I had tried a few years back to tackle something like CodeVideo, I probably would have tried to do everything at once, got frustrated, and just rage quit entirely.

CodeVideo also illustrates a new step for me: it's the first product I've built fully open source and more importantly, across multiple repositories, where each repository typically at most represents a single class or at most a few classes. This separates concerns nicely and helps isolate any bugs down to their individual components. Of course, I'm biased in saying that I hope 99% of those interested in using CodeVideo would rather just pay for CodeVideo generation tokens than try and figure out how the 30+ repositories work together to help build CodeVideo projects and subsequently produce the desired export formats.

Getting Started

Head over to the CodeVideo Studio and sign up to get 50 free CodeVideo tokens — that's 5 video generations (10 tokens per video generation) of up to 250 steps (approximately up to a 5–10 minute video, depending on what your steps include). Our studio will always include Markdown and JSON exports for any sized course for free, forever.

Sign up today and join the revolution to supercharge your educational software content creation. With all the hype around LLMs and code generation, quality software courses and lessons built by real humans have never been more important.

I'm Super Happy You're Here!

In short — I'm glad you've taken the time to read this. CodeVideo has been an enormous effort to get to this state, so I appreciate you being here. There is, of course, plenty more to do. (I originally was going to write here something like "I think it will be quite some time before I can say CodeVideo is ‘finished'". But with the complexity of a framework like this, I feel like this product will be more or less one of those lifelong projects :) we'll see.

On my side, this post was a nice walk down memory lane. If you made it this far, what do you think of CodeVideo? Is this product ultimately a crapshoot of extreme complexity that is doomed to fail? Do you even think that event-sourcing the entire IDE is even possible? Do you have some ideas for export formats, features, or anything I've overlooked? (Or just haven't had time to build yet!) Feel free to share in the comments!

Until next time… I have to get back to working on the avalanche of feature requests…

-Chris