rmvbg Web SDK · v1.0.0

Add background removal to your website

Two lines of code give your visitors a background remover. The finished PNG comes straight back to your page — free, no API key, photos never uploaded.

Two lines

One script tag and one button. Works with any site, shop or form.

Private by design

Cut out on the visitor's device. Your page only gets the finished photo.

Real JavaScript API

Promises, events, Blob + File results, or run the engine yourself.

Try it here

This button uses the real SDK

It opens the rmvbg pop-up exactly as it would on your site. Pick a photo, then press "Use on rmvbg.xyz" to send it back to this page.

The finished photo will appear here.

1. Pop-up widget

Paste this into your page. Clicking the button opens the rmvbg pop-up; the visitor picks a photo, removes the background, and the PNG lands in your file input, ready to submit with your form.

HTML · quickest start

<script src="https://rmvbg.xyz/sdk/v1/rmvbg.js" defer></script>
<button data-rmvbg data-rmvbg-target="#photo">Remove background</button>

A fuller example — start from the photo the visitor already chose, and show a preview:

HTML

<input type="file" id="photo" name="photo" accept="image/*">
<img id="preview" alt="">

<button
  data-rmvbg
  data-rmvbg-image="#photo"
  data-rmvbg-target="#photo"
  data-rmvbg-preview="#preview"
  data-rmvbg-background="white">
  Remove background
</button>

<script src="https://rmvbg.xyz/sdk/v1/rmvbg.js" defer></script>

Button attributes

Attribute	What it does
data-rmvbg	Makes the element open the pop-up when clicked.
data-rmvbg-image	CSS selector of a file input or <img> whose photo is sent to the pop-up.
data-rmvbg-target	CSS selector of a file input that receives the finished PNG (fires input + change).
data-rmvbg-preview	CSS selector of an <img> that shows the finished photo.
data-rmvbg-background	"transparent", "white" or "#rrggbb".

2. JavaScript: rmvbg.open()

Call it from a click (browsers block pop-ups opened any other way). It resolves with the result, or null if the visitor closes the pop-up.

JavaScript

button.addEventListener("click", async () => {
  const result = await rmvbg.open({
    image: fileInput.files[0],   // optional: File, Blob, image URL or <img>
    background: "transparent",   // "transparent" | "white" | "#rrggbb"
  });
  if (!result) return;           // visitor closed the pop-up

  preview.src = result.url;      // object URL for showing it
  const form = new FormData();
  form.append("photo", result.file); // PNG File, ready to upload
  await fetch("/upload", { method: "POST", body: form });
});

Option	Meaning
image	Optional photo to start with: File, Blob, image URL or an <img>. Without it the visitor chooses one.
background	"transparent" (default), "white" or a "#rrggbb" colour. The visitor can still change it.
onDone(result)	Called with the result (same as the promise).
onCancel()	Called when the visitor closes the pop-up without using a photo.
onError(error)	Called if the pop-up can't open. error.code is "popup_blocked", "bad_origin" or "bad_background".

The result has blob, file (a PNG File), url, width, height, background and name. Buttons using data attributes also fire rmvbg:done and rmvbg:error events:

JavaScript

document.addEventListener("rmvbg:done", (e) => {
  console.log(e.target, e.detail.file, e.detail.width, e.detail.height);
});

3. Developer package: removeBackground()

Prefer no pop-up? Import the ES module and cut out photos inside your own page. The engine (about 90 MB) downloads on first use and is then cached by the browser.

JavaScript module

import { open, removeBackground } from "https://rmvbg.xyz/sdk/v1/rmvbg.mjs";

// Runs the engine inside your own page (no pop-up).
const png = await removeBackground(file, {
  background: "transparent",          // or "white" / "#rrggbb"
  onProgress: (p) => bar.value = p,   // 0 → 1, first run downloads the model
});
img.src = URL.createObjectURL(png);

License note for removeBackground()

It runs IMG.LY's background-removal engine in your page. That engine is open source under the GNU AGPL-3.0, so a site that uses it must follow the AGPL (including offering its source code) or buy a commercial license from IMG.LY. The pop-up widget doesn't carry this: the engine runs on rmvbg.xyz, not in your page.

Security

The pop-up shows the visitor which site asked for the photo, and sends it back only when they press "Use on your-site".
Results are posted only to the exact address of the page that opened the pop-up; messages from anywhere else are ignored.
Your page must be served over http or https (localhost works for testing).

Questions

Is the rmvbg SDK free?

Yes. The pop-up widget and the JavaScript API are free to use on any website, with no API key and no watermark.

Are my visitors' photos uploaded?

No. The background is removed on the visitor's own device. With the widget, only the finished photo is sent to your page, and only after the visitor presses the button to use it.

Do I need an API key or a server?

No. Add the script tag to your page and call rmvbg.open() from a click. Everything runs in the browser.

What does the widget give back?

A PNG file (transparent, white or a colour the visitor picks) as a Blob, a File you can upload or put in a form, an object URL for previews, and the width and height.

Want rmvbg on your computer instead? The Mac app works offline too.

Get rmvbg for Mac