Pagebuilder approaches

[MarkE]

I'm planning to upgrade one of my PW apps to include a better set of pagebuilding tools (easy to use but powerful!) - at present it just uses the standard PW CMS so there is not much scope for users to customise their site. A while back (for another site) I wrote my own pagebuilder which relied heavily on RepeaterMatrix, Latte, CSS grids and RockFrontEnd. It works well but is more complex than I would like. I know there has been quite a bit of discussion about this topic in the past (and in particular I think @Jonathan Lahijani wrote this), but things have moved on a bit, with @jploch's PageGrid and @bernhard's (waiting, waiting...) RockPageBuilder. Also, I would like to make some custom widgets available in my page builder and the new component module by @ukyo looks interesting.

Does anyone have any experiences and insights they would like to share?

[bernhard]

15 hours ago, MarkE said:

and @bernhard's (waiting, waiting...) RockPageBuilder

Thx for your interest. I'm sorry that it takes longer than expected. The module is ready to be used and it has been developed for something around 3 years. It works great and I think it is a great tool for developing websites. Anybody interested doesn't need to wait and can send me a PM and buy a copy right away.

Unfortunately we don't have any infrastructure for selling commercial modules. So anybody who wants to sell modules needs to build one on its own. That is not trivial and takes time. And unfortunately there are other things that kick in from time to time (client work and life...). I do my best to release it soon ?

[ukyo]

@MarkE

The general problem in page builders is what frontend framework support they offer. Does the frontend framework support they provide align with your design, or do you need to learn and adapt to this frontend framework?

The same problem exists in ProcessWire as well. When we want to use the fields on the frontend, we often need to make numerous modifications to achieve the desired results.

I also have my own page builder structure created using the PageTable module, and I've been using this structure for about six years, continuously updating it on my end. The primary reason for creating the Mystique module is to dynamically create custom fields within the page builder and manage them as I like. My custom page builder is built on the Uikit 3 framework, but when I want to use Tailwind CSS or Bootstrap in the frontend, the current system doesn't support this. One of the reasons is that I primarily use the Component module and have created a separate module called UikitComponent to configure Uikit components within this module. I aim to apply this for Bootstrap, Tailwind CSS, or any other frontend framework or design.

In addition to this, another fundamental reason for writing the Component module is to be able to provide readable and understandable outputs for the requests sent to the page in the HTMX module that I am preparing for publication.

In the project I'm working on, I'm using the HTMX, Component, and Mystique modules together.

I created a component called 'product-list' and added extra settings to this component, including 'element' => true and 'fields' => array(). In the 'fields' section, I added configuration settings for the Mystique module. I added the 'element' => true setting to use this component in my page builder, making it accessible both in the code and through the admin panel. This way, the component can be used on the code side and added to the desired location by the administrator through the admin panel.

Also you can check a javascript solution: https://github.com/codex-team/editor.js I wrote a module and have some experience with this. Output is clean json data

[jploch]

@MarkE Thanks for your interest. Choosing the right tool always depens on the job and personal preferences. And of cause I am a bit biased, so choose what ever works for you and your clients.

You can use PAGEGRID with a CSS framework if you like. You just have to include the css file in your template. Then it's just a matter of adding the right classes, either in the block template files via code or via the style panel. You can even add multiple classes, e.g. utility classes from tailwind throught the style panel.

A Component in PAGEGRID would be a block. So you can create a block template and use any combination of fields in it (similar to how Repeater Matrix or PageTable work). You can also add a custom css and/or javascript file that will get loaded with your block template (e.g. myBlock.php, myBlock.css, myBlock.js).