Embedding Pixlr Applications client side

Embedding Pixlr Applications into your own applications allows you to seamlessly integrate powerful image editing features into your products. This is done by opening the Pixlr Application in an iframe and using postMessage to communicate between the page and the iframe.

While it is possible to directly communicate with the Pixlr Application through internal protocols, we highly recommend using the official Pixlr npm package for a more stable integration experience.

Quickstart example

1. Make sure you have an API key and secret.
   An API key and secret can be created under the Developer tab in My Account.

2. Validate that you can generate a JWT token.

   Use your API key in the sub field and sign the token using API secret.

   JWT tokens should only be generated on the server-side to avoid leaking credentials!

3. Add the official Pixlr npm package to your package.json
4. Add an iframe and file input field to your html file
5. Import the Pixlr SDK and have it open a Pixlr Application in the iframe.
   Use the file input to open a local image file in the application.