Sourcerepo

Photo

A photo editor in plain TypeScript: crop, turn, flip and straighten, adjust and looks, draw, write and hide, with undo, and the picture back as a file. MIT, no dependencies.

Status
Open source
Language
TypeScript
License
MIT
Updated
Oct 2026
GitHub
A MacBook and an iPhone running the editor in Safari: on the MacBook, a square crop is pulled in at a corner and straightened, the picture is warmed and given the Punch look, an arrow and the word gm are added, and holding compare shows the original; on the iPhone, the Noir look, a brighter picture, a pen loop, a 4:5 crop and a quarter turn

A photo editor for the browser. Crop to a free or fixed shape, turn, flip and straighten; adjust the light and colour or pick a look; draw, point, box, write and hide parts of the picture. Every change can be undone, and Done hands back the picture as a file. Tools like this are usually sold as yearly licences; this one is MIT licensed, plain TypeScript, with no dependencies.

Install

Clone
git clone https://github.com/drkxbt/photo
Install
npm install github:drkxbt/photo
Use
const blob = await editPhoto(file)

Features

  • Crop free or to a shape, turn, flip, and straighten with the crop kept on the picture
  • Brightness, contrast, saturation and warmth, and seven looks previewed on your own crop
  • Pen, arrow, box, ellipse, text, and blocks that hide what should not be seen
  • Every change undoable, a drag as one step, and a hold to compare with the original
  • The same pixels in the preview, the file and every browser; runs under a strict Content Security Policy

How it works

  • Quarter turns and flips are a 2×2 matrix, multiplied in the order they were made, so a flip after a turn mirrors what is on screen; the crop and every mark move with the picture.
  • Straightening solves, for each corner of the crop, the largest scale about its middle that keeps it on the tilted picture, and takes the smallest.
  • A crop drag that would leave the picture is cut back by a binary search to the last point that fits, and a move goes across, then down, so it slides along an edge.
  • Adjustments are worked on the pixels with one lookup table for brightness and contrast, so the preview, the file and every browser agree; hiding averages blocks so nothing under them survives.
  • Every edit is plain data, so it can be undone step by step, saved and opened again later.

Where it shows here

Only in its own demo for now: drk.vc has nothing for visitors to upload.

Screenshots

  • On the MacBook, the crop is set to square, a corner is pulled in, and the picture is straightened while the crop stays on it
    CropSquare, pulled in, straightened
  • Warmth and saturation sliders fill out from the middle as the picture warms, then the Punch look is picked from previews of the crop
    AdjustWarmer, then a look
  • An arrow is drawn onto the picture and the word gm is written beside the penguin
    DrawAn arrow and a word
  • Holding compare shows the original picture until it is let go
    CompareHold to see the original

Stack

  • TypeScript
  • Canvas 2D
  • Pointer Events
  • Node test runner

Run it locally

git clone https://github.com/drkxbt/photocd photonpm installnpm run demo