# OpenLight

> OpenLight is a free, open-source photo editor that runs entirely in the browser on WebGPU. Photos stay on the device. Every editing action is also exposed as a JavaScript API on `window.openlight`, so an AI agent with browser access can open, edit, and export images programmatically.

Site: https://openlight.app
About and how to use it: https://openlight.app/about
Source (MIT): https://github.com/roprgm/openlight

## Features

OpenLight is free to use with no account or upload, and works as an online alternative to desktop RAW editors for everyday photo editing.

- Adjustments: exposure, contrast, highlights, shadows, whites, blacks, white balance with auto, vibrance, saturation, tone curves, clarity, and sharpening.
- Color Mixer with eight hue, saturation, and luminance ranges, film grain, vignette, and 3D LUTs from `.cube` files.
- Effect layers with linear, radial, and brush masks, including pen pressure.
- Healing tool to remove spots and distractions.
- Crop, rotate, straighten, flip, and correct vertical and horizontal perspective.
- Opens JPEG, PNG, WebP, AVIF, GIF, BMP, SVG, HEIC, TIFF, and camera RAW/DNG files, and imports Camera Raw XMP settings.
- Exports PNG, JPEG, or WebP, and saves scenes to keep editing later.

## Using the API from a browser agent

Open https://openlight.app in a WebGPU-capable browser (recent Chrome, Edge, Safari, or Firefox). `window.openlight` is available once the page initializes. Load an image before editing or exporting. The UI and the API share the same document edits, so changes made by script appear in the interface and in undo history.

```js
const editor = window.openlight;
await editor.loadImage(file);                 // a File; loadUrl(url) fetches a same-origin or CORS URL
editor.setAdjustments({ exposure: 0.5, contrast: 10, highlights: -30, shadows: 20, vibrance: 15 });
editor.setToneCurve([{ x: 0, y: 0 }, { x: 0.25, y: 0.2 }, { x: 0.75, y: 0.8 }, { x: 1, y: 1 }]);
editor.addLayer("mask");                      // linear gradient mask; also "details", "exposure", "color-mixer", "vignette"
editor.setFrame({ ...editor.getState().frame, angle: 2 });
const jpeg = await editor.exportImage({ format: "jpeg", quality: 90 });  // returns a File
editor.getState();                            // scene, layers, history counts, selected layer
editor.undo(); editor.redo();
```

Adjustments use UI units: exposure in stops, other sliders in -100..100. RAW files expose `setWhiteBalance({ temperature, tint })`. Camera Raw XMP files import through `importXmp(file)`.

## Using WebMCP

In browsers with [WebMCP](https://webmachinelearning.github.io/webmcp/), such as Chrome 149 or later and ChatGPT's browser, the page registers tools on `document.modelContext`, so an agent can edit without scripting the page:

- `get-state` describes the open photo: size, frame, layers, and history.
- `open-image` opens an image from an http(s) URL the page can fetch; another origin must allow CORS. To open a local file, such as one attached to a chat, serve it over HTTP with CORS and pass its URL.
- One tool per editing command, such as `set-adjustments`, `add-mask`, `set-color-mixer`, `set-crop`, `undo`, and `set-preview`.
- `run-commands` runs several commands in one call.

## Reference

- [Control API](https://github.com/roprgm/openlight/blob/main/API.md): every command, its arguments, and the state shape.
- [README](https://github.com/roprgm/openlight/blob/main/README.md): features and supported formats (JPEG, PNG, WebP, AVIF, GIF, BMP, SVG, HEIC, TIFF, camera RAW and DNG).
- [Architecture](https://github.com/roprgm/openlight/blob/main/AGENTS.md): layers, ownership, and coding rules for contributors.
- [Domain vocabulary](https://github.com/roprgm/openlight/blob/main/CONTEXT.md): document, scene, layer, mask, and frame terms.