Shipping Chitra: Redefining the Creative Tooling Stack

Software development is often a game of moving boxes. We move data from a database to a frontend; we move state from a parent component to a child; we move pixels from a buffer to a screen. But occasionally, we build something that changes the nature of the box itself. This week at nandishwarsingh.com, I didn't just push code; I restructured how I present my engineering output by integrating Chitra, a video editor built for the modern web, and re-architecting the homepage hierarchy to reflect a "Tools-First" philosophy.

The commit history is sparse—one single, heavy-lifting commit—but the implications for the site’s architecture are significant. I’ve reordered the information architecture: Tools → Experiments → News. This isn't just a visual tweak. It’s a statement of intent. In a world of infinite content, tools are the only things that provide leveraged value.

The Philosophy of the "Tools-First" Homepage

Most personal sites follow a predictable pattern: About, Blog, Projects. It’s a resume in disguise. I’ve decided to kill that pattern. By moving Tools to the pole position, I am prioritizing utility over narrative.

Why? Because code that does something is more interesting than code that explains something. Chitra, the centerpiece of this week's update, is a browser-based video editor. It represents a shift in how we think about TypeScript and the browser's capabilities.

Why Video in the Browser?

For a long time, video editing was the final frontier of desktop software. You needed Premiere Pro, Final Cut, or DaVinci Resolve. You needed massive scratch disks and dedicated GPUs. But the WebAssembly (Wasm) revolution and the maturation of the WebCodecs API have changed the math.

When I added Chitra to the tools section, I was thinking about the "Time to Creative Output." If you have to download a 2GB installer to trim a clip or add an overlay, the friction kills the idea. If you can do it in a tab on nandishwarsingh.com, the idea lives.

Technical Deep Dive: Integrating Chitra

Integrating a video editor into a TypeScript-heavy repository like nandishwarsingh.com requires a deep understanding of memory management and the main thread. You can't just slap a <video> tag on a page and call it an editor.

The State Machine

Chitra relies on a complex state machine to handle the timeline. In TypeScript, we represent this as a series of tracks and clips. Here is a simplified version of the internal model I’m working with:

type TrackType = 'video' | 'audio' | 'overlay';

interface Clip {
  id: string;
  startTime: number; // in seconds
  duration: number;
  source: File | string;
}

interface Track {
  id: string;
  type: TrackType;
  clips: Clip[];
}

interface EditorState {
  tracks: Track[];
  currentTime: number;
  isPlaying: boolean;
  resolution: { width: number; height: number };
}

The challenge with this structure in a React or Vue-based site is performance. You cannot trigger a full re-render of the entire editor every time currentTime updates (which is 60 times per second).

Instead, I’ve implemented a "Push-Pull" architecture. The React layer (the "Tools" section of the site) handles the metadata—clip names, UI positions, and buttons. The actual rendering happens in a canvas or webgl context that pulls from a separate, non-reactive store. This keeps the UI snappy while the video engine chugs away at the heavy lifting.

Reordering the Hierarchy: Tools → Experiments → News

The most visible change in this week's commit was the reordering of the homepage.

1. Tools: High-utility, finished products (like Chitra).
2. Experiments: Half-baked ideas, shaders, and prototypes.
3. News: Updates on what I’m reading or thinking.

This hierarchy mirrors the life cycle of an engineer's work. Everything starts as an Experiment. Once it gains enough stability and utility, it becomes a Tool. The News is simply the log of that journey.

By placing Tools first, I am forcing myself to ship things that are functional. It’s easy to write a blog post (News). It’s harder to build a stable video editor (Tool). The site now reflects that difficulty gradient.

TypeScript as the Glue

nandishwarsingh.com is built primarily in TypeScript. People often ask why I use a strictly typed language for a personal site. The answer is simple: Refactoring confidence.

When I decided to move the Experiments section below Tools, I had to move several complex components and their associated hooks. In a vanilla JavaScript environment, this would involve a game of "find the broken reference." In TypeScript, the compiler tells me exactly where the props don't match or where a CSS-in-JS object is missing a theme variable.

For Chitra, TypeScript is even more critical. Dealing with ArrayBuffers, Blob URLs, and OffscreenCanvas is a recipe for memory leaks and runtime crashes. Having a type-safe interface for the video processing pipeline ensures that I’m not passing a null reference to a WebWorker that’s trying to decode a 4K frame.

The Engineering Insight: Minimalism in Commits

This week saw only one commit. To some, that looks like low activity. To an engineer, it represents a "Batch Update."

I’m a proponent of the Atomic Commit for small features, but for architectural shifts—like reordering the entire site's priority and adding a massive tool like Chitra—I prefer a single, cohesive commit that captures the entire "thought."

When someone looks back at the history of nandishwarsingh.com, they will see a single point in time where the site transformed from a collection of links into a suite of tools. That clarity is worth more than a dozen micro-commits saying "fix typo" or "update css."

What's Next for Chitra?

Adding Chitra to the Tools section is just the beginning. The current implementation focuses on basic timeline assembly. The next steps involve:

1. Wasm-powered Transcoding: Using FFmpeg.wasm to allow users to export in different formats directly from the browser.
2. Shader-based Transitions: Leveraging the GPU to create high-performance visual effects between clips.
3. Collaborative Editing: Using CRDTs (Conflict-free Replicated Data Types) to allow two people to edit the same timeline on my site simultaneously.

Conclusion

The web is becoming a platform for creation, not just consumption. By prioritizing Tools like Chitra on my personal site, I’m aligning my digital presence with that reality.

If you’re a developer building a personal site, ask yourself: Is this a brochure, or is this a workshop? This week, I decided mine is a workshop. The tools are on the front bench. The experiments are in the back. The news is on the chalkboard by the door.

Go build something useful.