Open source · MIT licensed

EditxFramework-Agnostic JavaScript Image Editor

Drop a full-featured image editor into any app — it's framework-agnostic, so reach for it with vanilla JS, React, or as a Web Component. Crop, adjust, filter, and annotate with text & shapes, on an extensible, themeable block engine.

pnpm add @editx/image-editor
Framework-agnostic·TypeScript·Konva 10·Tailwind CSS 4·Fully Themeable
Live demo

Try it right here

Edit a real photo with the full editor. No setup required.

Loading...
Loading image...
6
Editing tools · crop · adjust · filter · text · shapes · image
30+
Filter presets · WebGL-accelerated
MIT
Open source · free forever · no lock-in
Features

Everything you need

Crop & resize

Aspect ratio presets, free crop, rotate, flip, and social media resize presets.

Adjustments

Brightness, contrast, saturation, exposure, temperature, and more.

Filters

30+ filter presets with adjustable intensity, WebGL-accelerated.

Text

Rich text annotations with fonts, colors, and formatting via Lexical.

Shapes

Rectangles, ellipses, lines, arrows, polygons, stars — filled or outlined.

Image overlays

Add image annotations on top of your canvas.

Undo / redo

Full command-based history with keyboard shortcuts.

Themeable

Dark, light, and fully custom color themes with CSS variables.

Why Editx

More than a component

Open source & MIT

No per-seat fees, no vendor lock-in. Fork it, ship it, own it.

A real engine underneath

A thin UI over a headless, framework-agnostic block engine. Build your own UI or extend ours.

Extensible by design

Register custom tools, render slots, and event hooks — no forking required.

Non-destructive

Every edit is a command: fully undoable, replayable, and serializable.

Quick start

Up and running in minutes

Add an image editor to any app with a few lines of code.

1Install
pnpm add @editx/image-editor
2Import
import { ImageEditor } from "@editx/image-editor";
3Use

Add <ImageEditor> to your component, pass a src and an onSave callback.

import { ImageEditor } from "@editx/image-editor";

function App() {
  return (
    <ImageEditor
      src="/your-image.jpg"
      config={{
        tools: ["crop", "adjust", "filter", "text", "shapes"],
        theme: { preset: "light" },
      }}
      onSave={(blob) => {
        const url = URL.createObjectURL(blob);
        console.log("Saved:", url);
      }}
    />
  );
}

Ready to build?

Add a powerful image editor to any app in under 5 minutes.