Drag and Drop Page Builder

Hey bubblers,

I had some time this morning so I created a drag and drop page builder!

View the app here

Really just a proof of concept, but I built a little demo app that allows users to create pages, edit them using a drag and drop editor and then view them. There are still quite a few bugs.

But this can be customized to allow users to build email templates, custom profiles or anything else really!

15 Likes

On mobile but looks like it’s GrapeJs? I’m sure it’s a lot more fluid on desktop.

Yeah not built for mobile,

But yeah exactly!
it’s a plugin that is using a slightly modified version of GrapesJS

1 Like

Very cool!

1 Like

I can’t seem to view the page I built, it’s just a blank page with the unique ID in the URL. I also tried disabling ad-block.

What email did you sign up as?

I can take a look at it

This is really good and it’s something that I would pay money for!

If you could do the same with a HTML email builder as well then you can just take my money now!!!

3 Likes

HTML Email builder is 100% possible!

DM me your specific use case

2 Likes

Nice work! Really impressive

The UI is very similar to Webflow. Amazing.

1 Like

How the hell do you throw this together in one morning? lol. Great work and thanks for sharing.

Having had a look, I’m wondering now if it is possible to solve a UI/UX challenge that I previously thought bubble wasn’t capable of handling. The requirement is to enable my PAAS/SAAS end users to create their own basic flowcharts / mind maps with connections to the bubble database. (e.g. clicking on step 1 of a process flow could open a popup for the user to view additional contextual info such as lower level task info or work instructions). All data in this use case (process info + diagrams etc) to be created within Bubble. It would require each shape to have its own unique ID for linking to other data tables.

So am I dreaming? I thought I was, but then I saw this snazzy piece of work… Anyone have any ideas?

1 Like

Look good. keep up.

It is definitely possible! But it would just require a custom plugin that uses a javascript library built for making flowcharts.

1 Like

Hi Ryley,

WOW!

I am thinking about building an instructor blended course builder that in in the same spirit as what you build.

Is it something that required plugins / additional apps to create or did you do it in Bubble default environment from scratch? I wonder how you geneated that right panel builder!

Thanks
Bastien

Hi @ryley.randall ,

Thank you for showing that this is possible!

How do you see this progressing? Will you build a plugin?

Cheers,
Mihira

there’s a plugin for grape.js called Web & Email Builder

Thanks @trybizrep , Ive checked it out and the editor seems to load, but from there I’m not sure how to save a template / load a template / assign data to a block etc.
I hope there will be some documentation soon.