SwiftUI #Previews: How to populate with data

Question

Created Jun ’25

Replies 4

Boosts 0

Participants 4

Suppose you have a view:

struct Library: View {
    @State var books = []
    var body: some View {
          VStack {
             ...

            Button("add Book") {
                 ....
           }
       
    }
}

Such that Library view holds a Book array that gets populated internally via a button that opens a modal – or something alike.

How can I use #Peviews to preview Library with a pre-populated collection? Suppose I have a static books – dummy – array in my code just for that; still, what's the best way to use that to preview the Library view?

Answered by dan101 in 856930022

This is really a more idiomatic way:

struct BookProvider: PreviewModifier {
    static func makeSharedContext() async -> [Book] {
        let url = Bundle.main.url(forResource: "Curs confirmare RO", withExtension: "pdf")!
        
        return await withTaskGroup { tg in
            for _ in 0..<10 {
                tg.addTask {
                    return await createBook(for: url, of: CGSize(width: 200, height: 200), scale: 4.0)
                }
            }
            var books: [Book] = []
            for await result in tg {
                    books.append(result)
            }
            return books
        }
    }
    
    
    func body(content: Content, context: [Book]) -> some View {
        ContentView(books: context)
    }
}



#Preview(traits: .modifier(BookProvider())) {
    ContentView()
}

Boost

Answer 1

Claude31 OP

Jun ’25

You do not show what books are. I suppose they are an array of some struct Book.

Not sure I fully understand your question.

But you can pass a books array to the Preview:

#Preview {
    Library(books: [populate an array of Book])
}

0

Answer 2

ArsD OP

Jun ’25

struct Book: Hashable {
    let name: String
    
    static let preview = [
        Book(name: "1"),
        Book(name: "2"),
        Book(name: "3")
    ]
}

struct Library: View {
    @State var books: [Book] = []
    @State private var isShowingSheet = false
    
    var body: some View {
        VStack {
            
            ForEach(books, id: \.self) { book in
                Text(book.name)
            }
            
            Button("add Book") {
                isShowingSheet = true
            }
        }
        .sheet(isPresented: $isShowingSheet) {
            Button("Add Book") {
                books.append(Book(name: "example"))
            }
        }
    }
}

#Preview {
    Library(books: Book.preview)
}

That works

0

Answer 3

DTS Engineer OP

Apple

Jun ’25

You might also want to checkout Previewing your app’s interface in Xcode for examples on how to make complex objects reusable with a preview modifier

0

Answer 4

dan101 OP

Sep ’25

Accepted Answer

This is really a more idiomatic way:

struct BookProvider: PreviewModifier {
    static func makeSharedContext() async -> [Book] {
        let url = Bundle.main.url(forResource: "Curs confirmare RO", withExtension: "pdf")!
        
        return await withTaskGroup { tg in
            for _ in 0..<10 {
                tg.addTask {
                    return await createBook(for: url, of: CGSize(width: 200, height: 200), scale: 4.0)
                }
            }
            var books: [Book] = []
            for await result in tg {
                    books.append(result)
            }
            return books
        }
    }
    
    
    func body(content: Content, context: [Book]) -> some View {
        ContentView(books: context)
    }
}



#Preview(traits: .modifier(BookProvider())) {
    ContentView()
}

0