Preview and run real windows

Xcode previews render one view without launching the app. For layout work they cut the feedback loop from a full launch to about a second.

Here’s a preview for the empty state of our notes app:

#Preview("Empty") {
  ContentView()
    .environmentObject(NotesModel())
    .frame(width: 700, height: 450)
}

The frame matters on macOS. Without it the preview picks an arbitrary size, and you end up judging a Mac window layout in a phone-shaped canvas.

Preview realistic content

Add a second preview with data in it. The trick is a model you fill before handing it to the view:

#Preview("With notes") {
  let model = NotesModel()
  model.notes = [
    Note(id: UUID(), title: "Groceries", body: "Milk, eggs, coffee"),
    Note(id: UUID(), title: "Ideas", body: "A long body to check how text wraps in the detail area"),
  ]
  return ContentView()
    .environmentObject(model)
    .frame(width: 700, height: 450)
}

Build a small library of these. Empty, populated, one note with a very long title, and a dark mode variant with .preferredColorScheme(.dark).

Each preview encodes an assumption about your layout. When one breaks, you find out right away instead of during a demo.

Then run the real app

Previews lie by omission. A preview never opens a real window. It does not run your menu commands, does not restore window frames, does not ask for file permissions, and does not load saved state.

Cmd+R exercises all of that. So run the app, and do a short manual pass while it’s up:

• Resize the window down to its smallest useful size and watch what truncates.
• Open a second window with Cmd+N and change a note. Both windows should update, because they share one model.
• Tab through the controls to check keyboard focus.

Switch the system appearance to dark while the app runs, too. Hardcoded colors show up immediately.

Don’t trust a green preview

The mistake here is treating a working preview as proof the app works. I’ve seen a layout look perfect in previews and clip its toolbar in a real window, because the preview frame was taller than the size the window restored to.

Previews are one tool for one view. The running app is the truth. Use previews to move fast, then confirm in a real window before you call a layout done.