Pixo Image Editor

Integrating Pixo into native iOS and Android apps with Flutter

Although Pixo Editor does not provide native SDK for iOS, Android, or Flutter, it can be easily integrated into a native application, thanks to the WebView component, supported by both platforms. All you need is an embedded HTML page that integrates Pixo, a WebView instance rendering that HTML page, and a communication controller. Here is the flow:

  1. Any Image is converted to base64 string
  2. The WebView component renders a static HTML page that integrates Pixo
  3. The static HTML page gets the base64 string and opens it in Pixo
  4. The onSave callback of the Pixo.Bridge instance sends back the edited image as base64 string as a JavascriptChannel
  5. The base64 string is converted to Image

Here is a short video showing the end result:

You can check the source code of the above example in our public GitLab repo.

If you are interested into a fully native iOS app integrating Pixo with Swift, check out this post.

Example: Watermark

A watermark is a logo, a piece of text or signature imposed onto an image. Watermarks are typically transparent, so those viewing the image can still admire it. Watermarking images can also protect the copyright – ensuring others don’t use the image without the owner’s permission.

With this example you’ll learn how to impose watermarks on end-user’s images – a simple text. You can also insert custom sticker images as watermarks.

Everything you need to do is to:

  1. Overwrite the default Save action, in order to insert the watermark when the end-user clicks “Save”, using the Custom Actions API;
  2. To insert the text watermark before saving the image, using the Text Editing API.

The example is available in JSFiddle.

Happy coding!

Editing API

Our Editing API is finally out now! With it, you can manipulate images server-side. It supports most of the features of the Editor, and guarantees you the exact same result as if the image was edited in Pixo Editor.

Check out the Editing API documentation page for more info.

Single API key

You can use both the Editing API and the client-side Image Editor with the same API key. You can, of course, create new API key for server-side projects. But it will require a new subscription.

API keys can be protected both by domain and IP address.


There are a couple of features to be added soon:

  • Background API – remove background, or replace it with solid color or another image
  • Drawing shapes
  • Free drawing


The Editing API is not available for FREE accounts.

We wish you a happy New year

This project was the biggest one for this year. We are very happy that we managed to release it, even though in the very last day of 2021. The past two years were extremely hard for all of us. Let’s hope that 2022 will be a much better one. We will continue our work on exciting new features. Stay healthy, and have a happy New 2022!

Background tool

We’re extremely happy to announce a new feature we’ve been working on for quite so long! Let us present to you our new exciting end-user tool – Background!

Removing background of images using machine learning (ML) is very popular these days. Our brand new Background tool does exactly this. But that’s not all! End users can not only remove the background of photos, but also can replace it with a solid color, or with another background image. They can browse a rich stock image collection (powered by Unsplash) as well as to upload their custom image to be used as a background of the edited photo.

Removing the background

Background removing is possible thanks to ML. This is expensive operation and takes some time, usually a couple of seconds. During this time end users see a progress message.

Is it a Premium feature?

Yes. The Background tool is a Premium feature, which means that it is available in all paid subscriptions as well as during trial period. FREE accounts do not have access to this tool.

Will it cost extra?

At the moment of the release – no. However, down the road we may decide to make this feature cost extra, one way or another – either apply some pay-per-use, or create extra subscription plans on top of the current ones.

Will I get extra charged without notice?

Definitely not! If we ever decide to make the Background tool cost extra, you will have the choice to upgrade your subscription and start using it, or to keep your current plan and not use the Background tool respectfully.

We wish you a Merry Christmas…

…and a Happy New Year! As usual, our Christmas Stickers pack is now available to end users.

Be well and thanks for choosing Pixo!

Object order controls

We are happy to announce that we finally implemented z-order controls in Pixo! These controls allow your end users to change the z-order of every object (Text, Sticker, Shape):

  • move it to the very top
  • move one level up
  • move one level down
  • move it to the very bottom

Many users were asking us for this feature. Hope you all enjoy it!

Performance optimizations

After the announcement that we dropped support of Internet Explorer, we did a code clean-up, removing all polyfills and compatibility code blocks. As a result, our integration file bridge.m.js (the one that you include in your web pages) got reduced with 21%, and the script resources that are loaded when the Editor is opened got reduced with 10.5%.

Also, we noticed from our logs that some customers were experiencing huge load delays. Sometimes the Editor took 5+ seconds to load. We investigated the delay, did some server optimizations, and now every customer should open the Editor in less than a second.

We are monitoring performance constantly, and we constantly work to make Pixo blazingly fast, for better user experience.

Integrating Pixo into a native iOS app

Although Pixo Editor does not provide native SDK for iOS, it can be easily integrated into a native application, thanks to the WKWebView component. All you need is an embedded HTML page that integrates Pixo, a WKWebView instance rendering that HTML page, and a communication controller. Here is the flow:

  1. Any UIImage is converted to base64 string
  2. The WKWebView component renders a static HTML page that integrates Pixo
  3. The static HTML page gets the base64 string and opens it in Pixo
  4. The onSave callback of the Pixo.Bridge instance sends back the edited image as base64 string as a WKScriptMessage
  5. The base64 string is converted to UIImage

Here is a short video showing the end result:

You can check the source code of the above example in our public GitLab repo. The demo uses the Image Picker developed by AppCoda.

Happy coding!

Our brand new Editing API is now available

We’re really happy to announce the official release of our most wanted and long awaited Editing API! It is available right now!

You can check our Editing API docs and see what can be done via this API. Basically it allows you to programmatically manipulate Pixo Editor and the image. You can define settings in each Feature’s Property Panel; or you can manipulate the image, by inserting stickers, text, or applying a filter, shape or frame.

The magic happens thanks to the new exec method of Pixo.Bridge.

You can check the API docs, or you may have a look at this example in order to see the new Editing API in action. In the example you will see Pixo Editor with hidden internal controls (Actions Menu, Edit Menu, Property Panel); instead, the end user is able to draw on the image and crop it from external controls that live in your application!

The Editing API is something that will be constantly extended with new cool API commands. Stay tuned for updates!

Pixo will not support Internet Explorer anymore

Although Internet Explorer browser is no longer supported by the majority of the web, we took the hard decision to continue supporting it, because we had few users on it. But for the past 3 months our stats show zero traffic from Internet Explorer, and although Microsoft will officially say goodbye to IE on August 17, 2021, we think that we are safe to drop Internet Explorer support right now.

Effective from May 1, Pixo Editor will no longer support Internet Explorer. 

Will this affect you

This will not affect you by any reason, because according to our statistics Pixo has zero traffic from Internet Explorer from the past 3 months.

What’s next

We will start removing IE-compatibility code from Pixo’s codebase step by step. As a result, Pixo Editor will become faster & more performant.

Happy browsing!

Create templates and apply them to users’ images

Pixo supports templates for quite some time. But we were getting so many support questions how do they work and how they can be used. Therefore, we decided to make this quick tutorial.

Pixo Templates are actually a pre-defined set of actions that will be applied to end users’ images when they open Pixo Editor. In other words, a template may apply a filter, or adjust colors, or add a frame or shape, or insert a sticker. Basically anything that the regular end-user may do. The difference is, the end user does not have to do that. If your Pixo instance is properly configured to use a template, this template will be applied to the end user’s image when s/he opens Pixo.

How does the template look like

The Template is basically a JSON data. You can export every edited image in Pixo as a JSON:

new Pixo.Bridge({
   apikey: 'apikey',
   onSave: function (image) {

How to create a Template

You will have to configure locally a Pixo instance (which should not be available to your end-users!) and use it to open a placeholder image, make changes, and export it as a JSON.

How to pass this Template JSON to your end users

You should keep this JSON in your database (NB: it may be large!) and serve it via API, or have your server print it as a JavaScript object in the HTML of your pages. Then, you need to pass an object to Pixo’s edit method, containing the following properties:

  • template – that’s the Template JSON
  • src – that’s the end user’s image, which can be url or a dataurl string
const template = { ... };
new Pixo.Bridge({
   apikey: 'apikey',
}).edit({ template, src: 'https://via.placeholder.com/320x240.jpg' });

How does it work

When the template and the user’s image are opened in Pixo, the placeholder image in the template gets replaced with the end user’s image, and all changes are smartly replicated to the user’s image, taking into consideration dimensions and aspect ratio.


For the demo, we are using the localStorage to save the template (no back-end) for simplicity. There are two instances of Pixo:

  1. Template Creator (open in JSFiddle) – this instance should be locally instantiated on your dev environment and should be used for creating & saving templates
  2. Template Consumer (open in JSFiddle) – this is the official instance for your end user, which consumes the templates created by the Creator

If you still have questions…

…then do not hesitate to post a comment here or contact us via our Contact Form.

Happy coding!