Sign In

Cross-Platform SwiftUI Layout Builder

Visually build UI layouts and instantly export exact Flexbox, Stack, or Row/Column code for SwiftUI.

Cross-Platform Layout Builder

Preview Canvas
1
2
3
// Main Axis alignment (justify-content) in SwiftUI is managed
// by inserting Spacer() views between your children.
HStack(alignment: .center, spacing: 16) {
  // children
}

Container Properties

16px

Child Items

Number of items
3

The Ultimate SwiftUI Layout Generator

Building responsive UI layouts is the foundation of front-end development. While the CSS Flexbox model has become the industry standard for aligning and distributing space among items in a container, native mobile SDKs implement these concepts using entirely different syntax and paradigms. This generator lets you build your layout visually and automatically translates your configuration into exact SwiftUI code.

Layout in SwiftUI

SwiftUI abstracts layout into highly declarative Stack views: HStack (horizontal/row), VStack (vertical/column), and ZStack (depth). SwiftUI handles layout distribution very differently from Flexbox. While the cross-axis alignment is handled by the alignment parameter on the Stack itself, main-axis distribution (like space-between) is achieved by placing Spacer() views among your children to dynamically consume empty space.

Related Tools