Playground
Embed Editor Playground
Customize the image editor and watch it change live: the edition, a photo, your colors and logo, the tools, the crop, the output and the marks. Then copy the code for React, Next.js, Vue, Angular, Svelte or HTML, with the steps to install it.
How It Works
From the options you pick to the code you paste.
- 1
Customize
Choose the edition, a photo or your own, the colors, your logo, the tools, the crop, the output and the marks. The editor beside them changes as you go.
- 2
Copy the Code
The code for your framework holds only the props you changed, in the package of the edition you picked, with an onProcess that receives the saved file.
- 3
Install
Free installs from public npm. Lite and Full install from the private registry with your license key.
FAQ
Playground Questions
Is the preview the real editor?
Yes. Free and Lite run the Free build, and Full runs the Trial build: the Full edition with the embededitor.com badge. Lite is the Free without the badge, and a license takes the badge off the Full.
Why are some options off on Free and Lite?
Free and Lite are the Adjust editions: crop, aspect ratio, zoom, focus, flip, rotate and straighten, plus everything that isn't a tool. The Full options stay in the list, switched off, and keep what you set for when you pick Full again. In your code, a prop for a tool the edition doesn't have is accepted and does nothing.
Does every change apply live?
Every prop applies live, in the playground as in your app. The photo is read when the editor opens, so a new photo, or a new edition, opens the editor again.
Where do my photo and logo go?
Your photo stays in your browser, always. Your logo and mark images do too, until you press Share Link: then they are uploaded (a PNG, JPEG, WebP or SVG of up to 1 MB each) so the link shows them, kept for 90 days and then deleted. A link never carries your own photo; it opens on the default one. In the code, your logo and mark images become files in your public folder, such as logo='/acme-logo.svg', never a link to our servers. Every other setting lives in the page's address, so a reload keeps it.
Which frameworks does the code cover?
React 18.3 or 19, and Next.js, through the React entry. Vue, Angular, Svelte and plain HTML through the standalone entry, which carries React inside. There is no CSS to import.
Free is on npm. Every tool comes with a license.
Licenses are yearly, by project, with unlimited developers.