---
title: "iPadVideoEditor"
platform: ios
slug: ipad-video-editor-timeline-productivity-ios
screens: ["media-player", "dashboard"]
domains: ["productivity"]
style: "minimal"
fonts: ["SF Pro"]
roles: ["toolbar", "button", "sidebar", "segmented-control", "gallery"]
score: {clean: 100, consistent: 68, accessible: 46, comprehensible: 24}
url: https://gui.farm/ios/ipad-video-editor-timeline-productivity-ios
raw: https://gui.farm/ios/ipad-video-editor-timeline-productivity-ios/design.guix
download: https://gui.farm/ios/ipad-video-editor-timeline-productivity-ios.gui
---

# iPadVideoEditor

An iPad video editor interface with timeline, preview and editing tools.

- **Live preview:** https://gui.farm/ios/ipad-video-editor-timeline-productivity-ios
- **Raw source:** https://gui.farm/ios/ipad-video-editor-timeline-productivity-ios/design.guix
- **Download (.gui):** https://gui.farm/ios/ipad-video-editor-timeline-productivity-ios.gui

## Source (design.guix)

```xml
<gui version="0.2" name="iPadVideoEditor">
  <tokens>
    <color name="bg-dark" value="#09090B" />
    <color name="surface-dark" value="#18181B" />
    <color name="surface-dark-2" value="#27272A" />
    <color name="text-primary" value="#FAFAFA" />
    <color name="text-secondary" value="#A1A1AA" />
    <color name="border-dark" value="#27272A" />
    <color name="primary-accent" value="#8B5CF6" />
    <color name="primary-accent-light" value="#A78BFA" />
    <color name="timeline-bg" value="#0F0F13" />
    <color name="playhead-red" value="#EF4444" />
  </tokens>
  
  <styles>
    <text-style name="Title/Project" font-family="SF Pro" font-size="16" font-weight="600" line-height="22" />
    <text-style name="Title/Section" font-family="SF Pro" font-size="14" font-weight="600" line-height="20" />
    <text-style name="Text/Timecode" font-family="SF Pro" font-size="14" font-weight="500" line-height="18" />
    <text-style name="Text/Caption" font-family="SF Pro" font-size="12" font-weight="500" line-height="16" />
    <text-style name="Text/Tiny" font-family="SF Pro" font-size="10" font-weight="400" line-height="14" />
  </styles>

  <fonts>
    <font family="SF Pro" source="system" weights="400 500 600 700" styles="normal" />
    <font family="Inter" source="google" weights="400 500 600 700" styles="normal" />
  </fonts>

  <frame w="1194" h="834" fill="$bg-dark" clip name="iPad Video Editor Canvas">
    <!-- 1. Top Control Bar -->
    <row role="toolbar" x="0" y="0" w="fill" h="60" fill="$surface-dark" border-bottom="1 $border-dark" align="middle-left" p="0 24" gap="auto" name="Top Control Bar">
      <!-- Left: Navigation and Project Info -->
      <row gap="16" align="middle-left" name="Project Details Info Group">
        <img src="https://api.iconify.design/lucide/arrow-left.svg?color=%23fafafa" w="20" h="20" />
        <text value="Alps Expedition 2026" text-style="Title/Project" color="$text-primary" />
        <row gap="6" align="middle-left" name="Save Status Indicator">
          <ellipse fill="#34C759" w="6" h="6" />
          <text value="Saved to iCloud" font-family="SF Pro" font-size="12" color="$text-secondary" />
        </row>
      </row>

      <!-- Center: Playback Controls and Timecode -->
      <row gap="20" align="middle-center" name="Playback Control Console">
        <img src="https://api.iconify.design/lucide/skip-back.svg?color=%23a1a1aa" w="20" h="20" />
        <img src="https://api.iconify.design/lucide/play.svg?color=%23fafafa" w="24" h="24" />
        <img src="https://api.iconify.design/lucide/skip-forward.svg?color=%23a1a1aa" w="20" h="20" />
        <row fill="$bg-dark" p="4 12" radius="6" align="middle-center" border="1 $border-dark" name="Timecode Field">
          <text value="00:12:08" font-family="SF Pro" font-size="14" font-weight="700" color="$primary-accent-light" />
        </row>
      </row>

      <!-- Right: Action Commands and Export -->
      <row gap="16" align="middle-right" name="Right Actions Group">
        <row gap="12" align="middle-right" name="Undo Redo Controls">
          <img src="https://api.iconify.design/lucide/undo-2.svg?color=%23a1a1aa" w="20" h="20" />
          <img src="https://api.iconify.design/lucide/redo-2.svg?color=%23a1a1aa" w="20" h="20" />
        </row>
        <rect w="1" h="20" fill="$border-dark" name="Divider Line" />
        <row role="button" fill="linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%)" p="8 20" radius="999" align="middle-center" gap="6" name="Export Project CTA">
          <img src="https://api.iconify.design/lucide/share-2.svg?color=%23ffffff" w="16" h="16" />
          <text value="Export" font-family="SF Pro" font-size="14" font-weight="600" color="#FFFFFF" />
        </row>
      </row>
    </row>

    <!-- 2. Split Workspace Layout -->
    <grid cols="340 1fr" gap="20" x="20" y="80" w="1154" h="470" name="Split Media Workspace">
      <!-- Left Panel: Progressive Media Library -->
      <col role="sidebar" fill="$surface-dark" border="1 $border-dark" radius="12" p="16" gap="16" h="fill" name="Media Bin Panel">
        <!-- Sidebar Segment Tabs (Structured Identically for Perfect Text Alignment) -->
        <row role="segmented-control" w="fill" gap="16" align="middle-left" pb="12" border-bottom="1 $border-dark" name="Media Library Navigation Bar">
          <col gap="4" align="middle-center" name="Media Tab Header Item">
            <text value="Media" font-family="SF Pro" font-size="14" font-weight="600" color="$primary-accent-light" />
            <rect fill="$primary-accent" w="16" h="2" radius="1" />
          </col>
          <col gap="4" align="middle-center" name="Audio Tab Header Item">
            <text value="Audio" font-family="SF Pro" font-size="14" font-weight="600" color="$text-secondary" />
            <rect fill="none" w="16" h="2" />
          </col>
          <col gap="4" align="middle-center" name="Titles Tab Header Item">
            <text value="Titles" font-family="SF Pro" font-size="14" font-weight="600" color="$text-secondary" />
            <rect fill="none" w="16" h="2" />
          </col>
        </row>

        <!-- Dynamic Grid of Media items (Using Local Assets) -->
        <grid role="gallery" cols="2" gap="12" w="fill" name="Clips Grid">
          <!-- Clip 1 Thumbnail (Mountain Sunrise) -->
          <frame w="142" h="90" radius="8" clip name="Mountain Peak Clip Preview">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ff7c9675-c233-4df0-bff8-c6c2e4a9e046/video_preview.png" w="142" h="90" fit="cover" />
            <row fill="#00000080" p="2 6" radius="4" abs x="94" y="66" align="middle-center">
              <text value="0:14" font-family="SF Pro" font-size="10" font-weight="600" color="#FFFFFF" />
            </row>
          </frame>

          <!-- Clip 2 Thumbnail (Meadow Forest) -->
          <frame w="142" h="90" radius="8" clip name="Green Fields Clip Preview">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ff7c9675-c233-4df0-bff8-c6c2e4a9e046/clip_1.png" w="142" h="90" fit="cover" />
            <row fill="#00000080" p="2 6" radius="4" abs x="94" y="66" align="middle-center">
              <text value="0:28" font-family="SF Pro" font-size="10" font-weight="600" color="#FFFFFF" />
            </row>
          </frame>

          <!-- Clip 3 Thumbnail (Sunset Lake) -->
          <frame w="142" h="90" radius="8" clip name="Sunset View Clip Preview">
            <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ff7c9675-c233-4df0-bff8-c6c2e4a9e046/clip_2.png" w="142" h="90" fit="cover" />
            <row fill="#00000080" p="2 6" radius="4" abs x="94" y="66" align="middle-center">
              <text value="0:10" font-family="SF Pro" font-size="10" font-weight="600" color="#FFFFFF" />
            </row>
          </frame>

          <!-- Clip 4: Import CTA (Clutter-free addition button) -->
          <col role="button" fill="$surface-dark-2" border="1 $border-dark" radius="8" align="middle-center" gap="6" w="142" h="90" name="Import File Button">
            <img src="https://api.iconify.design/lucide/plus.svg?color=%23a1a1aa" w="24" h="24" />
            <text value="Import File" font-family="SF Pro" font-size="11" font-weight="600" color="$text-secondary" />
          </col>
        </grid>
      </col>

      <!-- Right Panel: High-Contrast Video Preview Monitor -->
      <col fill="$surface-dark" border="1 $border-dark" radius="12" p="16" gap="12" h="fill" name="Video Preview Monitor">
        <!-- 16:9 Display Canvas Container -->
        <frame w="762" h="390" radius="8" clip name="Video Screen Box">
          <!-- Active Preview Frame -->
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ff7c9675-c233-4df0-bff8-c6c2e4a9e046/video_preview.png" w="762" h="390" x="0" y="0" fit="cover" name="Active Video Frame Content" />
          
          <!-- Top Left Controls Overlay: Zoom -->
          <row fill="#00000080" p="6 12" radius="16" abs x="16" y="16" gap="8" align="middle-center" name="Zoom Level Indicator">
            <text value="Fit (44%)" font-family="SF Pro" font-size="12" font-weight="600" color="#FFFFFF" />
            <img src="https://api.iconify.design/lucide/chevron-down.svg?color=%23ffffff" w="12" h="12" />
          </row>

          <!-- Top Right Controls Overlay: Aspect Ratio/Grid -->
          <row fill="#00000080" p="6" radius="16" abs x="714" y="16" align="middle-center" name="Aspect Grid Toggle">
            <img src="https://api.iconify.design/lucide/grid.svg?color=%23ffffff" w="16" h="16" />
          </row>

          <!-- Bottom Left Overlay: Resolution settings -->
          <row fill="#00000080" p="6 12" radius="16" abs x="16" y="346" gap="12" align="middle-center" name="Resolution Indicator">
            <text value="1080p • 24 fps" font-family="SF Pro" font-size="12" font-weight="600" color="#FFFFFF" />
          </row>

          <!-- Bottom Right Overlay: Fullscreen -->
          <row fill="#00000080" p="6" radius="16" abs x="714" y="346" align="middle-center" name="Fullscreen Toggle Button">
            <img src="https://api.iconify.design/lucide/maximize-2.svg?color=%23ffffff" w="16" h="16" />
          </row>

          <!-- Right Edge Overlay: Audio VU Meter (Legible Volume bars) -->
          <col fill="#00000080" w="16" h="140" abs x="686" y="125" radius="8" p="4 2" gap="4" align="bottom-center" name="Audio Level Meter Overlay">
            <rect fill="#EF4444" w="8" h="10" radius="2" name="VU Red bar" />
            <rect fill="#F59E0B" w="8" h="25" radius="2" name="VU Orange bar" />
            <rect fill="#10B981" w="8" h="40" radius="2" name="VU Green bar 2" />
            <rect fill="#10B981" w="8" h="30" radius="2" name="VU Green bar 1" />
          </col>
        </frame>

        <!-- Preview Monitor Metadata Info Row -->
        <row w="fill" gap="auto" align="middle-center" name="Preview Metadata Info Bar">
          <text value="Cinematic Preview Monitor" font-family="SF Pro" font-size="12" font-weight="600" color="$text-secondary" />
          <row gap="6" align="middle-right" name="Timeline Clock Duration">
            <img src="https://api.iconify.design/lucide/clock.svg?color=%23a1a1aa" w="14" h="14" />
            <text value="Total duration: 01:05:00" font-family="SF Pro" font-size="12" font-weight="500" color="$text-secondary" />
          </row>
        </row>
      </col>
    </grid>

    <!-- 3. Bottom Magnetic Timeline Container -->
    <frame x="20" y="570" w="1154" h="244" fill="$timeline-bg" border="1 $border-dark" radius="12" clip name="Timeline Tracks Workspace">
      <!-- Time Ruler Tiks -->
      <row x="0" y="0" w="fill" h="30" fill="$surface-dark" border-bottom="1 $border-dark" align="middle-left" p="0 16" gap="auto" name="Time Ruler ticks">
        <text value="00:00" font-family="SF Pro" font-size="10" font-weight="600" color="$text-secondary" />
        <text value="00:10" font-family="SF Pro" font-size="10" font-weight="600" color="$text-secondary" />
        <text value="00:20" font-family="SF Pro" font-size="10" font-weight="600" color="$text-secondary" />
        <text value="00:30" font-family="SF Pro" font-size="10" font-weight="600" color="$text-secondary" />
        <text value="00:40" font-family="SF Pro" font-size="10" font-weight="600" color="$text-secondary" />
        <text value="00:50" font-family="SF Pro" font-size="10" font-weight="600" color="$text-secondary" />
        <text value="01:00" font-family="SF Pro" font-size="10" font-weight="600" color="$text-secondary" />
      </row>

      <!-- Video Tracks Row (Magnetic Video Strips using Local Assets) -->
      <row x="16" y="46" w="fill" h="84" gap="0" align="middle-left" name="Video Track Layer">
        <!-- Video Clip 1 (Selected Highlight) -->
        <frame w="220" h="76" radius="6" clip border="1 $border-dark" name="Selected Timeline Clip">
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ff7c9675-c233-4df0-bff8-c6c2e4a9e046/video_preview.png" w="220" h="76" fit="cover" />
          <rect fill="none" border="3 $primary-accent" w="220" h="76" radius="6" name="Selection Outline" />
          <row fill="#00000080" p="2 6" radius="4" abs x="8" y="50" align="middle-center" name="Clip Title tag">
            <text value="Alps Peak" font-family="SF Pro" font-size="10" font-weight="600" color="#FFFFFF" />
          </row>
        </frame>

        <!-- Crossfade Transition Icon -->
        <row w="36" h="76" align="middle-center" name="Transition Node 1">
          <row w="20" h="20" radius="10" fill="$primary-accent" border="1 #FFFFFF5C" align="middle-center">
            <img src="https://api.iconify.design/lucide/hourglass.svg?color=%23ffffff" w="12" h="12" />
          </row>
        </row>

        <!-- Video Clip 2 -->
        <frame w="340" h="76" radius="6" clip border="1 $border-dark" name="Meadows Clip Timeline Item">
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ff7c9675-c233-4df0-bff8-c6c2e4a9e046/clip_1.png" w="340" h="76" fit="cover" />
          <row fill="#00000080" p="2 6" radius="4" abs x="8" y="50" align="middle-center" name="Clip Title tag 2">
            <text value="Green Meadows" font-family="SF Pro" font-size="10" font-weight="600" color="#FFFFFF" />
          </row>
        </frame>

        <!-- Add Transition Node Button -->
        <row role="button" w="36" h="76" align="middle-center" name="Transition Node 2 Add Button">
          <row w="20" h="20" radius="10" fill="$surface-dark-2" border="1 $border-dark" align="middle-center">
            <img src="https://api.iconify.design/lucide/plus.svg?color=%23a1a1aa" w="12" h="12" />
          </row>
        </row>

        <!-- Video Clip 3 -->
        <frame w="180" h="76" radius="6" clip border="1 $border-dark" name="Valley Clip Timeline Item">
          <img src="https://hmzbyvrxpbsnjjkukjbi.supabase.co/storage/v1/object/public/assets/ff7c9675-c233-4df0-bff8-c6c2e4a9e046/clip_2.png" w="180" h="76" fit="cover" />
          <row fill="#00000080" p="2 6" radius="4" abs x="8" y="50" align="middle-center" name="Clip Title tag 3">
            <text value="Sunset Valley" font-family="SF Pro" font-size="10" font-weight="600" color="#FFFFFF" />
          </row>
        </frame>
      </row>

      <!-- Audio Track Container (Music and Sound Waveforms) -->
      <frame x="16" y="146" w="1122" h="54" radius="6" fill="$surface-dark" border="1 $border-dark" name="Audio track layer">
        <!-- Audio icon indicator -->
        <row x="8" y="17" w="20" h="20" align="middle-center" name="Audio File Icon Badge">
          <img src="https://api.iconify.design/lucide/music.svg?color=%238b5cf6" w="16" h="16" />
        </row>
        
        <!-- Audio track name -->
        <text value="Cinematic_Ambient.mp3" font-family="SF Pro" font-size="11" font-weight="600" color="$primary-accent-light" x="36" y="18" name="Audio Title" />

        <!-- Vertical Peak Waveform Audio Bars -->
        <row x="220" y="17" w="886" h="20" gap="4" align="middle-left" name="Audio Waveform Visualization Strip">
          <rect fill="$primary-accent" w="3" h="12" radius="1" />
          <rect fill="$primary-accent" w="3" h="8" radius="1" />
          <rect fill="$primary-accent" w="3" h="16" radius="1" />
          <rect fill="$primary-accent" w="3" h="6" radius="1" />
          <rect fill="$primary-accent" w="3" h="18" radius="1" />
          <rect fill="$primary-accent" w="3" h="10" radius="1" />
          <rect fill="$primary-accent" w="3" h="14" radius="1" />
          <rect fill="$primary-accent" w="3" h="8" radius="1" />
          <rect fill="$primary-accent" w="3" h="12" radius="1" />
          <rect fill="$primary-accent" w="3" h="14" radius="1" />
          <rect fill="$primary-accent" w="3" h="8" radius="1" />
          <rect fill="$primary-accent" w="3" h="16" radius="1" />
          <rect fill="$primary-accent" w="3" h="6" radius="1" />
          <rect fill="$primary-accent" w="3" h="18" radius="1" />
          <rect fill="$primary-accent" w="3" h="10" radius="1" />
          <rect fill="$primary-accent" w="3" h="12" radius="1" />
          <rect fill="$primary-accent" w="3" h="6" radius="1" />
          <rect fill="$primary-accent" w="3" h="14" radius="1" />
          <rect fill="$primary-accent" w="3" h="8" radius="1" />
          <rect fill="$primary-accent" w="3" h="16" radius="1" />
          <rect fill="$primary-accent" w="3" h="10" radius="1" />
          <rect fill="$primary-accent" w="3" h="4" radius="1" />
          <rect fill="$primary-accent" w="3" h="12" radius="1" />
          <rect fill="$primary-accent" w="3" h="6" radius="1" />
          <rect fill="$primary-accent" w="3" h="14" radius="1" />
          <rect fill="$primary-accent" w="3" h="8" radius="1" />
          <rect fill="$primary-accent" w="3" h="18" radius="1" />
          <rect fill="$primary-accent" w="3" h="10" radius="1" />
          <rect fill="$primary-accent" w="3" h="4" radius="1" />
          <rect fill="$primary-accent" w="3" h="12" radius="1" />
        </row>
      </frame>

      <!-- 4. Floating Playhead Needle Overlay -->
      <frame x="280" y="0" w="20" h="244" name="Floating Playhead Line Component">
        <rect fill="$playhead-red" w="2" h="244" x="9" y="0" name="Playhead line" />
        <frame x="3" y="2" w="14" h="20" name="Playhead Cap teardrop">
          <ellipse fill="$playhead-red" w="14" h="14" border="2 #FFFFFF" name="Cap circle" />
        </frame>
      </frame>
    </frame>
  </frame>
</gui>

```