Forum Documentation Showcase Pricing Learn more

Enabling users to add elements to the page by drawing boxes


In need for a way to let users create new element by drawing a box on the page with their cursors.

Think about the time when you click & hold on your Bubble editor and drag the cursor; it’ll draw a box (outline) and that’s how you add new elements to the page, right? Now, I want this functionality for my visitors, but this time, anytime they draw a box, it’ll be a new element on the page (preferably input boxes).

Here’s another example, it works by click-move-click instead of click-hold-move-release: [](http://example on jsfiddle)

I couldn’t find any option to read cursor location, or letting users create a fixed size box and resizing it by dragging the corners (window behavior on Win or Mac operation systems). Any hack or direction is appreciated!


Have you looked at Bubble plugins for this? …I’ve seen one that enables the point and click component of this.

If there isn’t a plugin that does all of this, then you may need some custom JS to fill the gaps. Just my initial reaction, in case it’s helpful.

1 Like

Which plugin was that? Can you give me the link Scott? @sridharan.s

I believe I’ll need to jump in to the custom JS world with Bubble. I believe It’ll also unlock some mental blockers I got for .b – having the option to use traditional code where .b is coming short.

Thanks for the help!


I’ve seen numerous that do portions of this. For example, I believe there’s one called MoveIt that makes it easy to position an element (e.g., an input) at any starting spot and make it any size. So, if there’s a way to “record” the click locations, then MoveIt may work well for the 2nd half of the requirement.

The devil may be in the details with this though.