From Waveforms to Words: How We Built a Text-First Podcast Editor

The idea for the koolio project was quite ambitious: make editing a podcast as easy as working with text in Google Docs.

Unlike traditional audio editors that rely on timelines and waveforms, this tool needed to let users type, delete, and move sentences with the audio updating automatically in sync. The need to deliver it within a six- to eight-week timeline added to the challenge.

From the very first call, I knew this one would be different. It wasn’t just the technical complexity of the tool we were building; it also became clear that it would demand constant collaboration, creative problem-solving, and an openness to iterate fast. Every week brought new conversations with stakeholders, new insights, and new challenges to solve.

From Design to Full-Fledged System

What started as a straightforward design project soon grew into something much larger. I was brought on as a front-end developer to build out the interfaces that the ownpath Studios design team had worked on.

I began by working closely with one senior front-end engineer from the Koolio team, who served as my point of contact with their backend developers. But as the product grew, I joined their full stand-ups with a team of five front-end and five backend engineers.

Being the only person managing the front-end from ownpath Studios’ side meant documenting everything meticulously. I started recording walkthrough sessions, explaining the architecture, components, and key decisions line by line so that anyone joining later could onboard quickly.

Optimising for Performance

On the design front, our design lead, Vikalp, led the effort along with a couple of designers. We’d hop on calls to go over micro-animations, shadows, and fine details that brought the interface to life.

Because Koolio was a heavy web app, optimization was everything. Some animations, while visually stunning, were expensive to render. We’d go back and forth balancing aesthetics with performance, learning to make tradeoffs that preserved both usability and polish.

Breaking New Ground

The technical backbone relied on FFmpeg and Wavesurfer.js for waveform manipulation, React for structure, and TailwindCSS for styling. One of the toughest parts was creating a seamless bridge between the text transcript and the waveform.

Every edit — typing, deleting, moving — needed to update the audio instantly. Getting that sync to work smoothly required managing offsets, re-rendering on the fly, and constantly tuning performance. We studied tools like Descript to understand how they solved similar problems, then adapted those insights to fit our architecture.

Moments That Tested Everything

There were plenty of moments that stretched me technically and mentally. Once, a massive memory leak surfaced days before a key demo. It took an entire week of debugging to trace and fix it. It was a reminder of how important practices like code reviews can be in a web app of this scale.

Another time, koolio had an upcoming demo and needed core functionality ready under a tight deadline. The whole team rallied to deliver it. We pulled long nights, tested rapidly, and managed to ship a working prototype just in time.

Looking Back

In just a few months, we started from pretty much a blank canvas and went to a production-ready web app that will soon be used by thousands. I learned more in that span than I could’ve imagined, not just technically, but in how to work with stakeholders, manage fast-paced development, and collaborate across design, product, and engineering.

koolio was an exercise in ownership, iteration, and trust. It was the kind of challenge that changes how you think about building products.

‍