HTML / script tag

No bundler? No framework? Drop a single script tag on any page and mount the editor against a container.

Include the script

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="https://editpix.dev/editpix.css" />
  </head>
  <body>
    <div id="editor" style="height: 640px;"></div>
    <script src="https://editpix.dev/editpix.js"></script>
    <script>
      EditpixEditor.mount("#editor", {
        apiKey: "pk_live_3f2d9c…",
        imageUrl: "/products/hero.jpg",
        options: {
          aspectRatios: ["free", "1:1", "16:9"],
          filters: true,
          annotations: true,
        },
        onSave: async (blob) => {
          const form = new FormData();
          form.append("file", blob, "hero.png");
          await fetch("/api/upload", { method: "POST", body: form });
        },
        onClose: () => console.log("closed"),
      });
    </script>
  </body>
</html>

Programmatic control

EditpixEditor.mount() returns an instance with destroy(), setImage(url) and exportBlob().

app.js

const editor = EditpixEditor.mount("#editor", config);

document.querySelector("#reset").addEventListener("click", () => {
  editor.setImage("/products/hero.jpg");
});

document.querySelector("#save").addEventListener("click", async () => {
  const blob = await editor.exportBlob({ format: "image/jpeg", quality: 0.92 });
  await upload(blob);
});

window.addEventListener("beforeunload", () => editor.destroy());

Self-hosting the script

Want to serve editpix.js from your own CDN? Scale plan customers get a signed bundle download + SRI hashes from the dashboard.