The challenge
A page builder needs more than a canvas and a set of elements. It needs an understandable way to select, edit, style, arrange, and preview them.
Getting those interactions right is difficult. Developers integrating a page builder can find themselves solving both the technical implementation and the design of the editing experience.
My goal was to make that work reusable: a package developers could implement with full functionality, reliably—including the experience that makes those capabilities usable.
01 — Build something I could use again
Pagebldr grew out of a recurring need across my own projects.
Each project needed a way for users to build and customise pages. Recreating the same functionality would mean repeating the implementation, the interaction design, and the work of making everything behave consistently.
I made Pagebldr its own package so I could invest in that experience once and continue improving it across projects.
Being my own use case gave that decision a practical test: would I want to integrate it again, and could I rely on it when I did?
02 — Turn stylesheets into buttons
The element panel is where much of Pagebldr's capability becomes accessible.
Its Content, Style, and Advanced tabs organise the options around the element someone is working on. Users can change what an element contains, adjust its appearance, and reach more detailed controls as they need them.
Styling that would otherwise require writing and refining CSS becomes something users can click, adjust, and see on the canvas.
The intention was to make substantial control available through the interface. Users still make the design decisions; the editor gives them a direct way to express those decisions.
03 — Bring experience into the interactions
My approach came from years of building sites with WordPress and Elementor, exploring hundreds of plugins and add-ons, and working in Photoshop and Illustrator.
Through those tools, I developed a practical understanding of what helped me work: how options were organised, how selections behaved, and how easily I could connect an adjustment to its result.
That experience informed Pagebldr's interface. The element panel, canvas, and editing controls needed to work together so users could explore the tool and understand what their actions changed.
For developers, that meant the package needed to bring the editing experience with it. They should not have to design that experience themselves before their users could benefit from the functionality.
A starting point, with room to explore
An empty canvas can leave someone unsure where to begin.
Templates, blocks, and individual elements provide different starting points. A user can begin with an existing composition, work with a section, or build at the element level.
From there, the editor supports exploration: select something, inspect its options, make an adjustment, and see what it changes.
That is the connection I wanted to create between capability and usability. The controls should help people discover what they can do as they work.
The result
Pagebldr developed into a published package that I can reuse across projects and make available to other developers.
It brings together the visual editor, editing controls, and page rendering, while allowing the application integrating it to retain control of its own data, permissions, and publishing.
The work reflects how I approach product engineering: identify a recurring need, invest in the experience around it, and build something useful beyond its first application.