Build Log: Implementing Full Text Overlay Feature in Reel Quick (with Accurate Live Preview)

In this build, I implemented the complete text overlay workflow in Reel Quick: from UI controls to background processing, plus a preview system that better matches final output.

Repo: https://github.com/ronin1770/reel-quick

Why this feature mattered

The earlier flow allowed adding overlay text, but styling control was limited and preview confidence was low.

Users needed to:

• control text appearance (size, color)
• control placement (top/center/bottom)
• preview changes instantly before processing
• avoid trial-and-error renders

The goal was to make text overlays practical for real reel production, not just a placeholder UI.

---

What the feature now includes

1. Overlay content + timing

Users can create overlays with:

• text
• start time
• end time

2. Style controls

Added styling inputs in the dialog:

• Font size range: 40–200
• Text color:
  • HTML5 color picker (input type="color")
  • HEX input (synced with picker)
• Position selector:
  • top
  • center
  • bottom

3. Live preview (client-side only)

The overlay updates instantly while editing:

• no backend call
• no queue call
• no video reprocessing

This lets users iterate quickly before clicking process.

4. Dialog UX improvements

The modal was redesigned to be usable at production scale:

• controls on the left
• preview on the right
• scrollable modal for smaller viewports
• action buttons always reachable

---

The key technical challenge: preview/output mismatch

A big issue was that selected preview size didn’t visually match rendered output.

Root cause

Frontend preview text used raw CSS px in a display container, while backend renders text on actual output video resolution.

Same number, different render context.

Fix strategy

I changed preview scaling logic to account for real video dimensions:

1. Read intrinsic source dimensions from video metadata (videoWidth, videoHeight)
2. Measure actual preview frame dimensions in the modal
3. Compute scale factor:
   • scale = min(previewWidth/sourceWidth, previewHeight/sourceHeight)
4. Render preview text as:
   • previewFontSize = selectedFontSize * scale
5. Preserve source aspect ratio in preview container
6. Mirror vertical placement behavior (top/center/bottom with scaled edge padding)

Result: preview size and placement now feel much closer to final rendered video.

---

API + backend integration

Good news: backend already supported style fields, so no backend API redesign was needed.

The frontend sends per-overlay payload with:

• style.font_size
• style.text_color
• position.preset

Then it follows the existing pipeline:

1. Save overlays POST /videos/{video_id}/text-overlays
2. Enqueue processing POST /enqueue/text-overlay
3. ARQ worker picks job and runs MoviePy text overlay composition

---

Data flow (end to end)

1. User opens text overlay dialog
2. Configures text + timing + style + position
3. Verifies in live preview
4. Saves overlay config
5. Enqueues job
6. Worker validates and renders final video
7. Processed text-overlay video becomes available for download

---

Validation and guardrails

• Font size is clamped to configured range
• HEX color is normalized/validated
• Overlay timing is validated before processing
• Position options are constrained to supported presets
• Preview updates remain instant and local

---

What changed from earlier behavior

• Old frontend default style used a very small fixed size
• New feature provides interactive style control + accurate preview scaling
• Modal UX is now horizontal and production-friendly

---

What’s next

Potential follow-ups:

• font family selection
• stroke/shadow controls in UI
• drag-and-drop custom placement
• multiple overlay tracks/timeline editing

---

If you want, I can also generate:

1. a shorter Dev.to teaser version
2. an accompanying screenshot checklist for the post
3. a “before vs after” section with technical diff notes