How CodeVideo Uses File-Based Abstractions to Power In-Browser Compilation and Preview Across Languages & Frameworks

From HTML to Golang, CodeVideo treats all codebases as structured data—making real-time compilation, static analysis, and visual previews of a project both portable effortless.

Just Files and Content

Over the years, I’ve found that the deeper you go into software development, the more the layers begin to fall away. Languages, frameworks, and tooling all vary — but at the core of any project, no matter how complex, it all comes down to this: a set of file paths and their contents.

I’ve leveraged this concept for CodeVideo to gain some interesting portability properties of even the largest codebases. I’ve been able to support in-browser compilation, language-agnostic previews, and portable coding experiences — all from a single, consistent foundation.

The Universal Structure

At CodeVideo, I've built our architecture around this file / content insight. Every codebase can ultimately boil down to:

interface IFileEntry {
    path: string;
    content: string;
}

(This type is consumed from our codevideo-types repository.)

That's it. Any codebase, from a single index.html page to an advanced Golang CLI tool, is just paths and content.

(Granted, for the GUI layer of CodeVideo, the actual nested structure of folders and files is important to display properly in the file explorer sidebar, so we use a recursive tree/leaf pattern… but that’s another post for another time).

Use Cases of the File Path / Content List

However, for so many other use cases, we don't even need to go as far as typing folders and files out like a recursive tree. The following are just a few examples of what we can do with this portable format:

Instant Web Preview

Most recently, we’ve enabled instant web preview for any web-based applications that are being built within a CodeVideo course or lessons(s) - check out our latest demo video:

Compiling and/or Static Analysis

Most compiler / static analysis tools only need the previously mentioned list of POSIX-style file paths and their content - the compiler handles the rest to determine if the codebase passes static checks. We’re working on a tool that dynamically determines the language of a project and parses it from there: codevideo-dynamic-ast

Creating Zip Exports

Creating zip files representing the codebase at any step in a CodeVideo project - a favorite for course creators to export their code as a zip at the end of each lesson - this, too, only needs the file paths and their content.

Start At Non-Empty Codebase

For creating lessons that already start at a given point within a project - with any number of files and folders in the codebase, or for continuing lessons from previous ones, the concept is also the same: we can restore the state of the editor with a series of file names and their content.

The Details Behind Instant Web Preview

We use esbuild-wasm internally. We can package and preview web apps within the web itself. This includes any type of web project:

• Vanilla HTML/JS/CSS

• React applications - with or without TypeScript

• Vue applications

• Angular applications

• Complex builds with npm packages

The process is straightforward:

1. Take your file / content items

2. Create a virtual file system in memory

3. Bundle at near-native speed

4. Execute in a sandboxed iframe

5. Show results instantly

No server needed. Just transformation.

The “Not-So-Friendly-To-Web” Languages

What about languages beyond those that are “web-friendly”?

Golang

For Go, we have hackpad - a complete Go development environment in WebAssembly. Not just running Go code, but running the Go compiler itself in the browser. It works, though compile times can be slow.

Python

Pyodide brings Python's scientific stack to the browser. It's a 10MB download, but you get Python 3.8+ with NumPy, Pandas, Matplotlib. The entire ecosystem, running client-side.

Java

CheerpJ 4.x is a full JVM implementation in WebAssembly. Java 11 today, Java 17 in preview. Swing applications, AWT, even Oracle Forms - all running without plugins. It's 100MB, but it's a complete Java environment.

C#

The Mono runtime compiled to WebAssembly powers Blazor. Not transpilation - the actual .NET runtime executing your assemblies client-side.

C/C++

clang-in-wasm represents perhaps the most ambitious goal. While Emscripten has long compiled C/C++ TO WebAssembly, having Clang itself run IN WebAssembly is different. You can compile C programs directly in the browser.

Rust

So, as you can see, support for some of these languages is spotty at best. And in the case of Rust, for example, there is no direct, fully-functioning choice at all!

Rust can compile TO WebAssembly beautifully. But running rustc itself in WebAssembly? That's a different challenge. The Rust compiler is massive and complex. While efforts exist for lightweight Rust interpreters, none match the full rustc experience.

What This All Means Within CodeVideo

This journey from viewing code as syntax to understanding it as structure reveals some truths:

1. Language is just semantics. All applications are just a series of files that get transformed into machine instructions.

2. The browser is becoming an OS. With WebAssembly, browsers aren't document viewers anymore. They're runtime environments.

3. Compilation is just transformation. Whether it happens on a server or in your browser is an implementation detail.

4. Education will evolve. When anyone can compile and run code in any browser, the barriers to learning evaporate.

The Future

Imagine an educational framework where:

• Your codebase is treated as an array of {path, content} objects for when it comes to compiling, analyzing, or previewing the project

• Language is more like a property, not a lock-in constraint

• Compilation happens wherever and whenever convenient - time travel to the end of the lesson - or back to the beginning - or every step in between

• Execution environments are fluid

This isn't theoretical. CodeVideo's architecture is built on these principles. Our event-sourced system treats code changes as data, making them portable and reproducible.

Moving Forward

Soon, the differences between "my JavaScript project" or "my Python application", at least from a CodeVideo or educational standpoint, will be quite small. Instead, the course creator or student only need to ask:

• What are my files?

• What are their contents?

• Where should they run?

• How do I make that happen?

With CodeVideo, I’ve built our platform to be language-agnostic at its core, even as I add specific language support.

Because ultimately, every codebase - no matter how complex - is just a thoughtfully organized collection of files and their contents.

And that simplicity is what makes true portability possible.

-Chris