Image Ultra

Try it

This is the real package, @image-ultra/react, running inside this page. Edit the sample photo or open your own; nothing is uploaded.

The problem

Almost every app ends up needing an image editor: a profile photo to crop, a screenshot that needs an arrow and a blurred email address, a product photo to brighten before it goes live. The options I found didn't fit: I wanted a component that's free in any project, typed end to end, easy to make look like my own app, and ready for Next.js without workarounds. So I built one.

What I built

• Every tool you expect: crop with aspect presets, rotate, straighten and perspective; brightness, curves, levels and white balance; filters and saved looks; arrows, shapes, text and images with layers; redaction (blur or pixelate); stickers, frames, watermarks; resize and export as JPEG, PNG or WebP.
• Five lines to a full editor: npm install @image-ultra/react, import ImageEditor and its stylesheet, and render it. It works as-is in a Next.js App Router page.
• Every edit is JSON, not pixels. The original photo is never changed. Edits are a small serializable EditState, so users can reopen an edit exactly where they left off, and apps can re-render the image at another size later.
• Fast with big photos: WebGL2 with a Canvas2D fallback. Sliders update in the same frame; very large photos preview from a smaller copy and export at full size, in tiles when they're bigger than the GPU can hold.
• Yours to theme: every colour, radius and size is a CSS variable in a cascade layer, plus a typed themeOverrides shortcut. The editor above uses this portfolio's accent colour.
• Built for everyone: keyboard and screen reader support, reduced motion, translatable typed labels and right-to-left layouts, tested with axe against WCAG 2.2 AA.

A bug I shipped, and what it taught me

Before announcing a release, I install it from npm into a brand-new app. For 0.1.0 that check found a bug my tests had missed: in a fresh create-next-app, the editor looked squashed. All of its CSS lives in @layer image-ultra, so your CSS wins without !important, but unlayered CSS beats every layer. The starter's * { padding: 0; margin: 0; } reset won.

The fix was one unlayered rule: .iu-root :where(*) { all: revert-layer; }. It shipped in 0.1.1 a few hours later, with a test that injects the create-next-app and Tailwind resets and checks nothing moves. Installing from npm into a fresh app is now a fixed step of every release.

Impact

• 300+ downloads on npm in the first week.
• 60 fps editing with 48MP photos, on desktop and on iPhone.
• A few kilobytes of JSON per edit instead of a new copy of every version.
• Free and MIT licensed, on npm, with docs and a theme playground.