# photocn

> Photo editor components for React, installed with the shadcn CLI. Use the full editor, compose the pieces, or use the headless useImageEditor hook. WebGL rendering in a worker, non-destructive crop and transform, filters, curves, EXIF-preserving export.

Website: https://photocn.dev
Registry: https://photocn.dev/r/registry.json (items at https://photocn.dev/r/{name}.json)

## Install

```bash
npx shadcn@latest init -b radix
npx shadcn@latest registry add @photocn=https://photocn.dev/r/{name}.json
npx shadcn@latest add @photocn/image-editor
```

```tsx
import { ImageEditor } from "@/components/image-editor/image-editor";

export default function Page() {
  return <ImageEditor className="h-dvh" src="/photo.jpg" />;
}
```

The editor is a client component. Files install into components/image-editor/; the engine is the `photocn` npm package (`photocn/react` for the hooks, `photocn/photo` for `createPhoto()` without React).

## Docs

- [Introduction](https://photocn.dev/docs.md): Photo editor components for React, built for shadcn/ui.
- [Installation](https://photocn.dev/docs/installation.md): Add photocn to a React project that uses shadcn/ui.
- [API Reference](https://photocn.dev/docs/api.md): The useImageEditor hook that every component is built on.
- [The full editor](https://photocn.dev/docs/editor.md): One component with every tool. Use it as is, or trim it down.
- [Compose your own](https://photocn.dev/docs/composition.md): Put the pieces you want into your own layout.
- [Headless](https://photocn.dev/docs/headless.md): Use the editor with your own UI and no photocn components.
- [Without React](https://photocn.dev/docs/without-react.md): Edit and export photos from plain JavaScript with createPhoto().
- [Saving edits](https://photocn.dev/docs/saving.md): Save the finished image, the edits, or both.
- [Crop & transform](https://photocn.dev/docs/crop-and-transform.md): How crop, straighten, perspective and rotate work together.
- [Using with AI agents](https://photocn.dev/docs/agents.md): Docs and install commands that coding agents can read.

## Components

- [Canvas](https://photocn.dev/docs/canvas.md): Shows the photo. In the crop tool it shows the crop frame, and everywhere else the edited result.
- [Toolbar](https://photocn.dev/docs/toolbar.md): The tool switcher, plus undo, redo, open, reset and compare buttons.
- [Adjustments](https://photocn.dev/docs/adjustments.md): Sliders for light, color and effects.
- [Filters](https://photocn.dev/docs/filters.md): 13 filter presets with a strength slider. 0% is the original photo.
- [Curves](https://photocn.dev/docs/curves.md): Tone curves for RGB and each color channel, drawn over a live histogram.
- [Crop](https://photocn.dev/docs/crop.md): Rotate, flip, aspect ratio, straighten and perspective. You crop by dragging the frame on the photo.
- [Blur](https://photocn.dev/docs/blur.md): Lens blur (bokeh or gaussian). Drag the dot on the photo to choose what stays sharp.
- [Blend](https://photocn.dev/docs/blend.md): Blend a second image into the photo.
- [Histogram](https://photocn.dev/docs/histogram.md): A live RGB histogram of the edited photo.
- [Metadata](https://photocn.dev/docs/metadata.md): File details and EXIF data for the open image.
- [Export](https://photocn.dev/docs/export.md): Choose the format, quality and size, then download or save.
- [Recipes](https://photocn.dev/docs/recipes.md): Save a look as JSON and apply it to any photo.
- [Command Menu](https://photocn.dev/docs/command-menu.md): Press ⌘K to search tools, undo, redo and filters.
- [Compact Layout](https://photocn.dev/docs/compact-layout.md): The phone layout: the photo first, tools at the bottom, and controls in a sheet.
- [Layout](https://photocn.dev/docs/layout.md): The desktop layout: a toolbar on top and a resizable sidebar.

## Blocks

- [Editor](https://photocn.dev/llm/editor): The full editor, filling the screen, with a ⌘K command menu. Install: `npx shadcn@latest add @photocn/editor`
- [Minimal editor](https://photocn.dev/llm/editor-minimal): Adjust, filters and crop, plus export. Nothing else. Install: `npx shadcn@latest add @photocn/editor-minimal`
- [Mobile editor](https://photocn.dev/llm/editor-mobile): Photo first, tools at the bottom, controls in a sheet. Install: `npx shadcn@latest add @photocn/editor-mobile`
- [Avatar cropper](https://photocn.dev/llm/avatar-cropper): Pick a photo, frame it in a square, save a 512px avatar. Install: `npx shadcn@latest add @photocn/avatar-cropper`
- [Upload editor](https://photocn.dev/llm/upload-editor): Drop a photo, edit it, then upload the result. Install: `npx shadcn@latest add @photocn/upload-editor`
- [Filter picker](https://photocn.dev/llm/filter-picker): A phone-style row of looks with a strength slider. Install: `npx shadcn@latest add @photocn/filter-picker`
- [Before / after](https://photocn.dev/llm/before-after): Drag to compare the original with the edit. Install: `npx shadcn@latest add @photocn/before-after`
- [Batch looks](https://photocn.dev/llm/batch-looks): Choose one look and apply it to many photos at once. Install: `npx shadcn@latest add @photocn/batch-looks`

## Optional

- [All docs in one file](https://photocn.dev/llms-full.txt)
- [Registry index](https://photocn.dev/r/registry.json)
- [Source on GitHub](https://github.com/rbbydotdev/photocn)