@ente-io/photo-editor-sdk

@ente/photo-editor-sdk

Open-source React photo editor component that's easily extensible.

• Leverages browser APIs for optimal performance
• Supports live previews and high-resolution exports
• Includes common tools like rotate, crop, filters
• Fully customizable styles and functionality
• Headless components for customized integration
• Free, open-source, and MIT licensed

Background

Team

We're ente, a secure photo backup and sync service. Support this library by checking out one of our paid plans.

Motivation

We developed our own photo editor for our web and desktop clients because existing editors did not meet our requirements for performance, scalability, and customizability. However, we realized many other developers likely face similar challenges in finding a suitable photo editing solution. Therefore, we decided to release our photo editing components as an SDK in order to help more developers implement powerful image manipulation tools without extensive research and development.

Example

Check out this blog post to see our photo editor in action.

Install

yarn add @ente/photo-editor-sdk

Usage

const MyComponent = () => {
  const transformer = usePhotoTransformer();
  const colourAdjuster = useColourAdjuster({
    brightness: 100,
    contrast: 100,
    blur: 0,
    saturation: 100,
    invert: false,
  }); // use states to programatically alter colours

  return (
    <PhotoEditorContext.Provider
      value={{
        fileURL: "blob:xxxx",
        sizeScale: 1,
      }}
    >
      <PhotoEditorPreview />
    </PhotoEditorContext.Provider>
  );
};

transformer.rotatePhoto(90);

License

MIT © ente-io