- Product
- ContentForge Studio, live at contentforge.originforgestudio.co.uk
- Built by
- OriginForge Studio Ltd (Paul Yorke)
- Started as
- An Electron desktop app
- Now
- A web app: vanilla TypeScript and Vite, Firebase Auth, Firestore and Storage, Stripe billing
- Core features
- Canvas editor, multi-track timeline, waveform display, voiceover recording, project tabs, MP4 export
The challenge
ContentForge Studio began as an Electron desktop app, and the goal was to bring every feature to the browser with nothing cut.
A desktop app can lean on the operating system: native file access, inter-process messaging and local storage. A web app has none of that, so each of those had to be replaced with a browser equivalent. Electron IPC became browser APIs, and local project storage moved to IndexedDB. The result also had to run as a subdomain of the main OriginForge Studio site, with real accounts and paid plans behind it.
Approach and what was built
The app is written in vanilla TypeScript with Vite, with no UI framework, which keeps the bundle small and the rendering code direct. Firebase handles sign-in, project data and file storage, and Stripe handles subscriptions.
The editor covers:
- A canvas editor for text, shapes, images, video and stickers
- A multi-track timeline with waveform display
- Voiceover recording in the browser
- Project tabs, so several projects stay open at once
- Export to MP4, with free-tier limits applied on export
- Layer fades in and out, set from a right-click menu on the timeline
- Real scene lighting: ambient, point and spot lights that illuminate the layers beneath them, with animated looping and ready-made presets such as headlights
The lighting works the same in the editor preview and in exported video, so what you see is what you export.
Technical decisions and hard problems solved
The hardest work was making video behave in a browser. Four problems stood out.
1. Editor state destroyed media
The UI re-renders by replacing the page body, which discarded playing video and audio elements.
Fix: media elements are now kept alive across renders.
2. Screen recordings were slow to seek
Browser-recorded screen captures contain a single keyframe, so jumping to any frame costs more the further into the clip it is.
Fix: export now plays the video forward and re-syncs only when it drifts, instead of seeking on every frame.
3. Export timing drifted
The browser's MediaRecorder timestamps frames by when they arrive, so a slow frame stretched the video.
Fix: the export loop now follows the clock, so duration and audio sync stay exact and a slow machine loses frame rate rather than accuracy.
4. MP4 export was slow
Fix: export now records natively to MP4 where the browser supports it, and falls back to WebM with an in-browser ffmpeg transcode where it doesn't. Exports are capped at 1920px on the longer side to keep them dependable.
A smaller but telling fix: clicking the timeline ruler landed in the wrong place once the timeline was scrolled, because the scroll offset was being counted twice.
The app was also audited with GrokBot, an automated review pass, and the findings were fixed and re-tested.
Quality, launch and what's next
ContentForge Studio is live and heading into launch. Before launch, the work centred on testing exports against real recordings, checking that one account can never see another's projects, and confirming sign-in domains and live Stripe billing.
After launch, the plan is a visual polish pass: a consistent icon set, transitions between scenes, the Inter typeface, a merged toolbar and friendlier empty states. A cleaner edge on background removal is also queued.
Try it at contentforge.originforgestudio.co.uk.