Skip navigation
Skip to main content
How-to guides
How-to guides

Creating designs

Create a new design with the iOS SDK.

After setting up the iOS SDK, the next step is to allow users to create a design with the Canva editor. This part of the tutorial series explains how to launch the Canva editor from your app.

Step 1: Set up the UI

  1. Open the Main.storyboard file.

  2. Add a Button to the app.

  3. Choose a Label for the Button.

  4. Create an action for the Button:

    @IBAction func createDesign(_ sender: Any) {
       // code goes here
    }
    swift

    In this case, the action is called createDesign.

Step 2: Create a Configuration object

In the createDesign action, create a CanvaViewController.Configuration object:

@IBAction func createDesign(_ sender: Any) {
   let configuration = CanvaViewController.Configuration(apiKey: "API KEY GOES HERE")
}
swift

You must instantiate this object with your Canva Button API key.

Step 3: Create a CanvaViewController

In the createDesign action, create an instance of the CanvaViewController class and wrap this code in a do/catch block:

@IBAction func createDesign(_ sender: Any) {
   do {
      let configuration = CanvaViewController.Configuration(apiKey: "API KEY GOES HERE")
      let canvaViewController = try CanvaViewController(designType: "BookCover", configuration: configuration)
   } catch {
      print("Something went wrong. Unable to create a new design.")
      print(error)
   }
}
swift

You must instantiate this class with two arguments:

  • designType - This value determines the default dimensions of the user's design and the templates that Canva shows to the user. It's sometimes referred to as the design type. For a complete list of design types, refer to Design types.
  • configuration - This value is the CanvaViewController.Configuration object.

Next, set the delegate of the CanvaViewController to self and call the present method:

@IBAction func createDesign(_ sender: Any) {
   do {
      let configuration = CanvaViewController.Configuration(apiKey: "API KEY GOES HERE")
      let canvaViewController = try CanvaViewController(designType: "BookCover", configuration: configuration)
      canvaViewController.delegate = self
      self.present(canvaViewController, animated: true)
   } catch {
      print("Something went wrong. Unable to create a new design.")
      print(error)
   }
}
swift

Then build and run the app.

If you click the Create design button, Canva opens in a web view. You need to log into Canva to access the editor. Some interactions with the editor, such as opening or publishing a design, log messages to the console.

Example

ViewController.swift

import UIKit
import CanvaButton


class ViewController: UIViewController {


    override func viewDidLoad() {
        super.viewDidLoad()
    }


    @IBAction func createDesign(_ sender: Any) {
       do {
          let configuration = CanvaViewController.Configuration(apiKey: "API KEY GOES HERE")
          let canvaViewController = try CanvaViewController(designType: "BookCover", configuration: configuration)
          canvaViewController.delegate = self
          self.present(canvaViewController, animated: true)
       } catch {
          print("Something went wrong. Unable to create a new design.")
          print(error)
       }
    }


}


extension ViewController: CanvaViewControllerDelegate {
    func canvaViewController(_ canvaViewController: CanvaViewController, didFailToLoadWithError error: Error) {
        print("Unable to load Canva editor.")
        print(error)
    }


    func canvaViewController(_ canvaViewController: CanvaViewController, didTerminateLoadingForDesignID designID: String?) {
        print("Unable to open design with an ID of \(designID ?? "nil").")
    }




    func canvaViewController(_ canvaViewController: CanvaViewController, didPublishDesignWithDesignID designID: String?, url: URL?) {
        print("Published a design with an ID of \(designID ?? "nil").")
    }


    func canvaViewDidFailPublish(forDesignID designID: String?, withError error: Error) {
        print("Unable to publish design with an ID of \(designID ?? "nil").")
        print(error)
    }


    func canvaViewController(_ canvaViewController: CanvaViewController, didFinishLoadingWithDesignID designID: String) {
        print("Opened a design with an ID of \(designID).")
    }
}
swift