Skip to main content
PESDK/Web/Customization

Measurements

Learn how to align the editor with your current application.

To integrate the PhotoEditor SDK UI seamlessly into your application we provide the option to change the height and width of the different components

Following are the available customizations:

The values will accept the pixel amount as a number

  • advancedUIToolbar: Customizations for Advanced UI toolbar.
    • width: Changes the width of Advanced UI toolbar.
  • basicUIToolbar: Customizations for Basic UI toolbar.
    • openHeight: Changes the height of Basic UI toolbar, in when a tool is selected.
    • closeHeight: Changes the height of Basic UI toolbar, in when no tool is selected.
  • mainCanvasActionBar: Customizations for Main canvas action bar in both UIs.
    • height: Changes the height of main canvas action bar.
  • canvas: Customization for the Canvas
    • marginTop: This value can be used in combination with an opaque mainCanvasActionBar.background color to prevent canvas elements to be hidden behind the Main canvas action bar
  • colorItem: Customization for the ColorItem
    • size: Changes the height and width of the ColorItem

Font System#

Learn how to customize the font-size, letter-spacing, and text-transform of certain UI elements in the Font System guide.

Use an opaque color for the main canvas action bar#

const editor = await PhotoEditorSDKUI.init({
custom: {
themes: {
dark: {
mainCanvasActionBar: {
background: '#365afc',
},
},
},
measurements: {
mainCanvasActionBar: {
height: 48,
},
canvas: {
marginTop: 48,
},
},
},
});

Remove the uppercase text transform from the titles#

const editor = await PhotoEditorSDKUI.init({
custom: {
measurements: {
fontSystem: {
headline1: { size: 16, letterSpacing: 1.5, case: 'capitalize' },
headline2: { size: 14, letterSpacing: 0.8, case: 'capitalize' },
},
},
},
});