Skip to main content
Meeting highlights allow you to select segments of a meeting’s transcript and combine them into shareable video clips. The system supports multiple aspect ratios, automatic captions, speaker overlays, and social media optimizations for platforms like Instagram, TikTok, and YouTube Shorts.

​
Key capabilities

Visual editing

Select utterances directly from the transcript timeline with click-and-drag or Shift+Click range selection.

Live preview

Preview your highlight with automatic playback through selected segments before generating the final video.

Multiple formats

Generate in 16:9 landscape for desktop or 9:16 portrait for social media platforms.

Smart rendering

Automatic captions, speaker overlays, and social media enhancements like blur margins and zoom.

​
How highlights work

The highlight system uses a page-based architecture with editing mode on the transcript page:
1

Create highlight

Click the “Create Highlight” button in the header, right-click an utterance to start from that point, or use the ”+ Add Highlight” button in the list. The system creates a highlight with an auto-generated name.
2

Edit content

Select utterances in transcript view. Click individual utterances to toggle them, or Shift+Click to select ranges. Changes are tracked with an “Unsaved Changes” badge.
3

Preview playback

Open the preview dialog to watch your highlight with automatic playback through segments. The video loops back to the beginning for continuous review.
4

Configure rendering

Choose aspect ratio (16:9 or 9:16), enable captions and speaker overlays, and configure social media enhancements in the preview dialog.
5

Generate video

Click “Generate” to dispatch a background task. The system auto-saves unsaved changes before generation. Track progress on the highlight detail page.
6

Share

Download the generated video or share the highlight page link. Videos support both landscape and portrait formats with responsive player.

​
Creating highlights

There are three ways to create a highlight:
Click the “Create Highlight” button (⭐) in the page header:
  1. Creates highlight with name “Unnamed Highlight”
  2. Redirects to transcript page in editing mode
  3. No utterances pre-selected - start from scratch
This is the recommended method for creating highlights from the meetings list or detail page.
From docs/guides/meeting-highlights.md:120-128

​
Editing interface

The highlight editing mode provides a streamlined interface:
A yellow bar appears at the top of the transcript with:
  • Highlight name with edit icon to update name and subject
  • Statistics: Duration, speaker count, utterance count (real-time)
  • Preview button: Opens the dedicated preview dialog
  • Navigation: Previous/Next highlight navigation
  • Actions menu: Save now, reset to original, exit editing
From src/components/meetings/HighlightModeBar.tsx
The transcript controls timeline shows:
  • Base layer: Speaker segments as colored bars (party colors)
  • Highlight layer: Selected utterances overlaid as amber bars
  • Clip navigation: Previous/Next buttons with “Clip X/Y” indicator
  • Interactive tooltips: Hover to see speaker and timestamp
  • Click-to-seek: Click anywhere on timeline to jump to that moment
From src/components/meetings/TranscriptControls.tsx
Select content directly in the transcript:
  • Click an utterance to toggle selection (bold/underlined when selected)
  • Shift+Click to select/deselect all utterances between clicks
  • Amber overlays appear on the timeline for visual feedback
  • Unsaved changes badge appears when modifications are made
From src/components/meetings/transcript/Utterance.tsx

​
Preview and generation

The preview dialog provides a unified interface for review and configuration:
The preview dialog displays:
  • Video player with current segment playback
  • Text preview showing grouped utterances by speaker
  • Clip navigation controls (Previous/Next, Clip X/Y)
  • Auto-advancing playback that loops through all segments
  • Hover controls for play/pause with large button overlay
Preview mode seeks to the first highlighted utterance and automatically plays through each segment.
From docs/guides/meeting-highlights.md:143-150

​
Video rendering

Highlights are generated by an external task server with sophisticated rendering: 
const requestBody: GenerateHighlightRequest = {
  media: {
    type: 'video',
    videoUrl: highlight.meeting.videoUrl
  },
  parts: [
    {
      id: highlight.id,
      utterances: utterances.map(u => ({
        utteranceId: u.id,
        startTimestamp: u.startTimestamp,
        endTimestamp: u.endTimestamp,
        text: u.text,
        speaker: {
          id: person?.id,
          name: person?.name || speakerTag.label,
          partyColorHex: party?.colorHex,
          partyLabel: party?.name_short,
          roleLabel: cityRole?.name
        }
      }))
    }
  ],
  render: {
    includeCaptions: true,
    includeSpeakerOverlay: true,
    aspectRatio: 'social-9x16',
    socialOptions: {
      marginType: 'blur',
      zoomFactor: 1.0
    }
  }
};
From src/lib/tasks/generateHighlight.ts:10-212

​
Aspect ratios and formats

Highlights support two aspect ratios for different use cases:
Landscape format for traditional viewing
  • Desktop-optimized
  • Suitable for YouTube, website embeds
  • Standard meeting video format
  • No additional processing needed
Use 16:9 when sharing on desktop platforms or when you want the full meeting frame.
From docs/guides/meeting-highlights.md:22-32

​
Categorization system

Highlights are automatically categorized into three sections:

Showcased

Featured highlights marked for special attention. Toggle showcase status on the detail page (requires generated video).

Video highlights

Non-showcased highlights with generated videos in both 16:9 and 9:16 formats.

Draft highlights

Highlights without videos, ready for content editing and generation.
From docs/guides/meeting-highlights.md:209-216
The showcased toggle is only available when muxPlaybackId exists (video has been generated).

​
Responsive video player

The highlight video player adapts to different aspect ratios: 
// Adaptive container sizing
const containerStyle = isPortrait 
  ? { maxHeight: '70vh', width: 'auto' }
  : { maxWidth: '100%', width: '100%' };

// Video player with automatic dimension detection
<div style={containerStyle}>
  <MuxPlayer
    playbackId={muxPlaybackId}
    onLoadedMetadata={(e) => {
      const video = e.target as HTMLVideoElement;
      const aspectRatio = video.videoWidth / video.videoHeight;
      setIsPortrait(aspectRatio < 1);
    }}
  />
</div>
From src/components/meetings/HighlightVideo.tsx and docs/guides/meeting-highlights.md:35-39
Desktop layout: Side-by-side content and video
Mobile layout: Stacked vertically for optimal viewing

​
Subject association

Highlights can be connected to meeting subjects for better organization: 
// Edit name and subject in the mode bar
await saveHighlight({
  name: 'Budget discussion on parks',
  subjectId: 'subject-123'
});
Benefits:
  • Better discoverability via subject pages
  • Contextual grouping of related highlights
  • Improved search and filtering
Subject connections are optional but recommended for highlights that focus on specific agenda items.

​
State management

Highlight editing uses centralized context:
Main editing lifecycle methods:
  • enterEditMode(highlight) - Start editing a specific highlight
  • updateHighlightUtterances(utteranceId, 'add' | 'remove') - Modify composition
  • saveHighlight(options?) - Persist changes with optional name/subject updates
  • resetToOriginal() - Discard unsaved changes
  • exitEditMode() - Return to highlights list (prompts if unsaved)
Preview and navigation:
  • openPreviewDialog() / closePreviewDialog() - Control preview dialog
  • goToPreviousHighlight() / goToNextHighlight() - Navigate between highlights
State properties:
  • hasUnsavedChanges - Track dirty state
  • statistics - Real-time duration, speaker count, utterance count
  • isPreviewDialogOpen - Preview dialog state
  • highlightUtterances - Current composition
From src/components/meetings/HighlightContext.tsx
Centralized meeting data with highlight management:
  • addHighlight(highlight) - Add new highlight to list
  • updateHighlight(highlightId, data) - Update existing highlight
  • removeHighlight(highlightId) - Remove from list
This context ensures all components see consistent highlight data.From src/components/meetings/CouncilMeetingDataContext.tsx

​
Configuration

Set up highlight generation: 
# Task API for video processing
TASK_API_URL=http://localhost:3005
TASK_API_KEY=your_task_api_key

# Mux for video playback (automatic via task server)
# No additional config needed - returned in generation result

​
API reference

​
requestGenerateHighlight
async function
Dispatches highlight video generation task
​
handleGenerateHighlightResult
async function
Processes video generation result callback

​
Best practices

Create concise highlights (1-3 minutes) that focus on a single topic or decision:
  • ✅ “Mayor’s response to parking concerns”
  • ✅ “Vote on new bike lane proposal”
  • ❌ “Entire 2-hour meeting summary”
Short, focused clips are more shareable and get more engagement.
Rename “Unnamed Highlight” to something descriptive:
  • ✅ “Budget approval for park renovation”
  • ✅ “Opposition party statement on traffic plan”
  • ❌ “Unnamed Highlight 1”
Good names improve discoverability and SEO.
Link highlights to agenda subjects for context:
  • Helps users find all content related to a subject
  • Improves organization and navigation
  • Enables subject-based filtering
Select aspect ratio based on your audience:
  • 16:9 for websites, YouTube main feed, desktop viewers
  • 9:16 for Instagram, TikTok, YouTube Shorts, mobile-first audiences
Consider creating both versions for maximum reach.

​
Next steps

Transcription

Understand how transcripts enable highlight creation

AI summaries

Generate summaries to identify key moments for highlights

Search

Search transcripts to find moments worth highlighting

User guide

Detailed guide for creating effective highlights

Build docs developers (and LLMs) love

Get started for freeTalk to us