Introduction

Editpix is an embeddable JavaScript image editor SDK. Ship crop, rotate, filters, annotations and resize in one afternoon — no canvas math required.

Editpix exposes a small surface: a React component, a Vue component, and a vanilla EditpixEditor.mount() function. All three share the same props and lifecycle events, so docs and muscle memory transfer cleanly between stacks.

Installation

Pick the package that matches your framework.

# React
npm install @editpix/react

# Vue 3
npm install @editpix/vue

# Framework-free (HTML)
# no install — use the script tag

Quickstart

The minimum viable integration is an API key, an image URL, and a onSave handler. Editpix hands you a Blob when the user clicks Save — you upload it wherever it belongs.

import { EditpixEditor } from "@editpix/react";

export function AvatarEditor({ photo }: { photo: string }) {
  return (
    <EditpixEditor
      apiKey={process.env.NEXT_PUBLIC_EDITPIX_KEY!}
      imageUrl={photo}
      options={{
        aspectRatios: ["1:1", "4:3"],
        filters: true,
        annotations: false,
      }}
      onSave={async (blob) => {
        const form = new FormData();
        form.append("file", blob, "avatar.png");
        await fetch("/api/avatar", { method: "POST", body: form });
      }}
      onClose={() => console.log("user cancelled")}
    />
  );
}

How licensing works

At mount time the editor calls GET /api/verify-license?apiKey=…&domain=…. If the requesting origin is listed on the license, the editor renders. If not, a clear error shows in place of the canvas. You can rotate keys any time from the dashboard.

What’s next

• Framework guides for React, Vue, Next.js and plain HTML
• The complete API reference covering every prop, event and option
• A customization walkthrough showing CSS variables, i18n strings and tool visibility controls