Getting Started

Install and set up the Editx Image Editor in your React project.

Installation

pnpm add @editx/image-editor

Peer dependencies: react >= 19, react-dom >= 19.

CSS setup

Editx is styled with Tailwind CSS 4 and uses CSS Container Queries for responsive layout. In your project's main CSS file:

@import "tailwindcss";
@import "@editx/image-editor/styles.css";

@source "../node_modules/@editx/image-editor/dist";

The @source directive tells Tailwind to scan the editor's compiled output for utility classes. Without it, container query variants like @xl/editor: won't be generated and you'll see mobile styles on desktop.

Note: The path must point to dist, not src — only dist is included in the published package.

Basic usage

Render the editor inline at any size:

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

function App() {
  return (
    <ImageEditor
      src="/photo.jpg"
      onSave={(blob) => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = "edited.png";
        a.click();
      }}
    />
  );
}

Wrap the editor in a modal for overlay-style editing:

import { useState } from "react";
import { ImageEditorModal } from "@editx/image-editor";

function App() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Edit Image</button>
      <ImageEditorModal
        open={open}
        onOpenChange={setOpen}
        src="/photo.jpg"
        onSave={(blob) => console.log("Saved:", blob)}
        onClose={() => setOpen(false)}
      />
    </>
  );
}

Next steps