On this page
01What it becomes
A React component that ships with your apps for Airdev Canvas. Most of Airdev’s Canvas UI Elements become React components with the same states and events: tags, radio buttons, checkbox, toggle, tabs and the loading screen.
No extra npm package: the generated code uses React, Next.js and browser APIs only.
02What converts
- Canvas tags and radio buttons over a data source, with selected values, events and Clear
- Canvas checkbox, toggle and tabs
- Loading screen, with the show / hide loading screen actions
03Not converted yet
- Canvas color picker
- Canvas phone input
Where your app uses one of these, the generated code keeps a marked placeholder in the right place and your report lists it, so it can be finished with the assistant or by any developer. The rest of the plugin works as described above.
04About this plugin
Canvas UI Elements is made by Airdev (visual elements + actions). Bubble’s plugin marketplace counts 159,692 installs (a cumulative counter). See its page on the Bubble marketplace.
Questions
- Does the Canvas UI Elements plugin work outside Bubble?
- Not as it is: Bubble plugins only run inside Bubble. In a Next.js app it is replaced by generated code — A React component that ships with your apps for Airdev Canvas.
- Will my Canvas UI Elements settings carry over?
- Mostly. deBub converts 18 of the plugin’s 21 parts from your .bubble export; anything else is marked in the code and listed in your report. Secret keys are added as environment variables.