https://github.com/ente-io/photo-editor-sdk
Open-source React photo editor component that's easily extensible.
https://github.com/ente-io/photo-editor-sdk
photo-editing photo-editor react
Last synced: 6 months ago
JSON representation
Open-source React photo editor component that's easily extensible.
- Host: GitHub
- URL: https://github.com/ente-io/photo-editor-sdk
- Owner: ente-io
- Created: 2023-10-18T03:21:26.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-11-05T16:14:38.000Z (almost 2 years ago)
- Last Synced: 2025-03-27T02:08:20.892Z (7 months ago)
- Topics: photo-editing, photo-editor, react
- Language: TypeScript
- Homepage: https://ente.io/blog/introducing-web-desktop-photo-editor
- Size: 810 KB
- Stars: 11
- Watchers: 5
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @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](https://ente.io), 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](https://ente.io/blog/introducing-web-desktop-photo-editor/) to see our photo editor in action.
## Install
```bash
yarn add @ente-io/photo-editor-sdk
```
## Usage
```tsx
import {
PhotoEditorPreview,
usePhotoColourAdjuster,
usePhotoTransformer,
PhotoEditorProvider,
usePhotoEditor
} from '@ente-io/photo-editor-sdk';
function App() {
const parentRef = useRef(null);
const [fileURL, setFileURL] = useState('/example-photo.jpg');
return (
);
}
const MyEditorComponent = () => {
const transformer = usePhotoTransformer();
const [photoColourAdjusterValues, setPhotoColourAdjusterValues] = useState({
brightness: 100,
contrast: 100,
blur: 0,
saturation: 100,
invert: false
});
usePhotoColourAdjuster({
values: photoColourAdjusterValues
});
const photoEditor = usePhotoEditor();
return (
<>
>
);
};
export default App;
```
### Caveats
- Due to constraints, performing colour adjustments _after_ transforms may produce adverse effects
## License
MIT © [ente-io](https://github.com/ente-io)