# Palmier Pro Frontend Codebase Structure: SwiftUI and AppKit Architecture Explained

> Explore the Palmier Pro frontend codebase structure. Discover how SwiftUI and AppKit architecture are organized into modular feature groups for efficient development.

- Repository: [Palmier/palmier-pro](https://github.com/palmier-io/palmier-pro)
- Tags: architecture
- Published: 2026-06-21

---

**The Palmier Pro frontend codebase is organized under `Sources/PalmierPro` into modular feature groups like `UI`, `Timeline`, and `MediaPanel`, using SwiftUI for the interface and AppKit for complex drag-and-drop interactions.**

Palmier Pro is a macOS-only video editor built on **Swift 6.2** that demonstrates a clean separation of concerns in its frontend architecture. According to the palmier-io/palmier-pro repository, the structure of the frontend codebase follows a feature-based organization where each major screen operates as a self-contained module. This architecture leverages SwiftUI for declarative UI while falling back to AppKit when low-level interaction control is required.

## Top-Level Directory Organization

The frontend source resides entirely within the `Sources/PalmierPro` package, subdivided into logical feature domains. Each folder represents a distinct functional area, importing only the utilities it requires to maintain fast compile times and testability.

### Core Feature Groups

- **UI** – Houses the design system ([`AppTheme.swift`](https://github.com/palmier-io/palmier-pro/blob/main/AppTheme.swift)) and reusable widgets like [`CapsuleButton.swift`](https://github.com/palmier-io/palmier-pro/blob/main/CapsuleButton.swift), defining all colors, spacing, typography, and shadows.
- **Timeline** – Contains [`TimelineView.swift`](https://github.com/palmier-io/palmier-pro/blob/main/TimelineView.swift) for the editable timeline interface and [`SnapEngine.swift`](https://github.com/palmier-io/palmier-pro/blob/main/SnapEngine.swift) for playhead snapping logic.
- **MediaPanel** – Manages the asset browser through [`MediaPanelView.swift`](https://github.com/palmier-io/palmier-pro/blob/main/MediaPanelView.swift) and handles complex drag-and-drop via [`MediaPanelDropArea.swift`](https://github.com/palmier-io/palmier-pro/blob/main/MediaPanelDropArea.swift).
- **Inspector** – Provides property panels for selected clips via [`InspectorView.swift`](https://github.com/palmier-io/palmier-pro/blob/main/InspectorView.swift).
- **Preview** – Wraps the video engine in [`PreviewView.swift`](https://github.com/palmier-io/palmier-pro/blob/main/PreviewView.swift) and manages GPU-accelerated rendering through [`VideoEngine.swift`](https://github.com/palmier-io/palmier-pro/blob/main/VideoEngine.swift).
- **Editor** – Orchestrates the main window via [`EditorWindowController.swift`](https://github.com/palmier-io/palmier-pro/blob/main/EditorWindowController.swift) and toolbar components.
- **Generation** – Isolates AI-specific UI components like [`GenerationView.swift`](https://github.com/palmier-io/palmier-pro/blob/main/GenerationView.swift) for prompt entry and reference tiles.
- **Search** – Coordinates visual search functionality through [`SearchIndexCoordinator.swift`](https://github.com/palmier-io/palmier-pro/blob/main/SearchIndexCoordinator.swift).
- **Settings** – Implements preference panes via [`SettingsView.swift`](https://github.com/palmier-io/palmier-pro/blob/main/SettingsView.swift).
- **Utilities** – Shared helpers including [`TimeFormatting.swift`](https://github.com/palmier-io/palmier-pro/blob/main/TimeFormatting.swift) for timestamp formatting.

## SwiftUI-First Architecture with AppKit Fallbacks

The frontend codebase adopts a **SwiftUI-first** approach for declarative interface construction, but strategically uses **AppKit** where SwiftUI’s limitations would compromise functionality. This hybrid pattern is most evident in drag-and-drop handling, where nested drop targets would otherwise conflict.

### Design System Implementation

All visual constants live in [`UI/AppTheme.swift`](https://github.com/palmier-io/palmier-pro/blob/main/UI/AppTheme.swift), ensuring consistency across the application. Views reference this central theme rather than hardcoding values.

```swift
struct ExampleButton: View {
    var body: some View {
        Button("Press me") {
            // Action
        }
        .padding(AppTheme.Spacing.md)
        .background(AppTheme.Background.raisedColor)
        .foregroundColor(AppTheme.Text.primaryColor)
        .cornerRadius(AppTheme.Radius.sm)
        .shadow(AppTheme.Shadow.sm)
    }
}

```

### AppKit Integration for Complex Interactions

When `TimelineView` or `MediaPanel` require sophisticated drag-and-drop behavior, the codebase implements `NSDraggingDestination` directly. In [`MediaPanel/MediaTab/MediaPanelDropArea.swift`](https://github.com/palmier-io/palmier-pro/blob/main/MediaPanel/MediaTab/MediaPanelDropArea.swift), an AppKit view handles the drop operation to avoid SwiftUI `.onDrop` conflicts.

```swift
class MediaDropArea: NSView, NSDraggingDestination {
    override init(frame frameRect: NSRect) {
        super.init(frame: frameRect)
        registerForDraggedTypes([.fileURL])
    }

    required init?(coder: NSCoder) { fatalError() }

    func draggingEntered(_ sender: NSDraggingInfo) -> NSDragOperation {
        .copy
    }

    func performDragOperation(_ sender: NSDraggingInfo) -> Bool {
        // Handle dropped media assets
        true
    }
}

```

## Key Frontend Modules Explained

### Timeline and Snapping Engine

The `Timeline` directory implements the core editing interface. [`TimelineView.swift`](https://github.com/palmier-io/palmier-pro/blob/main/TimelineView.swift) renders the ruler, clips, and playhead overlay, while [`SnapEngine.swift`](https://github.com/palmier-io/palmier-pro/blob/main/SnapEngine.swift) provides the snapping algorithm used to align clips to the grid.

```swift
struct SnapEngine {
    let gridInterval: Double = 0.1   // seconds

    func snap(_ time: Double) -> Double {
        (time / gridInterval).rounded() * gridInterval
    }
}

```

### Media Panel and Drag-and-Drop

[`MediaPanelView.swift`](https://github.com/palmier-io/palmier-pro/blob/main/MediaPanelView.swift) serves as the container for Media, Music, and Captions tabs. The drag-and-drop implementation in [`MediaPanelDropArea.swift`](https://github.com/palmier-io/palmier-pro/blob/main/MediaPanelDropArea.swift) bridges the gap between SwiftUI’s limitations and macOS’s native dragging requirements.

### Preview and Video Engine

The `Preview` module builds a GPU-accelerated rendering pipeline using AVFoundation and Metal. [`PreviewView.swift`](https://github.com/palmier-io/palmier-pro/blob/main/PreviewView.swift) embeds this engine into SwiftUI, while [`VideoEngine.swift`](https://github.com/palmier-io/palmier-pro/blob/main/VideoEngine.swift) manages the underlying playback and compositing logic.

### Inspector and Settings

[`InspectorView.swift`](https://github.com/palmier-io/palmier-pro/blob/main/InspectorView.swift) provides property editing for selected clips and keyframes, functioning as the right-side panel in the editor. [`SettingsView.swift`](https://github.com/palmier-io/palmier-pro/blob/main/SettingsView.swift) handles the application preferences including Account, Agent, and Notifications panes.

### AI Generation and Search

The `Generation` folder isolates AI-specific UI components, with [`GenerationView.swift`](https://github.com/palmier-io/palmier-pro/blob/main/GenerationView.swift) handling prompt entry and reference tile display. The `Search` module coordinates visual search indexing through [`SearchIndexCoordinator.swift`](https://github.com/palmier-io/palmier-pro/blob/main/SearchIndexCoordinator.swift).

## Summary

- **Modular Organization**: The frontend codebase structure separates concerns into `Sources/PalmierPro` subdirectories like `Timeline`, `MediaPanel`, and `Inspector`, each acting as independent SwiftUI modules.
- **Hybrid UI Stack**: SwiftUI drives the declarative interface, but AppKit handles complex drag-and-drop in files like [`MediaPanelDropArea.swift`](https://github.com/palmier-io/palmier-pro/blob/main/MediaPanelDropArea.swift).
- **Centralized Design System**: [`UI/AppTheme.swift`](https://github.com/palmier-io/palmier-pro/blob/main/UI/AppTheme.swift) contains all visual constants, ensuring consistency across the [`CapsuleButton.swift`](https://github.com/palmier-io/palmier-pro/blob/main/CapsuleButton.swift), [`ToolbarView.swift`](https://github.com/palmier-io/palmier-pro/blob/main/ToolbarView.swift), and other widgets.
- **Performance Optimization**: The `Preview` module uses [`VideoEngine.swift`](https://github.com/palmier-io/palmier-pro/blob/main/VideoEngine.swift) for GPU-accelerated rendering while exposing a SwiftUI-friendly [`PreviewView.swift`](https://github.com/palmier-io/palmier-pro/blob/main/PreviewView.swift) interface.
- **Clean Separation**: AI generation UI lives in `Generation/UI`, keeping prompts and reference tiles isolated from core editing components.

## Frequently Asked Questions

### What UI framework does Palmier Pro use?

Palmier Pro uses **SwiftUI** as its primary framework for building the macOS interface, with **AppKit** used selectively for low-level interactions that require `NSDraggingDestination` handling. This hybrid approach is implemented in `Sources/PalmierPro` files like [`MediaPanelDropArea.swift`](https://github.com/palmier-io/palmier-pro/blob/main/MediaPanelDropArea.swift) to overcome SwiftUI’s drag-and-drop limitations.

### Where is the drag-and-drop logic implemented?

The drag-and-drop logic resides in [`MediaPanel/MediaPanelDropArea.swift`](https://github.com/palmier-io/palmier-pro/blob/main/MediaPanel/MediaPanelDropArea.swift) within the `Sources/PalmierPro` directory. This file implements `NSDraggingDestination` directly to handle nested drop targets, which would conflict with SwiftUI’s native `.onDrop` modifier in the complex timeline and media browser contexts.

### How does Palmier Pro handle video preview rendering?

Video preview rendering is handled by the `Preview` module, where [`PreviewView.swift`](https://github.com/palmier-io/palmier-pro/blob/main/PreviewView.swift) provides the SwiftUI interface and [`VideoEngine.swift`](https://github.com/palmier-io/palmier-pro/blob/main/VideoEngine.swift) manages the AVFoundation and Metal pipeline. This architecture keeps the GPU-accelerated rendering logic separate from the UI presentation layer while maintaining real-time performance.

### Is the frontend codebase modular?

Yes, the frontend codebase is highly modular, with each major feature (Timeline, Inspector, MediaPanel) operating as a self-contained SwiftUI module under `Sources/PalmierPro`. This structure minimizes cross-dependencies, reduces compile times, and allows individual components to be tested in isolation.