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

   	{
   	"dependencies": {
   	"@pixlrlte/pixlr-sdk": "^1.3.1"
   	}
   	}

   view raw package.json hosted with ❤ by GitHub
4. Add an iframe and file input field to your html file

   	<iframe id="your-iframe-id" src="about:empty"></iframe>
   	<input type="file" id="your-file-input-id" />

   view raw intro.html hosted with ❤ by GitHub
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.

   	import { Editor } from 'pixlr-sdk';
   	const frame = document.getElementById('your-iframe-id');
   	const fileInput = document.getElementById('your-file-input-id');
   	let editor;
   	fileInput.addEventListener('change', async (event) => {
   	const files = event.target.files;
   	if (files.length > 0) {
   	const file = files[0]; // Use the first file for this example
   	if(!editor) {
   	// Connect to the Pixlr editor
   	editor = await Editor.connect('your-jwt-token', frame);
   	}
   	// Open the file in the editor
   	for await (const newFile of editor.open(file)) {
   	// Handle the updated file
   	// For example, display the edited image on your page
   	}
   	}
   	});

   view raw intro.js hosted with ❤ by GitHub