A Peek Into Adobe Commerce Page Builder

The Page Builder in Adobe Commerce provides a powerful drag-and-drop interface for authoring rich content within your CMS pages and blocks. Built-in content types provide a lot of useful building blocks, but when it’s finally time to extend their functionality or expand the collection with types of your own, you’ll need to dive into a set of components that make them work.

The basic definition of Page Builder content types consists of three main pieces. The first is a typical UI component defining the form allowing user-defined values for the content:

An XML config file in view/adminhtml/pagebuilder defines appearances and elements that map these form fields to HTML, attributes, or style properties.

And a Knockout template binds the all these values into an HTML structure for final output.

There’s a ton to dig into from these foundations. Spends some time in Magento_PageBuilder (specifically in view/adminhtml), and see the official documentation.