On this page
01What it becomes
A React component that ships with your app plus browser helpers. CSS Tools’ element and actions become a component and helpers that add styles, change sizes, add and remove classes, read browser info and open windows.
No extra npm package: the generated code uses React, Next.js and browser APIs only.
02What converts
- Add style, change size, add / remove class
- Browser info
- Open a new window with size and position
03Not converted yet
- The “Find Dad” element and its add / remove class actions.
- Adding head tags is listed in your report to move into the page’s metadata.
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
CSS Tools is made by Zeroqode (element + actions). Bubble’s plugin marketplace counts 158,615 installs (a cumulative counter). See its page on the Bubble marketplace.
Questions
- Does the CSS Tools 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 app plus browser helpers.
- Will my CSS Tools settings carry over?
- Mostly. deBub converts 8 of the plugin’s 11 parts from your .bubble export; anything else is marked in the code and listed in your report. Secret keys are added as environment variables.