Using the Postcard Editor

Postcard Editor is built to facilitate optimal post- & greeting- card design, from changing accent colors and selecting fonts to custom messages and pictures. Toggling from edit to preview mode allows reviewing the design in the context of the entire post/greeting card. A floating action button at the bottom of the editor features only the most essential editing options in order of relevance allowing users to overlay text, add images, shapes, stickers and upload new image assets.

In this example, we will show you how to initialize the Postcard Editor solution for the mobile editor on iOS.

The mobile editor is implemented entirely with SwiftUI and this example assumes that you also use SwiftUI to integrate it, however, you can check the UIKit implementation sample on the quickstart page. It can be also applied to this example.

Explore a full code sample on GitHub.

View on GitHub

Import#

After adding the IMGLYUI Swift Package to your app. You can get started right away by importing the editor module into your own code.

Initialization#

The editor is initialized with EngineSettings which are used to initialize the underlying Engine. The license key that you received from IMG.LY is the only required parameter. Additionally, you should provide an optional unique ID tied to your application's user. This helps us accurately calculate monthly active users (MAU) and it is especially useful when one person uses the app on multiple devices with a sign-in feature, ensuring they're counted once.

For more details on how to configure the editor, visit the configuration page.

Presentation#

In this integration example the editor is presented as a modal view after tapping a button. Check out the quickstart page for details on the expected environment for the editor and the ModalEditor helper.


import IMGLYPostcardEditor
import SwiftUI

struct PostcardEditorSolution: View {
  let settings = EngineSettings(license: secrets.licenseKey,
                                userID: "<your unique user id>")

  var editor: some View {
    PostcardEditor(settings)
  }


  @State private var isPresented = false

  var body: some View {
    Button("Use the Editor") {
      isPresented = true
    }
    .fullScreenCover(isPresented: $isPresented) {
      ModalEditor {
        editor
      }
    }
  }
}