Building a 'page builder'

One of your must’ve found a great solution for this…

We have several features where we allow the user to build pages.

Take this for example:

(never mind the Dutch)

There’s a title, a subtitle, an image and bullet points.

Right now we have multiple input fields in a CMS like:
Title: ____
Subtitle: ____

However, it would be great to build a drag and drop page builder. Where the user can:

  • Directly visually see what’s changing
  • Drag and drop elements in certain places
  • WSIWYG text editor

Anyone done this or saw a relevant library?

I have not come across a drag-and-drop page builder, but here us a list of WYSIWYG editors that you can use for your application:

Please note that Summernote is one of the many Wappler extensions.

1 Like

From what experience I have with page-builders, I don’t think Wappler is a good fit in that tech-stack.
The end-user UI itself needs to be very JS driven - drag-drop, WYSIWYG, preview, publish etc - which a Wappler project can support, but that would mean using Wappler just as a code editor.

We have built CMS back-ends for our clients, but they cannot modify the UI - just create dynamic content/pages for the statically designed Wappler pages.

1 Like

Yes I have!

1 Like

I have integrated GrapeJS as well. Its a good library with lots of customization options.
But it was for another purpose… and it was a completely custom JS implementation.

1 Like

Cool! I thought about using it for email design…but haven’t worked at it. Used stripo so far and export html and use this with Wappler.

Gridstack.js I’m using it to build dashboards that users can customise. Maybe you can use it for your use case too (dragging / creating stuff)

3 Likes

Guess we need to see what “Extending Visual Editing and Blocks” brings in the current 2022/23 roadmap (Q4’22+) and the "Composable Architecture (Q1/Q2’23)
May hold the solution?

5 Likes

@htatd That looks quite interesting! I’ve had a quick look at the docs but still not sure if it’s also easy to adjust the content of the blocks? It seems like this library is for building a layout with pre-existing blocks.

@Hyperbytes I doubt that fits my use case but either way I’m excited for it!

You can create drag/drop area within drag/drop areas as children, and you can create content to drag and drop, and change the content. But the shared grapeJS definitely seems more for what you need out of the box, didn’t know about it before

From my experience, it’s not good when the user can do this. After 2 weeks the design of the website will be broken as they copy data from word, bad images and do not follow the previewed design patterns.

It’s way better to let them just maintain the raw content. This also results in a very easy to use cms. At least it’s the case for our cms :innocent: :grin:

6 Likes

I agree fully, we’ve had many disasters over the years allowing end users too much freedom - it still amazes me that they will always find some way to break even the most ‘perfect’ code. Maintaining raw content is about the best compromise we’ve found so far - some of the stuff they try and copy/paste into Summernote is eye-opening.

The Composable Architecture mentioned by @Hyperbytes looks promising so I’ll be keeping an eye out for that one.

1 Like