SwiftUI previews with #Preview and @Previewable

Modern platform Junior Swift 6.0+ iOS 17+ Reviewed By Alok Singh

Fill the blank

Fill the blank to declare state directly in the preview.

#Preview("Wi-Fi toggle") {
    ____ @State var isOn = true
    Toggle("Wi-Fi", isOn: $isOn)
        .padding()
}
Options
Hint 1 of 1

The macro's name mentions previews.

Choose an answer, then open Show answer below to check it.

Show answer

Answer: A @Previewable

Correct. It lets the preview own state without a wrapper view.

Why not the others?
  • B @Environment. Environment reads values; it doesn't declare state.
  • C @Bindable. Bindable is for @Observable objects, not state in previews.
  • D @MainActor. Isolation doesn't make state work in a preview.

30-second answer

Use the #Preview macro to declare previews, with names and traits such as .sizeThatFitsLayout or a landscape orientation. Mark state with @Previewable to declare it right inside the preview and pass bindings. Feed previews with injected mock data or an in-memory model container, so they're fast and never touch the network.

Practise saying it · 30 s. No recording, just a timer

Explain good previews.

Say your answer out loud, then check which of these points you covered:

  • #Preview
  • @Previewable
  • Mock data
  • Several states

Deep dive

Preview UIKit views and controllers with #Preview too.

PreviewModifier (iOS 18) shares setup like a model container across previews.

Several #Preview blocks can show different states.

Keep preview data in a Preview Content folder so it doesn't ship.

Common mistakes

  • Previews that call real services.
  • Wrapper views just to hold @State.

Senior take & follow-ups

Seniors keep previews fast and data-driven, covering several states.

Follow-up questions

Think of your answer first, then open the hint.

  1. How do you preview a binding?

    Show hint

    @Previewable @State inside #Preview.

  2. How do you share an in-memory database?

    Show hint

    A PreviewModifier or a static preview container.

Suggest a fix if something here is wrong or out of date.