TutuEdit · Embeddable widget

One line of code —add an image editor to your site in seconds

Embed TutuEdit's pro editor (crop / filters / cutout / text) into any website. Visitors edit photos right on your site; configure theme and tools, and product updates apply automatically with zero maintenance.

Try it live View embed code Generate a key (no review)

Copy-paste ready · paste it before your site's </body>

<script src="https://tutuedit.com/embed.js"
        data-key="pk_live_YOUR_KEY"
        data-mount="#dd-editor" defer></script>

Replace pk_live_YOUR_KEY with the public key you self-generate in the console (any registered user — no review, instant); the container #dd-editor needs a width and height. When embedding, register your embed URLs (allowlist; for local dev use localhost); it only displays on the sites you've registered.

Try it live

Tap the button below to try the embedded image editor right on this page.

JS API (for callbacks / customization)

<script src="https://tutuedit.com/embed.js"></script>
<script>
  const dd = TutuEdit.mount('#dd-editor', {
    key: 'pk_live_YOUR_KEY',
    theme: 'auto',            // auto | light | dark
    onSave: (file) => {
      // file.dataUrl = the edited image (base64)
      upload(file.dataUrl);
    }
  });
  dd.open('https://your.site/photo.jpg'); // open an image
</script>

Full configuration

Parameter	Type	Description
key	string	Your pk_ public key (generated in the console). Required.
theme	'auto'\|'light'\|'dark'	Theme; auto follows the host/system light or dark mode.
hideToolbar	boolean	Hide the left toolbar (minimal-view / one-tap export scenarios).
hideHeader	boolean	Hide the top bar (when you build your own UI and export via export()).
hideOpen	boolean	Hide the “Open image” button (only allow images via dd.open).
hideExport	boolean	Hide the “Export & download” button (use “Done & send back” only).
saveText	string	“Done” button label (default “Done & send back”, ≤16 chars).
exportFormat	'png'\|'jpg'\|'webp'	Export format on completion.
exportQuality	number 0..1	JPG/WebP quality.

Methods

dd.open(url, name?)Open an image in the editor (url or dataURL).
dd.export(format?, quality?)Export the current result → Promise<{dataUrl,mime,size}>.
dd.setTheme('dark')Switch theme at runtime.
dd.destroy()Unmount the widget (removes the iframe).

Event callbacks

onReady()Editor is ready.
onSave(file)User taps “Done” → file.dataUrl is the edited result.
onError(e)e.message is human-readable (disabled / unauthorized / load failed).
onClose()The fullscreen overlay was closed.

Security · Auto-updates

· Self-serve, auto-approved: any registered user registers a site name + embed URL in the console to get a key, effective instantly.
· The public key is public; it's protected by registered-URL allow/block lists against misuse (blocklist wins); requests from unregistered domains are rejected with a prompt to register; toggle on/off anytime.
· Real-origin analytics: every load is counted by Origin (blocked ones too); the console shows a per-origin breakdown, and unregistered domains can be allowlisted in one tap.
· The editor runs on TutuEdit's own domain (isolated); your page can't access any TutuEdit credentials, and visitors' private TutuEdit works never appear in the widget.
· The widget is self-hosted and auto-updated by TutuEdit — feature upgrades need no code changes on your side, zero maintenance.