Skip to main content
PESDK/Web/Guides/Getty Images Library SDK/Integration

Getty Images Library SDK Getting Started - React JS

Getting started integrating the Getty Images Library SDK

Let's get started!#

We will be using create-react-app for simplicity.

Create a project#

  • Start a new project with create-react-app
npx create-react-app my-app
cd my-app
npm run start
  • Then open http://localhost:3000/ to see your app.

Installing peer dependencies#

Getty Images Library SDK needs following peer dependencies:

  1. React >= 16.8.6
  2. React DOM >= 16.8.6
  3. Styled Components >= 4.4
  4. PhotoEditorSDK >= 5.17.3
  5. Getty Images plugin for PhotoEditor SDK >= 1.2.0

React and React DOM are already installed using Create React App.

  • Run npm install --save styled-components photoeditorsdk @pesdk/getty-images to include the remaining dependencies in the project.

Creating a library component#

import React, { useEffect, useState } from 'react';
import {
} from '@pesdk/getty-images-integration';
export const App: React.FC = () => {
const [editor, setEditor] = useState<EditorApi>();
useEffect(() => {
const initEditor = async () => {
const editor = await PhotoEditorSDKUI.init({
gettyAPIKey: "",
gettyTokenURL: `${window.location.href}/token`,
container: '#editor',
}, []);
useEffect(() => {
if (!editor) return;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
editor.on(UIEvent.EXPORT, async img => {
alert('Image exported!');
}, [editor]);
return <div id="editor" />;

Providing the assets#

The assets folder can be copied from the public GitHub repo or from node_modules/photoeditorsdk to the public folder of your project.


If you are loading images from external sources (e.g. from an AWS bucket), you need to first configure Cross-Origin Resource Sharing for both the server and the image.

Please follow the instructions on how to properly configure CORS here.

Serving OAuth Token for Getty's API#

In order to authenticate with the Getty Images API you need to implement an Oauth flow that relies on secure machine-to-machine communication. Consult this section of the guide for an example.

Ready to go!#

There you have it. Getty Images Library SDK for web is ready to use. Refer to the configuration documentaion for more configuration options.