Docs
v5.7
v5.6
v5.10
v5
v4
v3.6
API Docs

Configuration

You can easily configure the editor to disable specific tools, hide buttons, change components etc. by adding a configuration object to the PhotoEditorSDKUI.

Refer to the nomenclature to understand the naming convention.

const editor = await PhotoEditorSDKUI.init({
    license: '<your_license_key>',
    layout: 'advanced',
    container: '#editor',
  },
})
  • license String - The PhotoEditor SDK license. If no license (or an invalid license) is provided engine will render a watermark over the preview and export output. Refer to the pricing plans for more information.
  • layout - The layout that should be rendered by the editor. Defaults to advanced. Available are advanced, basic. Refer to the UI documentation for more information.
  • container DOMElement or Element Id - The element the editor should be rendered to.
  • language String - The UI language. Defaults to en. Available are en and de.
  • order - String - Should the toolControlBar be rendered on right, relevant only for AdvancedUI. Defaults to default. Available are default and reverse.
  • theme String - Defines the theme that should be used to style the user interface. Defaults to dark. Available are dark and light.

  • image data-url or ImageElement or path to the image relative to assets directory - The image that should be loaded and displayed initially.

  • assetBaseUrl String - The base URL for all assets. Should be the absolute path to your assets directory. Defaults to assets.

  • engine Object
    • crossOrigin - Sets the global crossOrigin loading mode. Defaults to anonymous. Available are anonymous, use-credentials or none
    • downscaleOptions Object - Images whose sizes exceed these megapixel limits will be downscaled by the engine.
      • maxMegaPixels Object - Specifies the maximum amount of megapixels per device type.
        • desktop Number - Defaults to 10.
        • mobile Number - Defaults to 5.
      • maxDimensions Object - Specifies max height or width for the image.
        • height Number - Defaults to height of given image
        • width Number - Defaults to width of given image
  • displayResizeWarning Boolean - Should a message be displayed when the image has been scaled down for performance reasons. Defaults to false.
  • displayCloseWarning Boolean - Should a message be displayed when Photoeditor SDK is exited with close event. Defaults to true.
  • displayToolControlBarTitle Boolean - Should be displayed the Title of the Control Bar. Defaults to true.
  • enableZoom Boolean - Should the image be zoomable? Defaults to true.

  • mainCanvasActions Array - Defines all allowed actions for the main screen that are displayed in the given order as buttons on the mainCanvasActionBar. Available are to undo, redo, export, close, undefined. If undefined is given, based on the array index of undefined, the editor will leave that place empty.

  • tools Array - The enabled tools in the order they are mentioned, Can be grouped in arrays which will be displayed with separators. Available are: transform, filter, adjustment, focus, text, textdesign, sticker, brush, frame and overlay.

  • defaultTool String - The tool that is initially loaded, relevant only for AdvancedUI. Defaults to filter.

  • snapping Object - Options that control the snapping behaviour of sprites.
    • position Object - Snapping options for positioning sprites.
      • enabled Boolean - Whether sprites should snap to specific positions during pan interactions. Defaults to true
      • threshold Number - This threshold defines the distance of a pan gesture where snapping at a snap point occurs (value in pixels). Defaults to 20
      • snapToHorizontalCenter Boolean - If enabled a sprite’s center snaps to the horizontal line through the center of the edited image. Defaults to true
      • snapToVerticalCenter Boolean - If enabled a sprite’s center snaps to the vertical line through the center of the edited image. Defaults to true
      • snapToLeft Number or null - The left side of a sprite’s bounding box snaps to a vertical line which is shifted by this value from the left side of the edited image towards its center. This value is measured in normalized coordinates relative to the smaller side of the edited image. If this value is explicitly set to null this snapping line is disabled. Defaults to 0.1
      • snapToRight Number or null - The right side of a sprite’s bounding box snaps to a vertical line which is shifted by this value from the right side of the edited image towards its center. This value is measured in normalized coordinates relative to the smaller side of the edited image. If this value is explicitly set to null this snapping line is disabled. Defaults to 0.1
      • snapToTop Number or null - The top side of a sprite’s bounding box snaps to a vertical line which is shifted by this value from the top side of the edited image towards its center. This value is measured in normalized coordinates relative to the smaller side of the edited image. If this value is explicitly set to null this snapping line is disabled. Defaults to 0.1
      • snapToBottom Number or null - The bottom side of a sprite’s bounding box snaps to a vertical line which is shifted by this value from the bottom side of the edited image towards its center. This value is measured in normalized coordinates relative to the smaller side of the edited image. If this value is explicitly set to null this snapping line is disabled. Defaults to 0.1
    • rotation Object - Snapping options for rotating sprites.
      • enabled Boolean - Whether sprites should snap to specific orientations during rotation interactions. Defaults to true
      • threshold Number - This threshold defines the arc length of a rotation gesture where snapping at a snap angle occurs (value in pixels). Defaults to 20
      • angles Number - Enabled snapping angles in degrees for rotating a sprite. The rotation angle is defined clockwise. Defaults to [0, 45, 90, 135, 180, 225, 270, 315]
  • export Object - Export configuration.
    • filename String - The filename of the exported image. Defaults to photoeditorsdk-export.
    • image Object - Image export configuration.
      • format String - The MIME type of the exported image. Defaults to image/png. Available formats vary by browser.
      • exportType image or data-url - Specifies the export type.
      • quality Number - The compression quality to use when creating the output image with a lossy file format, Defaults to 0.9
      • enableDownload Boolean - Should a export download the image in the specified format?. Defaults to true
  • library Object - Configuration options for library tool. Refer to the library documentation more options.
  • filter Object - Configuration options for filter tool. Refer to the filter documentation for available categories and their items.
  • focus Object - Configuration options for focus tool. Refer to the focus documentation for available items.
  • adjustment Object - Configuration options for adjustment tool. Refer to the adjustment documentation for available categories and their items.
  • overlay Object - Configuration options for overlay tool. Refer to the overlay documentation for available items.
  • frame Object - Configuration options for frame tool. Refer to the frame documentation for available items.
  • sticker Object - Configuration options for sticker tool. Refer to the sticker documentation for available categories and their items.
  • text Object - Configuration options for text tool. Refer to the text documentation for available items.
  • textdesign Object - Configuration options for textdesign tool. Refer to the textdesign documentation for available items.

  • transform Object - Configuration options for transform tool. Refer to the transform documentation for available categories and their items.

  • custom Object - Customization options.
    • languages Object - Language labeling options to change the user interface appearance. This allows to alter predefined existing theme presets or to create new themes which can be enabled when their corresponding key is configured. Refer to the localization documentation for more customizations.
    • theme Object - Theming options to change the user interface appearance. This allows to alter predefined existing theme presents or to create new themes which can be enabled when their corresponding key is configured. Refer to the theme documentation for more customizations.
    • components Object - Custom react components that will be rendered instead of current components. Refer to the component customizations for more information.
    • measurements Object - Custom measurements for existing components. Refer to the measurements customizations for more information.