ElementPreview

@available(iOS 13.0, *)
public struct ElementPreview : View

A SwiftUI view which wraps a Blueprint element, which can be used to preview Blueprint elements via Xcode’s preview functionality (enable via the Editor > Canvas menu).

You can leverage ElementPreview by adding something like this to the bottom of the file which contains your Blueprint element, then as you edit and work on your element, the live preview will update to show the current state of your element:


struct MyElement : Element {
   ...
}

// Add this at the bottom of your element's source file.

#if DEBUG && canImport(SwiftUI) && !arch(i386) && !arch(arm)

import SwiftUI

@available(iOS 13.0, *)
struct MyElement_Preview: PreviewProvider {
    static var previews: some View {
        ElementPreview {
            MyElement()
        }
    }
}

#endif

Uhhh

You’re probably asking… Why the !arch(i386) check above? Turns out, a compiler bug! SwiftUI is only available on 64 bit devices, but the canImport check erroneously finds it when building to target iOS 10 devices. Until we drop iOS 10, this part of the check is also required.

Details

It’s important that you keep the PreviewProvider in the same file as the element that you are editing.

Why? Xcode uses a new feature called “Dynamic Replacement” to re-compile the source file you are editing, and inject it back into the running app which drives the preview. This only works on the level of a single file – if your preview and element live in separate files, Xcode needs to recompile your entire module which will slow down preview updates greatly.

You can learn more about Xcode previews here: https://nshipster.com/swiftui-previews/

Requirements

You must be running Xcode 11 and Catalina to take advantage of live previews. They do not work on Mojave. Your selected simulator must also be an iOS 13 device.

Properties

  • A provider which returns a new element.

    Declaration

    Swift

    public typealias ElementProvider = () -> Element

Initialization

  • Creates a new ElementPreview with several common devices that your users may use.

    Declaration

    Swift

    public static func commonDevices(
    named name: String = "",
    with provider: @escaping ElementProvider
) -> Self

  • Creates a new ElementPreview with the provided preview type. If you do not pass a preview type, .thatFits is used.

    Declaration

    Swift

    public init(
    named name: String = "",
    with previewType: PreviewType = .thatFits(),
    with provider: @escaping ElementProvider
)

  • Creates a new ElementPreview with the provided preview types.

    You can pass as many preview types as you would like to see your element rendered in those different environments.

    If you do not pass a preview type, .thatFits is used.

    Declaration

    Swift

    public init(
    named name: String = "",
    with previewTypes: [PreviewType],
    with provider: @escaping ElementProvider
)

View

  • Declaration

    Swift

    public var body: some View { get }

  • The preview type to use to display an element in an Xcode preview.

    We provide three preview types: A specific device type, a fixed size, and the size that fits the view.

    See more

    Declaration

    Swift

    public enum PreviewType