Three Column Editors in SwiftUI on macOS

In this post, we will learn how to create a customizable three-column editor layout in SwiftUI for macOS, similar to those found in productivity apps like Xcode, Figma, Keynote, and Sketch. Although SwiftUI’s NavigationSplitView supports a three-column mode, it doesn’t quite fit the needs of a three-column editor style UI. We will explore how to set up the layout using NavigationSplitView and HSplitView to achieve the desired outcome. A typical three-column layout consists of a Navigator for selecting objects or entities, a Canvas for displaying the current state of a project, and an Inspector for viewing more details and changing specific values of the selected item....

March 30, 2023 · Me