✅

Link to plugin page: https://zeroqode.com/plugin/air-whiteboard-pro-plugin-for-bubble-1689767022763x398840130597505540

Demo to preview the settings

✅

Demo page: https://zeroqode-demo-33.bubbleapps.io/whiteboard

✅

Bubble Editor: https://bubble.io/page?version=live&id=zeroqode-demo-33&name=whiteboard&tab=Design

Introduction

The Whiteboard Excalidraw plugin brings a full-featured collaborative whiteboard into your Bubble app. Powered by the Excalidraw library, it lets users draw, annotate, and collaborate in real time — all backed by your Bubble database for persistent storage and multi-user sync.

The plugin supports shapes, freehand drawing, text, arrows, and image embedding. The canvas updates automatically every ~1.5 seconds via Bubble’s last_change date field, keeping all connected users in sync without any external services.

Key capabilities: - Real-time multi-user collaboration via Bubble DB - Full drawing toolkit — shapes, freehand, text, images, arrows - Light / Dark / Device themes with in-canvas toggle - Export to PNG or SVG (download to device or upload to Bubble file storage) - Import Excalidraw JSON to pre-populate a canvas - Read-only view mode, Zen mode, and Grid mode - Customizable welcome screen and canvas branding - Custom CSS injection for deep visual overrides

How to setup

Step 1 — Create the Bubble Data Types

Step 2 — Add the Plugin Element to Your Page

Step 3 — Configure the Element Properties

Step 4 — Set Up the Save Workflow

Step 5 — Handle the Clear Canvas Event (Optional)

Plugin Element Properties

The plugin contains one visual element — WhiteBoard Excalidraw — that should be placed on a page.

Fields:

Title	Description	Type
Board (App Type)	App type declaration for `board_thing`. Select your `WB_Canvas` data type. Required to enable dynamic value binding.	Custom Type
Board Thing	The `WB_Canvas` record representing the current whiteboard session.	WB_Canvas
Last Change	Bind to `WB_Canvas's last_change`. When updated by a save workflow, triggers a remote element sync for all connected users.	Date
ID Field Name	Field on `WB_Canvas` used as the unique canvas identifier. Changing this resets and reloads the canvas.	Field Selector
WB Element (App Type)	App type declaration for `WB_Element`. Required to enable the field selectors below.	Custom Type
Elements (List)	List of `WB_Element` records belonging to the current canvas.	List of WB_Element
Element ID Field	Field on `WB_Element` storing the Excalidraw element UUID.	Field Selector
Image URL Field	Field on `WB_Element` storing the uploaded image URL for image-type elements.	Field Selector
Element Data Field	Field on `WB_Element` storing the full Excalidraw element serialized as a JSON string.	Field Selector
Is Deleted Field	Field on `WB_Element` for soft-delete status. Deleted elements are hidden from the canvas.	Field Selector
	Settings
Canvas Name	Display name of the drawing. Pre-fills the filename in Excalidraw’s export dialog.	Text
Read Only	When `true`, the canvas enters view-only mode. Drawing tools are disabled; panning and zooming remain available.	Boolean
Theme	Color theme of the canvas. `light`, `dark`, or `device` (follows OS preference automatically). The user can also toggle from the main menu.	Dropdown
Zen Mode	When `true`, hides all toolbars for a distraction-free experience. Toggle with `Alt+Z`.	Boolean
Grid Mode	When `true`, displays a snap-to grid. Toggle with `Ctrl+'`.	Boolean
Show Clear Button	When `true`, shows a “Clear canvas” item in the main menu. Fires the On Clear event.	Boolean
Custom CSS	Raw CSS injected into the page. Use Excalidraw CSS variables to override colors, fonts, and spacing.	Text
	Welcome Screen
Show Welcome Screen	When `true`, shows a branded welcome screen on an empty canvas. Disappears once the user starts drawing.	Checkbox
Welcome Heading	Heading text displayed on the welcome screen.	Text
Welcome Logo	Custom logo image on the welcome screen. Recommended max height: 80 px.	Image

Field Name	Field Type	Notes
`title`	Text	Human-readable name for the canvas
`elements`	List of WB_Element	All drawing elements belonging to this canvas
`last_change`	Date	Updated on every save; drives multi-user sync
`preview`	Image	Optional — stores the last exported PNG snapshot

Field Name	Field Type	Notes
`canvas`	WB_Canvas	Parent canvas reference
`element_data`	Text	Full Excalidraw element serialized as JSON
`element_id`	Text	Excalidraw UUID of the element
`image_url`	Image	Populated automatically when an image element is drawn
`is_deleted`	Yes / No	Soft-delete flag; deleted elements are hidden from the canvas

Name	Description	Type
Is Ready	`true` once the Excalidraw API is initialized and the canvas is mounted.	Boolean
All Elements JSON	JSON array of all current canvas elements. Updated on every drawing change. Use for full snapshot backup or export.	Text
Changed Element ID	Excalidraw UUID of the element that triggered the last On Change event. Use to find or create the matching `WB_Element` record.	Text
Changed Element Data	Full JSON string of the element from the last On Change event. Save this to `WB_Element's element_data` field.	Text
Changed Element Deleted	`true` if the element from the last On Change event was soft-deleted. Save this to `WB_Element's is_deleted` field.	Boolean
Changed Element Image	Bubble file URL of the uploaded image for the last changed image-type element. Save this to `WB_Element's image_url` field.	Image
Board Image URL	URL of the last exported canvas image. Populated by the Export Image action when Upload to Bubble is `true`.	Image
Error Message	Error description from the last failed operation. Read after the On Error event fires.	Text

Name	Description
On Ready	Fires once after the Excalidraw API is fully initialized and the canvas is mounted. Safe to call actions after this event.
On Change	Fires ~1.5 s after the last drawing action. Each trigger corresponds to exactly one changed element. Read the Changed Element * states to upsert the `WB_Element` record, then update `WB_Canvas's last_change`.
On Error	Fires when an operation fails (library load error, export failure, upload error, etc.). Read the Error Message state for details.
On Clear	Fires when the user clicks “Clear canvas” from the main menu. Wire to a workflow that deletes all `WB_Element` records for this canvas and updates `WB_Canvas's last_change`.
On Export Image	Fires after the Export Image action completes successfully. Read the Board Image URL state to save the preview.

Air Whiteboard Pro

Demo to preview the settings

Introduction

How to setup

Step 1 — Create the Bubble Data Types

Step 2 — Add the Plugin Element to Your Page

Step 3 — Configure the Element Properties

Step 4 — Set Up the Save Workflow

Step 5 — Handle the Clear Canvas Event (Optional)

Plugin Element Properties

Fields:

Element Actions

Exposed States

Element Events

Workflow Example

Workflow 1 — Saving Drawing Changes (Multi-User Sync)

Workflow 2 — Clearing the Canvas

Workflow 3 — Exporting and Saving a Canvas Snapshot

Changelogs

Update 15.05.26 - Version 2.6.0

Update 27.04.26 - Version 2.5.0

Update 01.09.25 - Version 2.4.0

Update 03.07.25 - Version 2.3.0

Update 11.06.25 - Version 2.2.0

Update 05.06.25 - Version 2.1.0

Update 05.06.25 - Version 2.0.0

Update 31.05.25 - Version 1.17.0

Update 19.07.24 - Version 1.16.0

Update 16.07.24 - Version 1.15.0

Update 06.06.24 - Version 1.14.0

Update 31.05.24 - Version 1.13.0

Update 09.04.24 - Version 1.12.0

Update 03.04.24 - Version 1.11.0

Update 24.01.24 - Version 1.10.0

Update 27.12.23 - Version 1.9.0

Update 19.12.23 - Version 1.8.0

Update 20.10.23 - Version 1.7.0

Update 18.10.23 - Version 1.6.0

Update 15.09.23 - Version 1.5.0

Update 08.09.23 - Version 1.4.0

Update 07.09.23 - Version 1.3.0

Update 06.09.23 - Version 1.2.0

Update 20.07.23 - Version 1.1.0

Update 18.07.23 - Version 1.0.0