The SwiftUI Field Guidebeta

Welcome to the SwiftUI Field Guide

We built this website to visually explain how the SwiftUI layout system works, and we hope you find it useful. We welcome any feedback, positive or negative, so please send us an email if you have anything to share. We're planning to build out this site over the next few months, so if you want to stay updated, subscribe to our mailing list below.

Featured Topics

Safe Area

Safe Area

Learn how builtin views interact with the safe area and how to modify the safe area

Layout Protocol

Layout Protocol

Learn how to animate between layouts and write a custom layout.

Alignment

Alignment

Align views using builtin alignment guides, modify alignment guides and create custom alignment IDs.

Stacks

Stacks

Learn about how stacks distribute available space and align their children.

Changelog

Apr 5, 2024

ZStack

We added a new page about ZStacks (and how they compare to overlay and background).

Mar 18, 2024

Safe Area

We added a new page about the safe area and how to use it in SwiftUI.

Mar 1, 2024

Introduction

We finally added an introduction to the layout system, as well as a page with useful debugging techniques.

Feb 26, 2024

Custom Alignment IDs

We show how custom alignment IDs help us align views that do not have a direct common parent.

Feb 22, 2024

Flow Layout

We show how to build a flow layout using the Layout protocol, with annotated example code.

Feb 19, 2024

Stack Alignment

We added an example showing alignment within an HStack. The width distribution visualizations now also have sliders.

Feb 16, 2024

Custom Shapes

We added a section about custom shapes and stroke styles.

Feb 15, 2024

Hello, world!

We're live now, welcome to the first public release. Keep an eye on this page to see future changes.