60+ FPS Headless Timeline Editor Component For React

#react #ai #javascript

I vibe-coded a headless React component library for building a critical video editing component, a timeline editor.

I have another, mostly vibe-coded project called Cliparr, which allows you to easily cut and export clips from Jellyfin and Plex, but I ran into a hard limitation.

The existing library I was using for the timeline editor component was working well, up until I wanted to add support for subtitles. Then I went from one clip, to dozens or more for each subtitle cue. Immediately, playback became choppy, and scrolling through the timeline was causing obvious lag.

It turned out the main issue was just the number of DOM elements inserted in the page. Each carried their own state, their own listeners, and were another item to be calculated in repaints.

Unfortunately, there weren't that many other libraries out there for this specific need, possibly a paid solution, but that wouldn't have worked for my open source project.

Instead, starting with Google AI Studio to get the idea down for the project and docs scaffolding, I started over the next couple of weeks working on it through ChatGPT Codex. Both planning, consulting, and of course, building.

To solve the main problem, I wanted to move as much as I could to a canvas-based renderer, we could both use offScreenCanvas to calculate and draw everything we need on a separate thread (huge savings immediately), and to reduce the amount of DOM elements on the screen.

To make sure the library wouldn't be locked to a specific style or implementation, I started having Codex build out React Hooks that could be used in any implementation.

At the end, I had a canvas-rendered timeline editor powered by hooks, meaning I could make the exact same implementation, both in cavnas and fully in DOM, finally allowing me to benchmark between the two.

https://canvastimeline.com/demos/timeline-stress-test/