Use as a Web Component

Register <editx-image-editor> once and drop it into any HTML — no framework, no build step. Works in plain HTML, a CMS, or inside Vue/Svelte/Angular templates.

When to use this

  • You want the simplest possible embed: an HTML tag.
  • You're working in a CMS or template system without a bundler.
  • You need the editor inside another framework's markup without adapters.

Register and embed

import { defineImageEditorElement } from "@editx/image-editor/element";
import "@editx/image-editor/styles.css";

defineImageEditorElement(); // registers <editx-image-editor>
<editx-image-editor src="/photo.jpg" width="900px" height="600px"></editx-image-editor>

Simple inputs are attributes (src, width, height). Complex inputs are JS properties, and save/close are dispatched as DOM events:

const el = document.querySelector("editx-image-editor");
el.config = { tools: ["crop", "adjust"] };
el.addEventListener("save", (e) => upload(e.detail.blob));

The element uses light DOM (not Shadow DOM) so Radix portals and global Tailwind styles keep working. It mounts on connect and tears down automatically when removed from the DOM.

Try it

The editor below is a live <editx-image-editor> custom element:

Next steps

Verified by tests/guides/web-component.spec.tsx in the @editx/image-editor package.