# How to Vibe Code Your Own Tella (and Stop Paying for It)

> The all-in-one screen recorder and video editor for remote teams

- Site: https://tella.com
- Category: Video & Productivity SaaS
- Verdict: **Serious undertaking** (38/100 vibecodeable)
- Estimated effort: 4-6 weeks of part-time development

## Verdict

Build a personal subset with a web recorder and basic timeline cutter, or keep paying if you rely on the native desktop drivers and automated AI editing daily.

Replicating Tella's core value for personal use means building a complex hybrid of browser-based media recording, client-side video manipulation, speech-to-text alignment, and cloud storage pipelines. While a web-only screen recorder using MediaRecorder and basic FFmpeg.wasm editing is achievable, building the native screen/system audio capture drivers for macOS/Windows and orchestrating transcript-driven video cutting will consume dozens of hours of frustrating debugging, particularly around audio-video sync edge cases and browser codec limitations.

### What you can't replicate

- The polished native desktop recorder wrappers for macOS and Windows with zero-lag system audio capture
- The exact speed and reliability of background chunked uploads for heavy 4K streams
- Tella's brand equity, customer trust, and seamless sharing domain ecosystem

## What it does

Tella combines high-performance screen recording with a browser-based video editor, automatic transcript-based editing, filler word removal, dynamic layouts, and instant share links with detailed analytics.

### Core features

- Simultaneous screen, webcam, and microphone recording
- Background chunked video uploads with S3 pre-signed URLs
- Web-based timeline and transcript text editor
- AI filler word and silence removal
- Dynamic picture-in-picture and side-by-side layout templates
- Instant shareable links and embeddable player with analytics
- AI title, chapter, and document generation

## The business

### Pricing

- Free: $0/mo — Starter tier with core recording and 7-day trial export badges
- Pro: $13/mo — Full creator and team features
- Premium: $19/mo — Advanced branding and control

### Funding

$3.5M raised.
- Pre-Seed (August 2020)
- Seed (August 2020 - Y Combinator)
- Seed Round (April 2025 - $2.1M led by Gradient Ventures)
Investors: Gradient Ventures, Y Combinator, Liquid 2 Ventures, Operator Exchange

Founded 2020.
Team size: 1-10 employees.

## The hard parts

- Building a cross-platform desktop recorder wrapper that captures high-frame-rate system audio and video cleanly
- Synchronizing word-level speech-to-text timestamps with video timeline cuts and edits
- Implementing performant client-side video composition and rendering pipelines in the browser
- Managing robust chunked background uploads that survive tab closures without data loss

## How to vibe code Tella

### Prerequisites

- Node.js (free): Required for running the Next.js frontend development environment and package management.
- GitHub (free): Version control and deployment pipeline synchronization.
- Cloudflare Account (free): Hosting the Next.js app on Cloudflare Pages and storing video chunks in R2 object storage.

### Recommended AI tools

- Claude Code: Handles multi-file scaffolding, API routing, and debugging complex client-side media recording logic.
- Cursor: Ideal for iterative UI styling and fine-tuning the video editor timeline components.

### Stack

- Frontend: Next.js with Tailwind CSS and Lucide icons
- Backend: Next.js Server Actions / Cloudflare Workers API routes
- Database: Turso (SQLite at the edge for projects, video metadata, and transcripts)
- Auth: better-auth
- Payments: None (personal use clone)
- Other: OpenAI Whisper API for speech-to-text transcription, Anthropic API for AI title, chapter, and document generation, FFmpeg.wasm for client-side video trimming and manipulation

### Hosting

- Cloudflare (Hosting frontend Next.js app via OpenNext and storing raw video recordings in R2 object storage with zero egress fees.): $0-5/mo
- Turso (Storing video project schemas, workspace metadata, and JSON transcript structures.): $0/mo

### Build guide

1. **Scaffold Project & Database Schema** — Initialize a Next.js 16 project with Tailwind CSS and configure Turso with Drizzle ORM to manage users, video projects, layouts, and transcripts.

```
Create a new Next.js 16 project configured with TypeScript and Tailwind CSS. Set up Drizzle ORM connected to Turso (SQLite). Define database schemas for 'users', 'projects' (id, title, userId, createdAt, status), 'clips' (id, projectId, trackType, storageKey, duration), and 'transcripts' (id, projectId, text, wordTimestampsJson). Add better-auth for simple single-user local authentication. Ensure clean directory structure with Server Actions for database mutations. Verify the build passes with zero TypeScript errors.
```

2. **Web Screen & Camera Recorder** — Build the core browser-based recording interface using MediaRecorder API to capture screen, camera, and microphone streams simultaneously.

```
Build a recording screen component in Next.js using the browser MediaRecorder API and navigator.mediaDevices.getDisplayMedia and getUserMedia. Implement simultaneous capture of screen and webcam feeds as separate media streams. Add UI controls for starting, pausing, stopping, and previewing the recorded clips. Configure recording streams to output WebM/MP4 blobs with clear timer tracking and audio level meters. Handle permission denial edge cases gracefully with informative error messages.
```

3. **Background Chunked Uploads to Cloudflare R2** — Implement direct-to-R2 pre-signed URL chunked uploads so recordings are uploaded reliably in the background during or immediately after recording.

```
Implement an upload service that generates Cloudflare R2 pre-signed URLs via Next.js server actions. Build a client-side chunking mechanism that uploads recorded video blobs in parallel or sequential chunks to R2 storage. Add upload progress indicators, retry logic for failed chunks, and a completion callback that updates the project status in the Turso database once all parts are successfully assembled.
```

4. **Transcript Generation & AI Editing** — Integrate OpenAI Whisper API to transcribe audio and display an interactive text editor where deleting text trims the underlying video timeline.

```
Create a transcription pipeline that sends recorded audio tracks to the OpenAI Whisper API to generate word-level timestamped transcripts. Build a document-style text editor component in the frontend that renders the transcript words. Implement synchronization logic where selecting and deleting text blocks calculates corresponding video timestamp cuts, updating the project edit decision list (EDL).
```

5. **Video Timeline & Layout Editor** — Build a web-based video editor supporting layout switching (picture-in-picture, side-by-side) and FFmpeg.wasm rendering for final exports.

```
Build a video timeline editor component that displays video clips, audio tracks, and layout configurations. Implement layout switcher controls (picture-in-picture, side-by-side, full screen camera). Integrate FFmpeg.wasm to enable client-side video preview rendering and final export processing based on the edit decision list generated from transcript and timeline edits. Ensure export progress is clearly displayed to the user.
```

6. **Instant Sharing & Embeddable Player** — Create public share pages with custom links, video engagement analytics tracking, and embeddable player widgets.

```
Build a public share page route (`/v/[id]`) that renders an optimized video player with playback speed controls, comments, and call-to-action buttons. Implement view analytics tracking that records unique viewers, watch time, and drop-off rates into the Turso database on playback events. Create an embeddable iframe player view (`/embed/[id]`) with domain restriction checks and clean unbranded presentation.
```

### Cost vs paying

**Starting costs (one-time):**

- Custom Domain (optional): $12/year
- OpenAI Whisper API credits: ~$5 starting credit
- Total: ~$17 one-time

**Ongoing costs (monthly):**

- Cloudflare Workers & R2 storage: $0-5/mo
- OpenAI Whisper / Anthropic API usage: ~$3-8/mo
- Total: ~$5-13/mo

- Paying for the SaaS instead: $13/mo (Pro) or $19/mo (Premium)
- Build time: 35-50 hours
- AI tool credits: $20 (Claude Pro)
- Break-even: Paying for Tella is more rational unless you enjoy media pipeline engineering, as API and hosting costs match the SaaS subscription once active.

## Sources

- [Tella Official Website](https://tella.com)
- [Tella Pricing](https://tella.com/pricing)
- [Tella Features](https://tella.com/features)
- [Y Combinator Company Profile - Tella](https://www.ycombinator.com/companies/tella)