Skip to main content
PESDK/Web/Configuration
Language:

Basic Configuration Settings of PhotoEditor SDK

In this example, we will show you how to configure the PhotoEditor SDK.

Basic Configuration#

The PE.SDK comes with a set of basic configuration parameters that let's you influence its look & feel.

index.js
license: '',
container: '#editor',
image: 'https://images.unsplash.com/...',
assetBaseUrl: 'assets',
assetResolver: {
item: () => null,
path: () => null,
},
language: 'en',
layout: 'advanced',
theme: 'dark',
order: 'default',
mainCanvasActions: ['undo', 'redo', 'export', 'close'],
enableZoom: true,
defaultTool: 'filter',
tools: [
'library',
['transform', 'filter', 'adjustment'],
['focus', 'frame', 'overlay'],
['text', 'text-design', 'sticker', 'brush'],
],
displayResizeWarning: false,
displayCloseWarning: true,
displayToolControlBarTitle: true,

license string#

The PhotoEditor SDK license. If no license (or an invalid license) is provided the PE.SDK will render a watermark over the preview and export output. Refer to the pricing plans for more information.

index.js
license: '',

container Element | Element.id#

Defines the HTML element the editor will be injected into.

index.js
container: '#editor',

image string | HTMLImageElement#

Defines the image that should be displayed once the editor is loaded. This can be a data-url, HTMLImageElement or a file path that is relative to the assets directory.

index.js
image: 'https://images.unsplash.com/...',

assetBaseUrl string#

Defines the root for all assets that are used by the PE.SDK. This can be an URL to a CDN or an absolute path to a local folder which is served by the webserver.

index.js
assetBaseUrl: 'assets',

assetResolver.item function#

Modify the path to a loaded asset that is relative to the assets directory.

(item: string, category: string) => string

index.js
item: () => null,

assetResolver.path function#

Modify the absolute path of a loaded asset.

(fullPath: string, category: string, item?: string) => string

index.js
path: () => null,

language string#

Defines the current language in the user interface. The PE.SDK is shipped with locales for English (en) and German (de), but any other language is possible. See Localization for an in-depth explaination of how to add new languages or modify the predefined translations.

index.js
language: 'en',

layout string#

Defines the current layout of the user interface. The PE.SDK is shipped with an AdvancedUI (advanced) and BasicUI (basic) layout. See UI for more information on their differences.

index.js
layout: 'advanced',

theme string#

Set the active theme. The PE.SDK includes predefined dark or light themes but is also highly customizable to match any style. See Theme for an in-depth explanation of how to create your own theme.

index.js
theme: 'dark',

order string#

Defines if the ToolBar in the AdvancedUI is position on the left side (default) or on the right side (reverse).

index.js
order: 'default',

mainCanvasActions array#

Defines the available buttons of the MainCanvasActionBar and their order. The editor will leave the position empty if undefined is provided.

Available options are undo, redo, export, close, and undefined.

index.js
mainCanvasActions: ['undo', 'redo', 'export', 'close'],

enableZoom boolean#

Defines if the user is able to use the zoom feature.

index.js
enableZoom: true,

tools array#

Defines which tools are available and their order. The tools can be grouped in arrays which will be display a separator between the next group.

Available are: transform, filter, adjustment, focus, text, textdesign, sticker, brush, frame and overlay.

index.js
tools: [
'library',
['transform', 'filter', 'adjustment'],
['focus', 'frame', 'overlay'],
['text', 'text-design', 'sticker', 'brush'],
],

defaultTool string#

Defines the tool that is initially loaded. Defaults to filter in the AdvancedUI or null in the BasicUI.

index.js
defaultTool: 'filter',

displayResizeWarning boolean#

Defines if a message is displayed when the image has been scaled down for performance reasons.

index.js
displayResizeWarning: false,

displayCloseWarning boolean#

Defines if a message is displayed when PE.SDK is exited with unsaved changes.

index.js
displayCloseWarning: true,

displayToolControlBarTitle boolean#

Defines if the title of the tool is displayed in of the ToolControlBar.

index.js
displayToolControlBarTitle: true,
File:
PhotoEditorSDK.PhotoEditorSDKUI.init({
license: '',
container: '#editor',
image: 'https://images.unsplash.com/...',
assetBaseUrl: 'assets',
assetResolver: {
item: () => null,
path: () => null,
},
language: 'en',
layout: 'advanced',
theme: 'dark',
order: 'default',
mainCanvasActions: ['undo', 'redo', 'export', 'close'],
enableZoom: true,
defaultTool: 'filter',
tools: [
'library',
['transform', 'filter', 'adjustment'],
['focus', 'frame', 'overlay'],
['text', 'text-design', 'sticker', 'brush'],
],
displayResizeWarning: false,
displayCloseWarning: true,
displayToolControlBarTitle: true,
});