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

Editing designs

Edit an existing design with the iOS SDK.

After a user creates a design, they may want to edit that design at a later point in time. To enable this, Canva provides your app with the ID of the user's design. You can use this ID to re-open the design in the Canva editor.

This part of the tutorial series explains how to open an existing design with the iOS SDK.

Step 1: Set up the UI

  1. Open the Main.storyboard file.

  2. Add a Button to the app.

  3. Open the Attributes Inspector for the Button.

  4. Uncheck the State > Enabled option.

  5. Choose a Label for the Button.

  6. Create an outlet for the Button:

    @IBOutlet weak var editDesignButton: UIButton!
    swift

    In this case, the outlet is called editDesignButton.

  7. Create an action for the Button:

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

    In this case, the action is called editDesign.

Step 2: Get the ID of the user's design

In the ViewController class, create a property to store the ID of the user's most recent design:

var previousDesignId: String?
swift

Then, when a user creates or publishes a design:

  • Update the value of the previousDesignId variable.
  • Enable the editDesign button.

The following snippet demonstrates how to do this with the didPublishDesignWithDesignID and didFinishLoadingWithDesignID methods:

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


    // Download and render the user's image
    guard let url = url else { return }
    let task = URLSession.shared.dataTask(with: url) { data, urlResponse, error in
        guard let downloadedImage = data,
        let imageData = Data(base64Encoded: downloadedImage.base64EncodedString())
        else { return }
            DispatchQueue.main.async {
                self.publishedImageView.image = UIImage(data: imageData)
        }
    }


    task.resume()


    // Save the ID of the user's design
    previousDesignId = designID


    // Enable the "Edit design" button
    editDesignButton.isEnabled = true
}


// ...


func canvaViewController(_ canvaViewController: CanvaViewController, didFinishLoadingWithDesignID designID: String) {
   // Save the ID of the user's design
   previousDesignId = designID


   // Enable the "Edit design" button
   editDesignButton.isEnabled = true
}
swift

Step 3: Create a CanvaViewController

Copy the following code into the editDesign action:

guard let previousDesignId = previousDesignId else  { return }
do {
   let configuration = CanvaViewController.Configuration(apiKey: "API KEY GOES HERE")
   let canvaViewController = try CanvaViewController(designID: previousDesignId, configuration: configuration)
   canvaViewController.delegate = self
   canvaViewController.preferredControlTintColor = UIColor(named: "canvaColor")
   self.present(canvaViewController, animated: true)
} catch {
   print("Something went wrong. Unable to edit design with ID of \(previousDesignId).")
   print(error)
}
swift

The editDesign action is almost identical to the code in the createDesign action. There's only two differences:

  • The function returns early if previousDesignId isn't defined.
  • A designID argument is passed into the CanvaViewController instead of a designType. Canva uses this ID to open the existing design in the editor.

After making these changes: run the app, create a new design, and close the web view. You should be able to re-open the design by clicking the Edit design button.

Example

ViewController.swift

import UIKit
import CanvaButton


class ViewController: UIViewController {


    var previousDesignId: String?


    @IBOutlet weak var publishedImageView: UIImageView!
    @IBOutlet weak var editDesignButton: UIButton!


    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)
       }
    }


    @IBAction func editDesign(_ sender: Any) {
        guard let previousDesignId = previousDesignId else  { return }
        do {
           let configuration = CanvaViewController.Configuration(apiKey: "API KEY GOES HERE")
           let canvaViewController = try CanvaViewController(designID: previousDesignId!, configuration: configuration)
           canvaViewController.delegate = self
           canvaViewController.preferredControlTintColor = UIColor(named: "canvaColor")
           self.present(canvaViewController, animated: true)
        } catch {
           print("Something went wrong. Unable to edit design with ID of \(previousDesignId).")
           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").")


        // Download and render the user's image
        guard let url = url else { return }
        let task = URLSession.shared.dataTask(with: url) { data, urlResponse, error in
            guard let downloadedImage = data,
            let imageData = Data(base64Encoded: downloadedImage.base64EncodedString())
            else { return }
                DispatchQueue.main.async {
                    self.publishedImageView.image = UIImage(data: imageData)
            }
        }


        task.resume()


        // Save the ID of the user's design
        previousDesignId = designID


        // Enable the "Edit design" button
        editDesignButton.isEnabled = true
    }


    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).")
        previousDesignId = designID
    }
}
swift