Building a 'page builder'

Wappler General
1

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:

image
image658×1027 108 KB

(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?

2

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
3

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
4

Yes I have!

1 Like
5

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
6

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.

7

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
8

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
9

@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!

10

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

11

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
12

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