The cons and pros of creating a drag and drop page builder from scratch? (React, Vue, Angular)

Hi everyone,

Would you build a drag and drop page builder from scratch or would you go with an open-source solution?

Do you have any concerns regarding the updates with an open-source solution?

How would you store the generated code in json or html? (if you build your own solution)

Thanks for any experiences you can share about implementing something like this.

Comments

[Sarah]

To the questuon how, I've wrote a page builder in Angular using JavaScript custom elements developer.mozilla.org/en-US/docs/W...

What open-source libraries do this?

[wolfiton]

Hi, @sarahksiyer

Thanks for sharing your solution

To answer your question I wrote some opensource libraries that I know about, below.

A couple of options for React are:

• react page builder
• grapejs.com has a react implementation
• slate-mate

Vue options

• plekan
• vuse

Angular option

• grapejs

[Sarah]

Oh wow I had no idea, thank you 😅

[wolfiton]

You are welcome

[JZ JavaScript Corner]

Use what exists if it fits your use case. If not, at least see what you can learn from them before running out and building your own. I've often considered building my own because nothing works 100% to my saturation, but I can get by well enough that it probably isn't worth the effort.

If I created my own version, I'd store it in JSON. That makes it easier to edit and any updates to how an individual block works or what HTML it outputs will be much easier to deal with.

[wolfiton]

Thanks, @JZJavaScriptCorner for sharing your experience and considerations of building a Drag and drop page builder from scratch.

I really appreciate the detailed response you offered and also the thought process behind it.