Skip to main content

Editor Interface

The Scriptix transcript editor is a powerful, intuitive workspace for reviewing and perfecting your transcripts. This guide walks you through the interface layout, components, and navigation.

Editor Overview​

When you open a transcript, you'll see a multi-pane interface designed for efficient editing:

┌──────────────────────────────────────────────────────────────────────────────┐
│                               Document Header                                │
│     (Filename • Language • Duration • Status • Save Indicator)               │
├──────────────────────────────────────────────────────────────────────────────┤
│ Toolbar:                                                                     │
│ [Info] [Undo] [Redo] [Save] [Translate] [Export] [AI Summary] [Magic Link]   │
├───────────────────────────────┬──────────────────────────────────────────────┤
│                               │                                              │
│   Transcript Panel            │               Comments Panel                 │
│   (Main Editing Area)         │              (Sidebar, optional)             │
│                               │  • Threaded comments                         │
│ • Speaker labels              │  • Comment replies                           │
│ • Timestamps                  │  • Resolve / delete actions                  │
│ • Editable transcript text    │                                              │
│                               │                                              │
├───────────────────────────────┴──────────────────────────────────────────────┤
│                               Audio Waveform                                 │
│                       (Shows timing & playback position)                     │
├──────────────────────────────────────────────────────────────────────────────┤
│                     Audio / Video Player Controls                            │
│   [Play] [Rewind] [Speed] [Volume] [Timecode] [Clip navigation]              │
└──────────────────────────────────────────────────────────────────────────────┘

Interface Sections​

The editor consists of six main areas:

  1. Document Info Bar - Session metadata at the very top
  2. Toolbar - Action buttons and controls (left side of body area)
  3. Export & Share Controls - Export, translate, and share buttons (right side of body area)
  4. Search Panel - Find and replace (toggleable, left column)
  5. Transcript Body - Main editing area (center column, with virtualized scrolling)
  6. Comments Panel - Review and collaboration (right column)
  7. Waveform - Visual audio timeline (bottom, if media available)
  8. Player Controls - Audio/video playback controls (bottom fixed bar)

Media Player: A draggable floating video/audio player appears on the left side when media is available.

Document Info Bar​

The top bar displays document metadata and status:

Document Information​

Filename Display:

  • Document filename shown with underline styling
  • Click the edit icon (pencil) to rename the document
  • Click the delete icon (trash) to delete the document

Session Metadata:

  • Language - Document language (e.g., "EN", "NL")
  • Duration - Total media duration in HH:MM:SS format
  • Character Count - Live character count updates as you edit
  • Save Status - Shows current save state with icon and color:
    • Synced (green) - All changes saved to server
    • Saved Locally (yellow) - Saved locally but not yet synced
    • Saving (blue with spinner) - Save in progress
    • Unsaved (red) - Local changes not yet saved

Session Dates:

  • Uploaded - When the file was uploaded
  • Session Start - When transcription started
  • Date Finished - When transcription completed

Toolbar​

The toolbar contains essential editing controls, located at the top of the main editing area (below the document info bar):

Action Buttons (Left Side)​

Info Button

  • Icon: Information symbol (i)
  • Opens keyboard shortcuts modal
  • Shows all available hotkeys in two-column layout

Save Button

  • Icon: Save/disk symbol
  • Manually saves the transcript
  • Shows save status indicator on the right
  • Auto-save runs every 120 seconds (2 minutes)
  • Disabled when document is finalized

Undo Button

  • Icon: Curved arrow left (Undo2)
  • Reverts the last change
  • Keyboard: Ctrl + Z (Windows) or Cmd + Z (Mac)
  • Disabled when no changes to undo or when saving

Redo Button

  • Icon: Curved arrow right (Redo2)
  • Restores undone changes
  • Keyboard: Ctrl + Y (Windows) or Cmd + Y (Mac)
  • Disabled when nothing to redo or when saving

Reset Button

  • Icon: Reset/refresh symbol
  • Resets document to last saved version
  • Opens confirmation modal to prevent accidental resets
  • Discards all unsaved changes
  • Disabled when document is finalized

Search Button

  • Icon: Magnifying glass
  • Toggles the search panel on/off
  • Keyboard: Ctrl + F or Cmd + F
  • Opens find and replace functionality

Save Status Indicator (Right Side)​

Shows the current save state with visual feedback:

Status Display:

  • Icon and colored badge indicate current state
  • Timestamp shows when last saved (on hover tooltip)

Save Progress:

  • Subtle animated gradient line appears during save operations
  • Auto-save triggers every 2 minutes when changes are detected

Export & Share Controls (Right Side)​

Located on the right side of the toolbar area:

Finalize Toggle​

Slide Switch:

  • Shows current state: "Editable" or "Finalized"
  • Toggle to lock/unlock document
  • Editable - Document can be edited
  • Finalized - Document is locked (read-only, prevents all edits)
  • Prevents accidental changes to approved transcripts
  • Save and Reset buttons disabled when finalized

Action Buttons​

Translate Button

  • Icon: Languages icon
  • Opens translation dialog
  • Select target languages (multi-select)
  • Enter translation filename
  • Batch translate to multiple languages

Export Button

  • Icon: Export symbol
  • Opens export dialog
  • Choose format (DOCX, TXT, PDF, HTML)
  • Configure export options:
    • Include/exclude speakers
    • Include/exclude timestamps
  • Download media file
  • See Export Formats

Summarize Button

  • Icon: Sparkles
  • Generate AI summary of transcript
  • Opens in modal/dialog

Magic Link Button

  • Icon: Wand sparkles
  • Generate shareable magic link
  • Send via email to multiple recipients
  • Add optional message for recipients
  • Disabled when document is finalized
  • See Share Transcripts

Transcript Body (Main Editing Area)​

The central area where you read and edit your transcript:

Layout​

Three-Column Grid:

  • Left column: Search panel (toggleable)
  • Center column: Transcript content (main focus)
  • Right column: Comments panel

Virtual Scrolling:

  • Handles large transcripts efficiently (thousands of utterances)
  • Smooth scrolling performance
  • Center column auto-scrolls during playback

Utterance Structure: Each speaker turn is an "utterance" with this format:

[00:01:23] Speaker 1
This is the first paragraph of the speaker's utterance.
It can contain multiple sentences.

This is a second paragraph within the same utterance.

Visual Hierarchy:

  • Timestamps - Gray text in brackets [00:01:23]
  • Speaker labels - Bold or colored text "Speaker 1" (clickable to change speaker)
  • Transcript text - Standard text with formatting support
  • Paragraph breaks - Visual spacing between paragraphs

Editing Interactions​

Click to Edit:

  • Click anywhere in the text to position cursor
  • Type to add or modify text
  • Delete to remove text
  • Standard text editing shortcuts work

Click Timestamp to Navigate:

  • Click timestamps to jump to that audio position
  • Audio player seeks to that time and begins playback

Text Selection:

  • Click and drag to select text
  • Double-click to select a word
  • Triple-click to select a paragraph
  • Selected text shows formatting popup with options

Text Formatting Popup​

When text is selected, a floating toolbar appears with:

Text Style Options:

  • Bold - Ctrl + B
  • Italic - Ctrl + I
  • Underline - Ctrl + U
  • Strikethrough - Ctrl + S

Comment Option:

  • Add comment to selected text
  • Opens comment input dialog

Utterance Row Controls​

Each utterance has control buttons (visible on hover or when active):

Add Utterance Above (visible on first row only)

  • Insert a new speaker turn before this one
  • Creates blank utterance with "No speaker" label

Add Utterance Below

  • Insert a new speaker turn after this one
  • Creates blank utterance with "No speaker" label

Delete Utterance

  • Remove the entire speaker turn
  • Opens confirmation modal
  • Cannot be undone after save ( except if you reset the entire document)

Split Utterance

  • Break utterance into two at cursor position
  • Useful for correcting speaker attribution
  • Creates new utterance with same speaker

Change Speaker

  • Click speaker name to open speaker selector
  • Choose from existing speakers or add new one
  • Option to change all instances of current speaker

Active Word Highlighting​

During playback:

  • Current word is visually highlighted in the transcript
  • Auto-scrolling keeps current word visible in viewport
  • Out-of-view indicator - "Jump to current word" button appears when you scroll away

Jump Button:

  • Appears at the top when current word is out of view
  • Click to scroll back to the actively playing word
  • Re-centers transcript on current position with smooth animation

Search Panel​

Toggleable panel on the left side for finding and replacing text:

Opening the Search Panel​

Methods:

  • Click Search button in toolbar
  • Panel appears in left column

Search Panel Components​

Search Input:

  • Text field to enter search term
  • Live search as you type (debounced 250ms)
  • Results update automatically
  • Clear button (X) to reset search

Match Counter:

  • Shows total matches found as a badge
  • Example: "Matches 5"
  • Updates as you type or change options

Replace Input:

  • Text field for replacement text
  • Used with Replace This/Replace All buttons

Replace Buttons:

  • Replace This - Replace current highlighted match only
  • Replace All - Replace all matches at once
  • Both disabled when no results

Search Options:

  • Case Sensitive (Aa) - Toggle for exact case matching
  • Whole Word (W) - Match complete words only
  • Both shown as mini checkbox buttons

Navigation Buttons:

  • Previous (ChevronLeft) - Jump to previous match
  • Next (ChevronRight) - Jump to next match
  • Cycles through all matches
  • Scrolls to and highlights current match
  • Disabled when no results

See Search & Replace for detailed usage.

Comments Panel​

Right column for collaboration and review:

Panel Layout​

Header:

  • "Comments" section title
  • Shows all comments for the document

Comment List:

  • Scrollable list of all comments
  • Each comment shows:
    • Creator name
    • Timestamp (relative time like "5 minutes ago")
    • Comment text (line-clamped to 2 lines)
    • Edit button (pencil icon)

Comment Interactions​

Click to Navigate:

  • Click any comment in the panel
  • Transcript scrolls to the commented section
  • Selected comment highlights with blue border
  • Commented text highlights in transcript

Add Comment:

  • Select text in the transcript
  • Click "Comment" in the formatting popup
  • Comment appears in the panel

Edit Comment:

  • Click edit button (pencil icon) on comment
  • Opens modal with comment text input
  • Save or delete the comment
  • Only your own comments can be edited

Delete Comment:

  • Click delete button in edit modal
  • Confirm deletion
  • Comment is removed permanently

See Comments & Review for detailed usage.

Audio/Video Player​

Floating Draggable Player​

Default Position:

  • Appears as a floating window on the left side of the screen
  • Shows video preview for video files
  • Shows audio thumbnail image for audio files
  • Size: 300x170 pixels

Dragging:

  • Click and hold anywhere on the player
  • Drag to reposition anywhere on screen
  • Release to drop in new location
  • Position persists during session

Player Display:

  • Black background with rounded corners
  • React Player component handles playback
  • Falls back to volume icon if media fails to load

Player Controls Bar (Bottom Fixed)​

Located at the bottom of the screen in a fixed position:

Play/Pause Button:

  • Toggle audio/video playback
  • Icon changes between Play and Pause
  • Keyboard: Space

Rewind Button:

  • Jump back 5 seconds
  • Icon: Undo2 (arrow left)
  • Keyboard: Ctrl + ArrowLeft

Forward Button:

  • Jump forward 5 seconds
  • Icon: Redo2 (arrow right)
  • Keyboard: Ctrl + ArrowRight

Timecode Button:

  • Opens timecode input dialog
  • Jump to specific time by entering timestamp
  • Icon: Clock

Playback Speed Selector:

  • Dropdown selector
  • Options: 0.5x, 0.75x, 1x, 1.25x, 1.5x, 2x
  • Keyboard: Ctrl + + to increase, Ctrl + - to decrease
  • Default: 1x (normal speed)

Current Time Display:

  • Shows current playback time
  • Format: MM:SS or HH:MM:SS
  • Animated appearance when displayed

Progress Slider:

  • Visual timeline of media (full width)
  • Drag to seek to any position
  • Click to jump to specific point
  • Shows as horizontal slider bar

See Audio/Video Playback for detailed usage.

Audio Waveform​

Visual representation of audio at the bottom of the editor (above player controls):

Waveform Display​

Appearance:

  • Horizontal waveform showing audio amplitude
  • Height: Approximately 70px for transcripts (110px for captions)
  • Full width of the editor (minus padding)

Availability:

  • Only displayed when session has media
  • Shows message "Waveform not available for this session" if no media

Visual Elements:

  • Waveform peaks - Tall peaks indicate loud audio (speech)
  • Valleys - Low amplitude indicates silence or pauses
  • Playback indicator - Vertical line showing current position

Waveform Interactions​

Click to Seek:

  • Click anywhere on the waveform
  • Audio jumps to that position
  • Transcript scrolls to corresponding text

Visual Navigation:

  • See where speech occurs in the audio timeline
  • Identify silent sections and pauses
  • Navigate to specific audio sections visually

Real-Time Updates:

  • Playback position indicator moves as audio plays
  • Synchronized with transcript highlighting

Keyboard Shortcuts Modal​

Access the complete list of keyboard shortcuts:

Opening the Modal​

Methods:

  • Click the Info button (i icon) in the toolbar

Two-Column Layout:

Left Column - General Functions:

  • Play / Pause - Space
  • Undo - Ctrl Z
  • Redo - Ctrl Y
  • Go to find / search - Ctrl F
  • Speed up play - Ctrl +
  • Slow down play - Ctrl -
  • Go back 5 seconds in time - Ctrl ArrowLeft
  • Go forward 5 seconds in time - Ctrl ArrowRight

Right Column - Edit Options:

  • Bold - Ctrl B
  • Italic - Ctrl I
  • Underline - Ctrl U
  • Strike - Ctrl S

Closing:

  • Click outside the modal
  • Press Esc
  • Click the close button

See Keyboard Shortcuts for the complete list.

Workflow Tips​

Efficient Layout Usage​

  • Use keyboard shortcuts for quick actions
  • Toggle search panel only when needed
  • Position floating player where it least obstructs text
  • Hide panels to maximize transcript space

Section-by-Section:

  1. Start at the beginning
  2. Read each utterance
  3. Click timestamp or word to listen
  4. Make corrections
  5. Move to next utterance

Targeted Review:

  1. Use search to find specific terms
  2. Add comments while skimming
  3. Return to comments to address issues
  4. Delete comments as you resolve them

Using Comments for Workflow:

  1. First pass: Add comments for all issues found
  2. Second pass: Address each comment systematically
  3. Delete comments as you fix them
  4. Track progress by comment count

Performance Optimization​

Large Transcripts:

  • Virtual scrolling (Virtuoso) handles documents with thousands of utterances
  • Smooth performance even with 2+ hour transcripts
  • Search and replace work efficiently on large files

Auto-Save:

  • Runs every 120 seconds (2 minutes) in background
  • Doesn't interrupt editing workflow
  • Manual save available if you want to save immediately
  • LocalStorage backup prevents data loss

Frequently Asked Questions​

Can I customize the interface layout?​

The floating audio/video player can be repositioned by dragging. The main column layout (search/transcript/comments) is fixed, but you can toggle the search panel on/off to adjust space.

How do I hide the waveform?​

The waveform automatically shows only when media is available. It cannot be manually hidden in the current implementation.

Can I change the font size?​

Use your browser's zoom function (Ctrl + + or Cmd + +) to increase the entire interface size, including text.

What happens if I close the browser while editing?​

Changes are auto-saved every 2 minutes. Additionally, a local backup is stored in your browser's localStorage for recovery. You'll see a prompt warning about unsaved changes if you try to leave the page.

Can I edit on mobile devices?​

Yes, the interface adapts for mobile/tablet with a responsive grid layout, though a larger screen is recommended for extended editing sessions.

How do I see the original audio file name?​

The filename is shown in the document info bar at the top (underlined text), and also appears in modal titles when exporting or translating.

Can I have multiple transcripts open at once?​

Yes, open multiple browser tabs/windows to work on different transcripts simultaneously.

What does "Finalized" mean?​

When a document is finalized, it becomes read-only. All editing controls are disabled to prevent accidental changes. You can toggle back to "Editable" mode to make changes again. Note that once a document is marked as finished on the server, it may not be possible to unfinish it.

How does auto-save work with the save status indicator?​

The save status shows four states: Unsaved (red), Saving (blue spinner), Saved Locally (yellow), and Synced (green). Auto-save runs every 2 minutes, and you'll see the status transition through these states automatically.

Next Steps​

Learn about specific editor features:

Get familiar with the interface! Spend a few minutes exploring each panel and control before diving into editing.