Building products that solve real problems

Developer, entrepreneur, and maker. I build SaaS products, Chrome extensions, and share what I learn along the way.

TikTok Screen Recorder

TikTok Screen Recorder

A tiny Electron app for TikTok-friendly screen captures.

completed

I wanted a dead-simple way to record TikTok-friendly screen clips and AI coding made it trivial. I used Claude Code to scaffold a tiny Electron app in almost no time. It does exactly what I need and nothing more. If it breaks someday, that’s fine, I can just rebuild it. Minimal time invested

Features

  • Visual Overlay Control: Drag/resize an on-screen overlay to define the exact area that’s recorded.
  • Vertical-Friendly: Optimized for TikTok-style vertical framing (9:16-friendly capture areas).
  • Fast .webm Output: Saves recordings as .webm files quickly with minimal fuss.
  • Simple by Design: No complex settings or workflows — purpose-built and minimal.

Technical Implementation

This is an Electron app that uses desktopCapturer to grab a screen/window stream and the browser-side MediaRecorder API to encode and write .webm files. The overlay window controls the capture region so you can frame the recording exactly how you want it for TikTok clips.

What I Like About It

  • AI coding shines for small, purpose-built tools.
  • I needed something simple, so I built it quickly.
  • It’s fine if it breaks; it’s easy to recreate.

Tech Stack

TypeScriptElectronWebRTCMediaRecorder API

Screenshots

TikTok Screen Recorder screenshot 1
TikTok Screen Recorder screenshot 2

© 2025 Mike Grant. All rights reserved.