Add an image editor to your Bubble app

Embed the hosted Pixelixe editor in a Bubble HTML element. Configure template copies, connect saved-document webhooks and reopen customer designs.

HTML iframeTemplate copiesBackend save workflow

Configure your editor snippet

HTML element snippet

Connect the editor to your Bubble workflow

Place an HTML element

Add Bubble’s HTML visual element to your page and paste the snippet. Test in run mode. The Pixelixe editor iframe needs at least 1,000 px of width; allow horizontal scrolling in narrow containers.

Create a backend receiver

Create a Bubble API workflow for the save event. Use Detect request data and its initialization URL to inspect a sample payload, then configure the final endpoint in Pixelixe’s white-label settings.

Store and reopen the saved copy

Store the returned document UID and output URLs on the authorized customer record. Open that saved UID with overwrite=true when the same customer returns.

Map a saved-document payload to your data

Pixelixe’s documented save webhook includes a customer reference, a document UID and URLs for the exported design. Match these to a server-side record that your application has authorized.

user_uid is an association field, not proof of identity. Validate which customer can open and update each document, and design the webhook endpoint’s access controls before exposing a real workflow. The iframe alone does not add Bubble database authorization.

Use overwrite=false to start a customer copy of a template. Store the copy UID returned after saving; reopening the original template UID does not reopen the customer’s saved work.

Example payload — placeholder URLs

{
  "user_uid": "customer-123",
  "public_png_url": "https://example.com/generated/customer-design.png",
  "public_html_url": "https://example.com/generated/customer-design.html",
  "document_uid": "SAVED_CUSTOMER_DOCUMENT_UID"
}

Illustrative field mapping, not a received production event. The final Bubble endpoint depends on your app and security settings.

Check these integration details before launch

Question	What to verify in your Bubble app
Which document does the customer open?	Use an authorized template for the first copy, then the saved customer document UID.
Which key goes in the iframe?	The public editor key for your white-label setup. Keep private API Connector parameters private.
How is a save received?	Configure the Pixelixe webhook, detect the payload and verify persistence on the correct customer record.
Does it fit on mobile?	The embedded editor has a documented minimum width of 1,000 px. Test scrolling and your surrounding Bubble layout.

This guide follows the linked documentation. The snippet builder is a local helper; the full workflow must be tested in your own Bubble application.

Bubble documentation: HTML element, creating API workflows, API Connector security. Documentation checked 29 October 2026.

Frequently asked questions

Can I add an image editor to a Bubble app without building a canvas editor?

Yes. Embed the hosted Pixelixe editor in a Bubble HTML element with an iframe and connect its save webhook to your backend workflow. You still need to configure access, data storage and the surrounding app.

Do I need a native Bubble plugin for this integration?

The approach shown here uses Bubble’s HTML element and the documented Pixelixe iframe URL. It does not require a dedicated native Bubble plugin.

How do I save the edited image to the current Bubble user?

Receive the save webhook in a backend workflow, validate the customer and document association, then store document_uid and the output URLs on the authorized record. The supplied user_uid helps association but is not authentication.

How can each user edit a template without changing the original?

Open the template with overwrite=false. After the user saves, store the returned copy UID and reopen that copy with overwrite=true for later edits.

Should I put my private Pixelixe API key in a Bubble HTML element?

No. Use the public editor key intended for the iframe. Keep private keys for backend API calls in server-side private parameters and restrict who can invoke those workflows.

Will the embedded editor work in a narrow mobile layout?

Pixelixe documents a minimum iframe width of 1,000 px. The snippet provides a horizontally scrollable wrapper. Test the actual experience in your Bubble app before offering editing on small screens.

Has this guide been tested inside a live Bubble application?

The iframe parameters and webhook fields follow the current Pixelixe and Bubble documentation. The local snippet builder is testable on this page; an end-to-end Bubble application test is not included. Validate creation, saving, reopening and access control in your own app.

Build on a reusable template

Explore the Pixelixe workflow that fits your production process.

Explore automation See plans and API access