Quasar Admin and GrapesJS inside Magento Page Builder

2024-06-11 · Ben Williamson

Why GrapesJS in admin

Native Page Builder worked for standard content types on a B2B commerce stack, but extending it for custom widgets and Hyvä-friendly partials meant fighting PHP template deploys for every layout tweak. Merchants wanted drag-and-drop without a release train for block markup changes.

The spike goal: component blocks map cleanly to storefront widgets, export HTML/JSON once, render through Hyvä-friendly partials. No redeploy per layout experiment.

Integration boundaries

Three boundaries matter more than editor features:

  • Authenticated mount: an admin menu route loads a Quasar SPA in an authenticated iframe or full-page mount. Reuse admin session cookies or short-lived tokens issued server-side.

  • No secrets in the client bundle: anything shipped to the browser is public. Exchange for short-lived tokens; keep integration secrets server-side.

  • Save via API: persist drafts through REST or GraphQL. The GrapesJS storage adapter calls your save endpoints; it does not write directly to the filesystem.

Endpoints worth listing early

Before writing the first custom block, inventory the Page Builder contracts you will wrap:

  • Media gallery search and picker

  • CMS block search

  • Product widget picker

  • Preview URLs for draft content

GrapesJS blocks should call those existing endpoints. Forking parallel APIs doubles maintenance and breaks when core Page Builder schema shifts.

Lessons from the spike

  • Keep the admin bundle small. Lazy-load GrapesJS plugins. Merchants do not need every plugin on first paint.

  • Version exported JSON schema. Storefront renderers need a version field so schema changes fail loudly instead of silently omitting blocks.

  • Test ACL per role. Marketing editors should not see system config routes because the SPA router exposes them.

The auth boundary between Magento admin and the embedded SPA caused the most rework. Nail session/token exchange before block development accelerates.

Quick review before wider rollout

  • Does every block use an existing Page Builder API contract?

  • Are integration secrets server-side only?

  • Is exported JSON versioned?

  • Did marketing-role ACL get tested, not just admin?