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
Preset galleries

Polished text and graphics in one click

Search curated presets, insert editable compositions, or supply your own brand catalog.

Create with rich styles, curved lettering, highlights, and editable layered compositions.

Loading...
Loading image...
Configure text presets
6
Editing tools · crop · adjust · filter · text · shapes · image
40+
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

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

Text

Rich styles, curved text, gradients, highlights, and editable layered compositions.

Shapes

Filled, outlined, gradient, image-filled, and abstract graphics with custom catalogs.

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.