Download the PHP package openstudio/page-builder-bundle without Composer

Page Builder Bundle

A GrapesJS page builder for Symfony 7, served through AssetMapper. It ships the editor, the structural blocks and the integration points, and stays out of your domain: no entities, no firewall, no admin pages. You provide the host page, the form and the persistence.

It works in three steps:

• Level 0 gives a working editor with no custom backend. The content is saved into hidden form fields.
• Level 1 adds a media library once you implement two ports for upload and listing.
• Level 2 adds server-rendered composite blocks once you point the editor at a render endpoint you own.

Requirements

• PHP 8.3+
• Symfony 7.4
• AssetMapper, Stimulus and Twig Component (pulled in as dependencies)

Installation

The package is not on Packagist, so tell Composer where to find it:

Then require it:

If you do not use Symfony Flex, register the bundle:

Add the JavaScript dependencies to your importmap:

Quick start (Level 0)

Create a Stimulus controller that extends the one from the bundle. Add its source to the importmap so the import resolves:

The host form needs three hidden fields named projectData, html and css:

Render the form fields and the component on the same page:

The save button writes the content into the hidden fields. Submitting the form persists it the way you persist any form. On the next load the editor reads the content back from the projectData field.

Media library (Level 1)

Implement the two ports and bind them. The bundle calls them; you decide where the files live (local disk, S3, a CDN).

Mount the image endpoints under a prefix of your choice and pass a context to the component:

The context is an opaque string. The bundle forwards it to the ports and to the listing endpoint so you can scope images to a page, a tenant or anything else.

Server-rendered blocks (Level 2)

Some blocks render their HTML on the server. The editor sends POST { templateName, parameters } to a render-template endpoint and expects { "content": "<html>" }. The bundle does not provide this endpoint; you own it and you own the template allowlist.

Point render_template_endpoint at this route through the bundle configuration, then wire your block with twigRendererFactory (exported from @openstudio/page-builder-bundle/scripts/grapesjs/utils/index.js).

Configuration

All keys are optional. The bundle ships a static config provider; replace it by binding your own PageBuilderConfigProviderInterface when you need per-context configuration.

SVG is left out of allowed_mime_types on purpose: an SVG can carry scripts, so serving an uploaded one from your own origin would expose you to stored XSS. Add image/svg+xml only if you serve those files with Content-Disposition: attachment or from a separate domain. Icon SVGs passed through the icons config are rendered as raw markup inside the editor, so keep that list under your control.

Security

The bundle ships no firewall and no access control. Its endpoints are plain routes, unauthenticated by default, mounted under the prefix you chose. You must put them behind your firewall. Secure that prefix with your access_control:

The upload and delete routes change state, so protect them against cross-site requests too: keep your session cookies on SameSite=Lax (the Symfony default), or add CSRF protection if your setup needs it. For a stateless API firewall this does not apply.

The endpoints validate the file size and type on their own. The render-template endpoint is yours, so its template allowlist and input validation are your responsibility.

License

LGPL-3.0-or-later. See COPYING (GPL-3.0, which the LGPL supplements).