New Project with SwiftUI

This guide walks you through integrating the CE.SDK into a brand-new SwiftUI project. You’ll be able to add professional-grade video and photo editing to your app with just a few simple steps.

Requirements#

To work with the SDK, you’ll need:

• A Mac running a recent version of Xcode
• A valid CE.SDK license key (Get a free trial)

Creating a new Xcode Project#

1. Launch Xcode and use the File menu to select New -> Project....

2. Make sure the iOS tab is selected, and highlight the App template. Click Next.

3. Enter a name for your app and an identifier for your organization. These will be combined to be the bundle identifier of your app. A team is not required to deploy your app to the simulator. Then click Next.

When you want to run on a physical device, you’ll need to add a team. Learn how to set up teams at Apple’s help site.

4. Choose a location to save the project and click Create.

Add the CE.SDK Swift package#

1. With your Xcode project open, use the File menu to select Add Package Dependencies...

2. Copy the following package URL and paste it into the Search field, at the top right of the modal:

https://github.com/imgly/IMGLYUI-swift

3. Once you see the IMGLY UI package information in the window, click Add Package

4. After downloading the package and its dependencies, you’ll be presented with a list of libraries. For this demo choose the IMGLYUI library to add to your project target. This adds all of the capabilities of the SDK to your project. For a production app, you can include only those libraries that contain the functions you need to help conserve app space.

Add Code to Use the CE.SDK#

1. Open the ContentView.swift file in your project. Import the SDK by adding the following below import SwiftUI:

import IMGLYDesignEditor

2. Create a variable to hold the engine for the editor. Just below the line to create the ContentView struct and before the declaration of the body, add this code, and update it with your actual license key and user ID.

let engineSettings = EngineSettings(license: "<your license>",
                                     userID: "<your unique user id>")

3. In the body variable of ContentView, replace the existing code with a DesignEditor that uses the engineSettings. It needs to be wrapped in a navigation-capable container, which is necessary for toolbars and controls to display properly.

NavigationView {
  DesignEditor(engineSettings)
}
.navigationViewStyle(.stack)

Note: Avoid using layout containers like VStack, ZStack, or ScrollView as the direct parent of DesignEditor. These do not provide navigation context and will result in missing toolbars or UI elements.

When you’re done, your ContentView.swift should look similar to this:

import SwiftUI
import IMGLYDesignEditor

struct ContentView: View {
  let engineSettings = EngineSettings(license: "<your license key>",
                                       userID: "<your unique user id>")

  var body: some View {
    NavigationView {
      DesignEditor(engineSettings)
    }
    .navigationViewStyle(.stack)
  }
}

Now select an iOS device or a Simulator, and Build and Run.

Using Your App#

When the app launches you’ll see a blank page with a toolbar at the bottom. Use the different buttons to add assets to your creation. You can add pages to your creation using the button in the top toolbar. Use the share button to export your creation as a pdf.

Troubleshooting#

If you run into issues, here are some common problems and solutions. For additional help, visit our support page.

Import Errors: ‘EngineSettings’ or ‘DesignEditor’ Not Found#

Make sure that every Swift file that uses the editor has an import statement before the first line of code. Like this one, for example import IMGLYDesignEditor

Build Errors: Missing Modules#

Make sure that you didn’t accidentially choose the wrong target when you added the SDK to your project. You can check a target’s imports on the General tab of the target settings.

If the SDK is missing, you can add it using the + button at the bottom of the list.

License Key Error at Runtime#

Double-check that your EngineSettings has the exact license key with proper capitalization. If you don’t have a license, register for a free trial to get a demonstration license.

Missing Toolbars or Controls#

Ensure the DesignEditor is wrapped in a NavigationView. Do not place it directly in a VStack or as the root of the view hierarchy.

Don’t do this:

var body: some View {
  DesignEditor(engineSettings)
}

Or this:

var body: some View {
  VStack {
    DesignEditor(engineSettings)
  }
}

Instead, wrap it in a NavigationView as shown above with the .stack style.

What’s Next?#

Now that your integration is working, you can explore more advanced features like custom templates, user uploads, and localized UI. Check out our documentation site for more tutorials and guides.