Search Docs
Loading...
Skip to content

Size Limits

Configure size limits to balance quality and performance in CE.SDK applications.

5 mins
estimated time
GitHub

CE.SDK processes images and videos on the device, so size limits depend on the available memory and the device’s rendering hardware. Tuning these limits keeps memory use predictable on smaller devices while still letting capable devices export at high resolution.

This guide covers reading and writing the maxImageSize setting, observing setting changes, querying the device’s maximum export size, and handling export failures.

Understanding Size Limits#

CE.SDK manages size limits at two stages: input (when loading images) and output (when exporting). The maxImageSize setting controls input resolution and downscales images that exceed the configured limit before they reach the canvas. The default is 4096×4096 pixels, which keeps memory use predictable on a wide range of devices.

Export resolution has no artificial limit. The engine can render up to 16,384×16,384 pixels in theory, but the actual ceiling is determined by the device’s rendering hardware and available memory. Use engine.editor.getMaxExportSize() to read the device’s reported upper bound at runtime.

Resolution & Duration Limits#

ConstraintRecommendation / Limit
Input ResolutionMaximum input resolution is 4096×4096 pixels. Images from external sources (e.g., Unsplash) are resized to this size before rendering on the canvas. You can modify this value using the maxImageSize setting.
Output ResolutionThere is no enforced output resolution limit. Theoretically, the editor supports output sizes up to 16,384×16,384 pixels. However, practical limits depend on the device’s GPU capabilities and available memory.

All image processing in CE.SDK is handled client-side, so these values depend on the maximum texture size supported by the user’s hardware. The default limit of 4096×4096 is a safe baseline that works universally. Higher resolutions (e.g., 8192×8192) may work on certain devices but could fail on others during export if the GPU texture size is exceeded.

ConstraintRecommendation / Limit
ResolutionUp to 4K UHD is supported for playback and export, depending on the user’s hardware and available GPU resources. For import, CE.SDK does not impose artificial limits, but maximum video size is bounded by the 32-bit address space of WebAssembly (wasm32) and the browser tab’s memory cap (~2 GB).
Frame Rate30 FPS at 1080p is broadly supported; 60 FPS and high-res exports benefit from hardware acceleration
DurationStories and reels of up to 2 minutes are fully supported. Longer videos are also supported, but we generally found a maximum duration of 10 minutes to be a good balance for a smooth editing experience and a pleasant export duration of around one minute on modern hardware.

Configuring maxImageSize#

Read and modify maxImageSize through the Settings API. The setting is an integer (pixels), so use the Int accessors on engine.editor.

Reading the Current Setting#

To check the value currently in effect:

let currentMaxImageSize = try engine.editor.getSettingInt("maxImageSize")
// The default value is 4096 pixels.

The default is 4096. Read this value at startup to surface it in your UI, or to make runtime decisions about asset loading.

Setting a New Value#

Apply a new limit before loading images so newly loaded textures are downscaled to the new size:

// Lower the limit on memory-constrained devices. Apply this before loading
// images so newly loaded textures are downscaled to the new limit.
try engine.editor.setSettingInt("maxImageSize", value: 2048)
// Or raise it for high-quality workflows on capable devices:
// try engine.editor.setSettingInt("maxImageSize", value: 8192)

Images already on the canvas keep their loaded resolution until they are reloaded. Lower values reduce memory pressure on phones and tablets; higher values preserve detail on desktops and higher-end devices.

Observing Settings Changes#

Subscribe to settings changes through the onSettingsChanged async stream. The stream emits Void on every setting change, so read the value back inside the loop:

// Observe settings changes via an AsyncStream and react to new values. Cancel
// the task to unsubscribe.
let observation = Task {
for await _ in engine.editor.onSettingsChanged {
let newMaxImageSize = try engine.editor.getSettingInt("maxImageSize")
_ = newMaxImageSize
}
}
// ...
observation.cancel()

A Combine variant is also available as engine.editor.onSettingsChangedPublisher. Cancel the consuming Task (or the Combine subscription) to unsubscribe.

Device Export Capabilities#

The maximum export size on the current device is exposed directly:

// The engine reports the maximum export size supported on the current device.
// The value is an upper bound — exports may still fail for memory or other
// reasons. When the limit is unknown, the engine returns Int32.max.
let maxExportSize = try engine.editor.getMaxExportSize()

getMaxExportSize() returns the upper export limit in pixels for both width and height. When the limit is unknown the engine returns Int32.max to signal “unlimited”. The reported value is an upper bound: exports may still fail for memory reasons even when both dimensions are below it.

Use the value to:

  • Cap export presets to dimensions the device can render
  • Warn users when a requested export exceeds the device limit
  • Pick a conservative default maxImageSize for the device class

You can also pre-validate a planned export against the limit. getWidth(_:) and getHeight(_:) only return absolute pixel values when the scene’s design unit is .px and the block’s size mode is .absolute. With .percent the value is a fraction of the parent’s size; with .auto it is derived from the block’s content. Verify both before comparing to getMaxExportSize():

// getWidth/getHeight only return absolute pixel values when the scene's
// design unit is .px AND the block's size mode is .absolute. With .percent
// the value is a fraction of the parent's size; with .auto it is derived
// from the block's content. Check both before comparing to the pixel-based
// device limit.
let designUnit = try engine.scene.getDesignUnit()
let widthMode = try engine.block.getWidthMode(page)
let heightMode = try engine.block.getHeightMode(page)
if designUnit == .px, widthMode == .absolute, heightMode == .absolute {
let pageWidth = try engine.block.getWidth(page)
let pageHeight = try engine.block.getHeight(page)
let withinLimit = Int(pageWidth.rounded(.up)) <= maxExportSize
&& Int(pageHeight.rounded(.up)) <= maxExportSize
_ = withinLimit
}

Handling Export Errors#

engine.block.export(_:mimeType:options:) is async throws, so wrap it in a do/catch block and provide a fallback when an export fails. A practical recovery is to lower maxImageSize, then retry with smaller targetWidth/targetHeight values:

// Catch export errors so the app can recover. Common remediations are
// lowering targetWidth/targetHeight or reducing maxImageSize.
// ExportOptions.targetWidth/targetHeight are always in pixels.
do {
let pngData = try await engine.block.export(page, mimeType: .png)
_ = pngData
} catch {
try engine.editor.setSettingInt("maxImageSize", value: 2048)
let retryOptions = ExportOptions(targetWidth: 1920, targetHeight: 1080)
let retryData = try await engine.block.export(page, mimeType: .png, options: retryOptions)
_ = retryData
}

This pattern lets the app keep delivering an export even when the first attempt is too large for the current device or memory pressure is high.

Troubleshooting#

IssueCauseSolution
Images appear blurry on the canvasmaxImageSize is below the source resolutionRaise maxImageSize if the device has the memory headroom
Out-of-memory crashes during editingmaxImageSize is too high for the deviceLower maxImageSize, especially on phones and tablets
Export throws unexpectedlyOutput dimensions exceed getMaxExportSize()Reduce targetWidth/targetHeight or pick a smaller export preset
Video export failsResolution or duration exceeds device capabilityExport at 1080p instead of 4K, or shorten the video
Inconsistent results across devicesDifferent rendering hardwareSet a conservative maxImageSize (4096) and gate larger exports on getMaxExportSize()

API Reference#

MethodDescription
engine.editor.getSettingInt(_:)Reads an integer setting (e.g. maxImageSize)
engine.editor.setSettingInt(_:value:)Updates an integer setting
engine.editor.onSettingsChangedAsyncStream<Void> that emits when any setting changes
engine.editor.getMaxExportSize()Returns the device’s maximum export dimension in pixels
engine.block.export(_:mimeType:options:)Exports a block as image data
engine.block.getWidth(_:) / getHeight(_:)Returns block dimensions in the scene’s design unit. Values are absolute only when the size mode is .absolute; .percent returns a parent-relative fraction and .auto returns a content-derived value
engine.block.getWidthMode(_:) / getHeightMode(_:)Returns the size mode (.absolute, .percent, or .auto) used for the dimension
engine.scene.getDesignUnit() / setDesignUnit(_:)Reads or sets the scene’s design unit

Next Steps#

Explore related guides to build complete export workflows: