Reflow — Responsive Design for Bubble
reflow.website · Developer Tools
Media
2 items
Description
Edit responsive in Bubble like you edit anything else. Auto-saves conditionals, copies styles, and AI-powered full page analysis. Reflow makes responsive design in Bubble.io as easy as regular editing. No more writing conditionals by hand — just switch to a breakpoint, edit your elements normally, and Reflow saves the responsive rules automatically. 🎨 AUTO-SAVE MODE (Free — 50 elements/month) • Auto-save: Every responsive change is captured in real time and saved as a proper Bubble conditional • Copy styles: Applied responsive styles to one element? Copy them to any other element in one click • Session tracking: See every element you edited, which breakpoints, which properties — full visibility • Instant undo: Something broke? Undo all changes in one click • Bilingual: Full interface in English and Spanish ✨ EFFECTS LIBRARY (Free + Pro) 27 CSS animations you can apply to any Bubble element — no code, no plugins: Hover effects: Hover Lift, Scale Pop, Border Draw, Color Shift, Hover Glow, Hover Rotate Entrance effects: Fade In Up, Slide In Left, Slide In Right, Zoom In, Bounce In, Reveal Up Loop effects: Glow Pulse, Float, Pulse Scale, Breathing Text effects: Typewriter, Text Slide Up 🔒 Pro-exclusive effects (9): Tilt 3D, Shimmer, Blur Reveal, Gradient Text, Gradient Border, Gradient Hover, Hover Skew, Rubber Band, Spin In, Flip In Every effect has customizable controls (duration, distance, colors, easing) and live preview. 🤖 AI RESPONSIVE ($5/month — Unlimited elements) • Full page analysis: Claude AI analyzes your entire page and generates responsive conditionals automatically • Selected element analysis: Analyze just the element you're working on • AI credits: 15 included/month, extra packs available (10, 30, or 60 credits) • Free users can connect their own Anthropic API key HOW IT WORKS 1. Install Reflow and open any Bubble page in the editor 2. Switch to responsive mode and select a breakpoint (320px, 768px, etc.) 3. Edit your elements normally — change font sizes, paddings, widths, anything 4. Reflow captures every change and writes the conditionals for you 5. Switch back to design mode — all conditionals are there Or open the Effects tab, pick an animation, customize it, and apply — done. WORKS WITH • Any Bubble.io application • All Bubble breakpoints (320px, 768px, 992px, 1200px) • All element types (Groups, Text, Buttons, Images, HTML, etc.) PRIVACY • Auto-save mode runs 100% locally in your browser — no data is sent anywhere • AI features send only element structure data to Claude's API for analysis • No personal data is collected or stored Built for the Bubble community. https://reflow.website