TypeScript icon, indicating that this package has built-in type declarations

1.4.0 • Public • Published

Getty Images plugin for PhotoEditor SDK

This plugin helps to integrate Getty Images API into PhotoEditor SDK.


You need to use your backend endpoint that provides an OAuth token for the Getty Images API.

Getting Started

yarn add @pesdk/getty-images


npm install --save @pesdk/getty-images
import { Tool, CustomButtonProps } from "photoeditorsdk";
const sdkConfiguration = {
  // include custom tool into tools list
  tools: [Tool.CUSTOM, Tool.TRANSFORM],
  // provide tool configuration
  [Tool.CUSTOM]: {
    // toolbar icon
    icon: React.ElementType,
    // See Toolbar component API
    toolControlBar: React.ElementType,
  custom: {
    components: {
      buttons: {
        // Export action behaviour for Getty Images usage
        // See Export button API
        mainCanvasActionExport: React.ElementType<CustomButtonProps>,
    languages: {
      en: {
        customTool: {
          // toolbar title
          title: "Getty Images",
          // ...other localization strings


PhotoEditor SDK & Getty Images example


Toolbar component

Default Getty Images toolbar represents a debounced input for search and infinite images grid using:

import { GettyImagesToolbarProps } from "@pesdk/getty-images";
// equivalent to
export type GettyImagesToolbarProps = {
  // public getty images api key
  apiKey: string;
  // promise that returns OAuth token
  fetchToken(): Promise<string>;
   * handle errors occurred during API call
   * https://github.com/imgly/pesdk-web-plugins/tree/main/plugins/getty-images/src/types.ts
  onError: OnError;
   * configure image search params
   * Typescript types https://github.com/imgly/pesdk-web-plugins/tree/main/plugins/getty-images/src/api/searchImages.ts
   * Getty API https://api.gettyimages.com/swagger/index.html#Images
  searchParams?: SearchImagesParams;
  // image size for editor preview, default DisplaySizeName.High = 'high_res_comp'
  displaySize?: DisplaySizeName;

const params: GettyImagesToolbarProps = {};
// non-react environment
const GettyToolbar = createGettyImagesToolbar(params);
// react environment
const GettyToolbarAlt: React.FC<CustomToolProps> = (props) => {
  return <GettyImagesToolControlBar {...props} {...params} />;


You can replace the toolbar using any library that you want or have in the app environment.

To override the toolbar you must keep:

  • createAPIClient instance
  • gettyStore calls
  • handleSetImage function

Export button

The export button should be used to get a higher resolution and licensed image from Getty Images.

import { GettyImagesExportButtonProps } from "@pesdk/getty-images";
// equivalent to

export type GettyImagesExportButtonProps = {
   * Function to be called before licensing an image
   * {function} callback to license an image
   * {GettyImage} image data object
  onConfirm: OnConfirm;
  // image size to generate final output, default ImageSize.Medium = 'medium'
  imageSize?: ImageSize;
const params: GettyImagesExportButtonProps = {};
// non-react environment
const ExportButton = createGettyImagesExportButton(params);
// react environment
const ExportButtonAlt: React.FC<CustomButtonProps> = (props) => {
  return <GettyImagesExportButton {...props} {...params} />;


You can replace the export button with a custom one.

To override the toolbar you must keep:

  • Passing custom button props if ContainedPrimaryButton is going to be used
  • onLicenseImage function


The plugin accepts title and placeholder string in localization object

  "custom": {
    "en": {
      "customTool": {
        "title": "Getty Images",
        "placeholder": "Search the world’s best images"

PhotoEditor SDK Documentation

Visit our docs


Please see LICENSE for licensing details.

Support and License

Use our service desk for bug reports or support requests. To request a commercial license, please use the license request form on our website.

Package Sidebar


npm i @pesdk/getty-images



Weekly Downloads






Unpacked Size

199 kB

Total Files


Last publish


  • maerch
  • sascha_
  • schiewe