Skip to main content
PESDK/Web/Introduction/Integrations

Getting Started - Rails

Getting started integration tutorial

Let's get started!#

Free Trial#

Our tech is modified to be used for testing purposes without a license key. To start testing just follow this Get Started guide and leave out the step of entering the commercial license keys. The editor will simply render a watermark over the preview and final results. And in case you need any technical assistance, make sure to reach out to us: https://img.ly/support. We’ll be glad to help.

This guide was based on version 6 of Rails and we will be using rails for simplicity.

Create a project#

  • Start a new project by following the rails prompts
rails new my-app
cd my-app
rails s
  • Then open http://localhost:3000/ to see your app.

Installing peer dependencies#

PhotoEditor SDK needs the following peer dependencies for our latest releases:

  1. React >= 18.0.0
  2. React DOM >= 18.0.0
  3. Styled Components >= 4.4

Please note that using React <= 18 PhotoEditorSDK @5.19.7 is needed#

PhotoEditor SDK needs the following peer dependencies when using React <= 18

  1. React >= 16.8.6
  2. React DOM >= 16.8.6
  3. Styled Components >= 4.4
  4. PhotoEditorSDK @5.19.7
  • Run yarn add react react-dom styled-components to include them in the project.

Installing PhotoEditor SDK#

  • Run yarn add photoeditorsdk.
  • Copy the assets folder from node_modules/photoeditorsdk to public.

Installing PhotoEditor SDK using React <= 18#

  • Run yarn add photoeditorsdk@5.19.7.
  • Copy the assets folder from node_modules/photoeditorsdk to public.

Creating an Editor component#

Use the rails to generate the scaffold for your controller.

rails generate controller home index

Then file can be accessed with http://localhost:3000/home/index.

app/views/home/index.html.erb
<!-- PESDK Demo Integration -->
<div
  id="pesdk"
  style="width: 100vmin; height: 75vmin; padding: 0px; margin: 0px"
></div>
app/javascript/packs/application.js
...
import { PhotoEditorSDKUI } from 'photoeditorsdk'


window.onload = function () {
  PhotoEditorSDKUI.init({
    // Please replace this with your license: https://img.ly/dashboard
    license: '',
    container: '#pesdk',
    image: './example.jpg'
  })
}
...

CORS#

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. Otherwise, you will see errors such as

Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at [...] may not be loaded.or Unable to get image data from canvas because the canvas has been tainted.

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

Ready to go!#

There you have it. PhotoEditor SDK for the Web is ready to use. Refer to the configuration documentaion for more configuration options.