Docs
API Docs

Measurements

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
  • fontSystem: Customization for the Font System of the UI
    • headline1: ToolControlBar title
      • size: Font size in pixel
      • letterSpacing: Letter spacing in pixel
      • case: Text transform property
    • headline2: Modal title, ToolControlBar subtitles
    • body: Overlay type carousel, input field text, dropdown text, modal body
    • label: Card labels, input labels, tooltip
    • basicUICardLabel: Basic ui card label
    • button1: Contained Buttons and Button base class
    • button2: Text button, dropdown items, canvas action buttons
    • basicUITabLabel: Tab text

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" },
      },
    },
  },
});