Introduction

photocn has two parts. The photocn npm package is the engine: WebGL filters, a render worker, EXIF reading and writing, edit history, and a headless React controller. The registry holds the UI: shadcn-styled components that the shadcn CLI copies into your project. The engine gets updates from npm, and the UI stays yours to edit.

Three ways to use it

• The full editor. <ImageEditor /> is the complete app: toolbar, canvas, tool switcher, histogram and every panel. Guide →
• Lego pieces. Each panel and control is its own registry item and reads the nearest <ImageEditorProvider>. Guide →
• Headless. useImageEditorState() plus a canvas, and nothing else. Guide →

What's inside

• Light, color and effect adjustments
• RGB and per-channel curves over a live histogram
• 13 filter presets (3D LUTs and color matrices)
• Crop, aspect ratios, rotate, flip, perspective, resize
• Bokeh and gaussian lens blur with a focus point
• Blend a second image
• Undo/redo with slider drags merged into one step
• Hold to compare with the original
• Rendering in a Web Worker on an OffscreenCanvas
• Display-P3 aware; PNG, JPEG (with EXIF) and WebP export
• Recipes: save a look as JSON and re-apply it
• Cmd+K command menu