Article

Creating Your App's Interface with SwiftUI

Develop apps in SwiftUI with an interactive preview that keeps the code and layout in sync.

Overview

If you choose the SwiftUI framework to develop your app, you can see an interactive preview as you lay out your user interface. Xcode keeps the changes you make to the source code, the user interface layout, and the inspector in sync. For example, when you edit attributes in the inspector, Xcode adds the corresponding code to the source file.

Display the SwiftUI Preview

To show the preview, select a file that uses SwiftUI in the project navigator, and choose Editor > Canvas. Then click the Resume button in the upper-right corner of the canvas to start the preview. Xcode builds and runs the code, displaying the results directly in the canvas.

Screenshot showing a SwiftUI file selected in the project navigator and preview displayed in the editor area.

Use the controls at the bottom of the preview to run the app on a simulated device in the canvas, with or without a debug session, or run the app on a connected device.

Add Views and Modifiers

To add views and modifiers to your app, click the Library button (+) in the toolbar to open the library, then drag user interface elements from the library to either the canvas or source code. Regardless of where you drop the elements, Xcode keeps the source code and the layout in sync.

Screenshot showing the library when a SwiftUI element is selected.

Edit User Interface Elements

Edit element attributes using either the Action menu or the inspector, or by entering code in the source editor. Command-click the element in the canvas or the structure in the code, choose Show SwiftUI Inspector from the Action menu, then change the attributes in the next pane. Alternatively, choose View > Inspectors > Show Attributes Inspector, and change the attributes in the Attributes inspector that appears on the right.

Screenshot showing the Action menu in the canvas with the Show Attributes Inspector menu item selected.

Embed User Interface Elements

Additionally, you can modify the user interface by embedding elements in other structures. Command-click an element in the source code or in the canvas, then choose an "Embed in [Generic Structure]" action from the pop-up menu. For example, choose "Embed in HStack" to embed an element that arranges a view's children in a horizontal line.

Screenshot showing the Action menu in the source editor with the Embed in HStack menu item selected.

To learn more about SwiftUI, go to Learn to Make Apps with SwiftUI.

See Also

Interface

Supporting Dark Mode in Your Interface

Update colors, images, and behaviors so that your app adapts automatically when Dark Mode is active.

Creating Custom Symbol Images for Your App

Create symbol images and expand on the icons provided by SF Symbols.