Built-in image editor

Editing images right in a browser is the closest path for your app to receive better images. And those, in turn, provide higher engagement rates and conversions. The quality of visuals becomes an even greater concern when you want to perfect images sent by your users before they get to your site or app.

File Uploader Editor

There are a dozen on-the-fly effects you can apply right away: crop, rotate, flip, adjust brightness, exposure, gamma, contrast, saturation, vibrance, warmth, apply photo filters, and just magical enhance.

How it works

Image operations available for application are based on our Image processing features. Editor outputs a CDN URL holding image UUIDs and operations applied by a user while editing in the form of URL directives.

Every image first gets to your Uploadcare storage. Then we show an image preview in the File Uploader dialog via a CDN URL provided on file upload. When a user applies image processing operations, we inject the corresponding URL directives. Once the editing is complete, editor outputs the new CDN URL which includes all the applied operations.

For example, if a user chooses to apply grayscale and clicks rotate once, here is what we will get in the output:


Note: The preview operation will appear in the output URL by default due to the image processing operation limitations.

Usage example

Image editor comes together with the File Uploader. Both Regular and Inline modes include a built-in cloud image editor.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uploadcare/blocks@{{__BLOCKS_VERSION__}}/web/lr-cloud-image-editor.min.css">

<!-- Script connection: -->
<script type="module">
  import * as LR from "https://cdn.jsdelivr.net/npm/@uploadcare/blocks@{{__BLOCKS_VERSION__}}/web/lr-cloud-image-editor.min.js";

  const callback = (text) => (event) => {
    console.log(`${text}`, event.detail);
    alert(`${text}. See results in console.`);
  const instance = document.querySelector('#my-editor');
  instance.addEventListener('apply', callback('Apply'));
  instance.addEventListener('cancel', callback('Cancel'));
  instance.addEventListener('change', callback('Change'));

<!-- CSS context properties: -->
  body {
    height: 100vh;
    width: 100vw;
    margin: 0;

<!-- Config element: -->
<lr-config ctx-name="my-editor"></lr-config>

<!-- Cloud image editor element with an image uuid -->

<!-- Cloud image editor element with an image cdn-url -->
Edit Docs: Cloud Editor basic example




Type: string

Defines the UUID of the image to be edited. The image must be stored in your Uploadcare project.


Type: string

Defines the CDN URL of the image to be edited. The image must be stored in your Uploadcare project. You can use the previous result from the editor for subsequent actions. All transformations supported by the editor will be processed, and those not supported will be cut out.


Type: string

Defines the crop behavior. Expected format: 'width:height'. For example, '1:1' stands for the square crop. Empty string '' means free crop.


Type: comma separated string

Defines the list of tabs in the cloud image editor. Order matters.
Available values:



Type: CustomEvent<ApplyResult>

export type Transformations = {
  enhance?: number | undefined
  brightness?: number | undefined
  exposure?: number | undefined
  gamma?: number | undefined
  contrast?: number | undefined
  saturation?: number | undefined
  vibrance?: number | undefined
  warmth?: number | undefined
  rotate?: number | undefined
  mirror?: boolean | undefined
  flip?: boolean | undefined
    | {
        name: string
        amount: number
    | undefined
    | {
        dimensions: [number, number]
        coords: [number, number]
    | undefined
export type ApplyResult = {
  originalUrl: string
  cdnUrlModifiers: string
  cdnUrl: string
  transformations: Transformations

Fires when a user clicks the Apply button. Returns an object with the following properties:

  • originalUrl — the original image URL (without any URL derectives applied)
  • cdnUrlModifiers — the URL directives applied by a user
  • cdnUrl — the URL of the edited image
  • transformations — the object with the applied image processing operations


Type: CustomEvent<ChangeResult>

export type ChangeResult = {
  originalUrl: string
  cdnUrlModifiers: string
  cdnUrl: string
  transformations: Transformations

It fires when a user applies any transformation. The payload signature is the same as for apply event.


Type: CustomEvent<void>

Fires when a user clicks the Cancel button.