From Photoshop

import Foundation
import IMGLYEngine

@MainActor
func importFromPhotoshop(engine: Engine) async throws {
  // Stand in for the .cesdk archive your server produces from a PSD file with
  // the @imgly/psd-importer package. In production, archiveURL points to that
  // archive — a remote URL on your CDN or a local file URL — and
  // loadArchive(from:) accepts either.
  let baseURL = try engine.guidesBaseURL
  let sceneURL = baseURL.appendingPathComponent("ly.img.templates/templates/cesdk_business_card_1.scene")
  try await engine.scene.load(from: sceneURL)
  let archiveData = try await engine.scene.saveToArchive()
  let archiveURL = FileManager.default.temporaryDirectory
    .appendingPathComponent("converted-photoshop-\(UUID().uuidString).cesdk")
  try archiveData.write(to: archiveURL)

  try await engine.scene.loadArchive(from: archiveURL)

  let pages = try engine.scene.getPages()
  print("Imported design has \(pages.count) page(s)")

  guard let scene = try engine.scene.get() else { return }
  try await engine.scene.zoom(
    to: scene,
    paddingLeft: 40,
    paddingTop: 40,
    paddingRight: 40,
    paddingBottom: 40,
  )
}

Photoshop import is handled by the @imgly/psd-importer package, which parses PSD files and converts them into CE.SDK scenes. That package runs in Node.js and the browser — there is no on-device PSD parser. The recommended workflow is to convert PSD files to a portable .cesdk archive once with the Node.js importer, then ship or download that archive and load it with engine.scene.loadArchive(from:).

Load the Converted Archive#

Load the .cesdk archive produced by the conversion step with loadArchive(from:). Point archiveURL at that file — a bundled archive resolved with Bundle.main.url(forResource:withExtension:), or a remote download from your server. Archives are ZIP files that bundle the scene together with its embedded assets, so the import is self-contained — loadArchive(from:) accepts a local file URL or a remote one.

try await engine.scene.loadArchive(from: archiveURL)

Verify the Import#

After loading, confirm the scene contains pages before presenting it. engine.scene.getPages() returns the imported pages; an empty result means the loaded scene contains no pages.

let pages = try engine.scene.getPages()
print("Imported design has \(pages.count) page(s)")

Fit the Scene to the Viewport#

Retrieve the current scene with engine.scene.get() and frame it with engine.scene.zoom(to:). The four padding parameters add space in points around the focused block.

guard let scene = try engine.scene.get() else { return }
try await engine.scene.zoom(
  to: scene,
  paddingLeft: 40,
  paddingTop: 40,
  paddingRight: 40,
  paddingBottom: 40,
)

What Gets Imported#

The conversion preserves layer grouping, positioning, rotation, and transparency, along with text (font family with bold and italic styles), shapes (rectangles, ovals, polygons, lines, and custom shapes), solid color fills, strokes, and embedded images. These are baked into the archive during conversion, so the imported scene is fully editable once loaded.

Limitations#

The same conversion limitations apply wherever you load the result:

• Gradient fills are not supported — only solid color fills are converted.
• Image cropping is not preserved; images import at their full bounds.
• Text within a single layer cannot mix multiple font sizes or families, and text justification is not supported.
• Groups have limited support, especially single-member groups.
• Unavailable fonts are substituted with fallbacks. Configure Google Fonts matching during conversion for the best results.
• Some blend modes are not supported, including PassThrough, Dissolve, Linear Burn, and Subtract.

API Reference#

Methods#

Next Steps#

• Import Design from Archive — Learn the full .cesdk archive workflow used by this guide.
• Import Templates — Load and import design templates into CE.SDK from URLs, archives, and serialized strings.
• Export Overview — Export your imported design to PNG, PDF, and other formats.