Kutni Photoshop: Browser-Based Image Editing

"A fully functional image editor with layer management, text integration, and brush rendering, built in one HTML file"

I built a browser-based image editor called Kutni Photoshop. It runs entirely in the browser with no server, no plugins, and no downloads. Open the HTML file and you get a Photoshop-like interface with tools, layers, adjustments, and a canvas.

The goal was to understand how image editors work under the hood. Not just filters, but the whole system: how layers stack, how brushes paint pixels, how text renders on a canvas.

WHAT IT CAN DO:

The app has a full toolbar with move, selection, crop, text, and brush tools. The canvas renders images at any zoom level. The layers panel lets you add, remove, reorder, and adjust opacity for each layer.

The adjustments panel includes exposure, contrast, and brightness controls. The histogram updates in real time as you make changes. You can add text layers, move them around, and resize them.

The brush tool paints directly on the canvas. You can adjust size and hardness. The results show up immediately in the viewport.

THE TECHNICAL SIDE:

Everything is in one HTML file. The CSS builds the dark Photoshop-like interface with panels, toolbars, and menus. The JavaScript handles all the image processing.

I used the Canvas API for rendering. Each layer is a separate canvas element. When you make changes, only the affected layer redraws. The final output composites all layers together.

The UI uses CSS Grid and Flexbox for the panel layout. Menu bars, tool options, and property panels all update based on the current tool and selection. Keyboard shortcuts mirror Photoshop conventions.

WHAT I LEARNED:

Layer systems are about compositing order. Each layer sits on top of the one below it. Opacity controls how much of the lower layer shows through. Getting that stack right is half the work.

Brush rendering needs careful pixel manipulation. Each stroke writes to the canvas at the cursor position with the current brush settings. Too many draws per frame and the browser bogs down.

The full working example is on JSFiddle. Load an image and start editing.

Built by Samin Sami | Developer & 3D Experimentation