PHPackages itech-world/sulu-grapesjs-bundle - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Admin Panels](/categories/admin) 4. / 5. itech-world/sulu-grapesjs-bundle ActiveSulu-bundle[Admin Panels](/categories/admin) itech-world/sulu-grapesjs-bundle ================================ SuluGrapesJsBundle extends the Sulu CMS to offer GrapeJS editor integration in Sulu Admin for content editing v1.1.2(2mo ago)86[2 issues](https://github.com/steeven-th/SuluGrapesJsBundle/issues)MITJavaScriptPHP ^8.2CI passing Since Jul 2Pushed 2mo ago1 watchersCompare [ Source](https://github.com/steeven-th/SuluGrapesJsBundle)[ Packagist](https://packagist.org/packages/itech-world/sulu-grapesjs-bundle)[ RSS](/packages/itech-world-sulu-grapesjs-bundle/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (7)Dependencies (9)Versions (9)Used By (0) [![Itech World logo](./doc/images/logo.png)](./doc/images/logo.png) GrapesJS Bundle for [Sulu](https://sulu.io) =========================================== [](#grapesjs-bundle-for-sulu) ### Developed by [Steeven THOMAS](https://github.com/steeven-th) [](#developed-by-steeven-thomas) [ ![GitHub license](https://camo.githubusercontent.com/f8df3091bbe1149f398a5369b2c39e896766f9f6efba3477c63e9b4aa940ef14/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d677265656e) ](LICENSE) [ ![Sulu compatibility](https://camo.githubusercontent.com/34064f3c25a97dd4eaa0bfb7da870c3b6ec1e8c0d16c8d347a37a2556918bd4d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f73756c755f636f6d7061746962696c6974792d2533453d332e302d6379616e) ](https://sulu.io/) SuluGrapesJsBundle extends the Sulu CMS to offer GrapesJS editor integration in Sulu Admin for content editing 📂 Requirements -------------- [](#-requirements) - PHP ^8.2 - Sulu ^3.0.\* 🛠️ Features ----------- [](#️-features) - Add Builder template page in Sulu Admin - GrapesJS integration in Sulu Admin for content editing **(only BODY content)** - Builder integrated in Sulu Preview with live synchronization (changes are synced to the Sulu form, enabling save/publish via the Sulu toolbar) - Optional standalone builder mode (opens the editor in a separate tab) - Asset Manager in Builder: - **Preview mode**: Uses the native Sulu media overlay (browse collections, search, pagination built-in) for both images and documents - **Standalone mode**: Enhanced GrapeJS Asset Manager with pagination (20 items/page), search, and one entry per media - `data-media-id` attribute is automatically set on inserted images and document links - **Image Format Selector**: When an image from Sulu is selected, a "Format" dropdown appears in the component settings panel (below "Alt text"), listing all Sulu image formats with their dimensions. Allows switching between the original image and any configured thumbnail format directly from the editor 🇬🇧 Available translations ------------------------- [](#-available-translations) - English - French - German 📦 GrapesJS Dependencies ----------------------- [](#-grapesjs-dependencies) - [GrapesJS Open Source Editor](https://grapesjs.com/docs/) - [GrapesJS blocks basic](https://github.com/GrapesJS/blocks-basic) - [GrapesJS style bg](https://github.com/GrapesJS/style-bg) - [Grapick](https://github.com/artf/grapick) - [GrapesJS custom code](https://github.com/GrapesJS/components-custom-code) - [GrapesJS tooltip](https://github.com/GrapesJS/components-tooltip) - [GrapesJS typed](https://github.com/GrapesJS/components-typed) - [GrapesJS style-filter](https://github.com/GrapesJS/style-filter) - [GrapesJS countdown](https://github.com/GrapesJS/components-countdown) - [GrapesJS tui image editor](https://github.com/GrapesJS/tui-image-editor) - [GrapesJS object fit](https://github.com/steeven-th/grapesjs-object-fit) - [GrapesJS rte toolbar extensions](https://github.com/steeven-th/grapesjs-rte-toolbar-extensions) 📝 Installation -------------- [](#-installation) ### Composer [](#composer) ``` composer require itech-world/sulu-grapesjs-bundle ``` ### Symfony Flex [](#symfony-flex) If you don't use Symfony Flex, you can add the bundle to your `config/bundles.php` file: ``` return [ // ... ItechWorld\SuluGrapesJsBundle\ItechWorldSuluGrapesJsBundle::class => ['all' => true], ]; ``` ### Symfony symlink [](#symfony-symlink) ``` php bin/console assets:install --symlink ``` ### Configuration [](#configuration) The bundle requires no specific configuration for basic usage. Image formats are fetched dynamically from the Sulu API. > **Note:** In preview mode, the GrapeJS canvas automatically inherits all stylesheets and scripts loaded by Sulu's preview system. No additional configuration is needed — your frontend styles are applied to the canvas content out of the box. > **Breaking change:** The `images_formats` configuration option has been removed. Image formats are now retrieved dynamically from the Sulu API (`/admin/api/formats.json`). If your `config/packages/itech_world_sulu_grapejs.yaml` still contains `images_formats`, remove it to avoid a Symfony configuration error. #### Detached preview media behavior [](#detached-preview-media-behavior) When the Sulu preview is detached (opened in a separate window), the native Sulu media overlay opens in the admin window — which may not be visible. By default, the custom GrapeJS Asset Manager (with pagination and search) is used instead. To force the native Sulu overlay even in detached mode: ``` itech_world_sulu_grapes_js: detached_preview_native_media: true # default: false ``` #### ***BACK*** [](#back) Edit the `config/routes.yaml` file to add the bundle to the list of routes: ``` itech_world_sulu_grapesjs: resource: '@ItechWorldSuluGrapesJsBundle/src/Controller/' type: attribute ``` Edit the `assets/admin/package.json` to add the bundle to the list of bundles: ``` { "dependencies": { // ... "sulu-itech-world-sulu-grapesjs-bundle": "file:../../vendor/itech-world/sulu-grapesjs-bundle/public/js" } } ``` Edit the `assets/admin/app.js` to add the bundle in imports: ``` import 'sulu-itech-world-sulu-grapesjs-bundle'; ``` In the `assets/admin/` folder, run the following command: ``` npm install npm run build ``` or ``` yarn install yarn build ``` 🖼️ Builder in Preview (Recommended) ----------------------------------- [](#️-builder-in-preview-recommended) The recommended way to use the GrapeJS editor is directly inside the Sulu Preview panel. Changes made in the editor are automatically synchronized with the Sulu form, so you can save and publish using the native Sulu toolbar buttons. **How it works:** - An info banner replaces the save/publish buttons in preview mode (no duplicates with Sulu's own buttons) - Every edit silently marks the Sulu form as "dirty" (you'll get the "unsaved changes" warning when navigating away) - Use the **Sync** button or **Ctrl+S / Cmd+S** to explicitly push changes to the Sulu form (triggers a preview refresh) - When you click **Save** in Sulu, pending builder changes are automatically injected before saving — even without clicking Sync [![Admin page builder](./doc/images/admin_page_builder.png)](./doc/images/admin_page_builder.png) The `BuilderContentController` automatically injects all required variables (`publish_state`, `translations`, `frontend_css_path`, `frontend_js_path`, `template`, `webspace`, `locale`, `id`) into the template context for both frontend rendering and preview mode. In preview mode, when the user opens the Asset Manager (double-click on an image or click "Choose a document"), the native Sulu media selection overlay opens instead of the basic GrapeJS panel. This gives access to all media collections, search, and pagination natively. To enable the GrapeJS editor in preview, create a `templates/bundles/SuluWebsiteBundle/Preview/preview.html.twig` file with the following content: ``` {% extends "@!SuluWebsite/Preview/preview.html.twig" %} {% block style %} {{ parent() }} {% if template == 'builder' %} {% include "@ItechWorldSuluGrapesJs/components/_builder_css.html.twig" %} {% endif %} {% endblock %} {% block content %} {% if template == 'builder' %} {% include "@ItechWorldSuluGrapesJs/components/_builder_sulu_navbar.html.twig" %} {% include "@ItechWorldSuluGrapesJs/components/_builder_sulu_body.html.twig" with { json_builder_html: content.json_builder_html, json_builder_css: content.json_builder_css, } %} {% else %} {{ parent() }} {% endif %} {% endblock %} {% block javascripts %} {{ parent() }} {% if template == 'builder' %} {% include "@ItechWorldSuluGrapesJs/components/_builder_js.html.twig" %} {% endif %} {% endblock %} ``` > **Note:** The variables `locale`, `webspace`, `id`, `translations`, `frontend_css_path`, `frontend_js_path`, and `previewContentReplacer` are automatically available in the template context thanks to `BuilderContentController`. You only need to explicitly pass `json_builder_html` and `json_builder_css` from the `content` object. 🔧 Standalone Builder (Optional) ------------------------------- [](#-standalone-builder-optional) If you prefer to open the GrapeJS editor in a separate tab instead of using the preview, you can enable the standalone builder mode. This adds an "Open Builder" button in the Sulu Admin toolbar for pages using the `builder` template. In your `config/packages/itech_world_sulu_grapejs.yaml`: ``` itech_world_sulu_grapes_js: enable_standalone_builder: true frontend_css_path: '/styles/app.css' # Required for standalone: path to the front CSS file frontend_js_path: '/js/app.js' # Required for standalone: path to the front JS file ``` > **Important:** `frontend_css_path` and `frontend_js_path` are **only needed for standalone mode**. The standalone builder opens in a separate tab outside of Sulu's preview, so it cannot auto-detect frontend assets. You must provide the paths manually. In preview mode, assets are detected automatically. Then clear the admin cache: ``` php bin/adminconsole cache:clear ``` In standalone mode, the builder has its own Save and Publish buttons that communicate directly with the Sulu API. > **Note:** Both modes can coexist. When `enable_standalone_builder` is `true`, the builder is available both in preview and via the toolbar button. [![Builder page](./doc/images/builder_page.png)](./doc/images/builder_page.png) [![Admin page](./doc/images/admin_page.png)](./doc/images/admin_page.png) 🖼️ Image Format Selector ------------------------ [](#️-image-format-selector) When an image inserted via the Sulu media library is selected in the editor, a **Format** dropdown appears in the component settings panel (traits), right below the "Alt text" field. It lists all image formats configured in your `image-formats.xml`, along with their scale dimensions. ScenarioBehaviorImage from Sulu (just selected)Dropdown populated immediately with "Original" + all Sulu formatsImage from Sulu (loaded from saved HTML)Thumbnails fetched on selection via API, dropdown populates after a brief loading stateImage without `data-media-id` (manual URL)Format dropdown is hiddenFormat changed in dropdown`src` attribute is updated, canvas reflects the new resolution"Original" selectedReverts to the full-resolution URL[![Image Format Selector](./doc/images/images_formats.png)](./doc/images/images_formats.png) 🐛 Bug and Idea -------------- [](#-bug-and-idea) See the [open issues](https://github.com/steeven-th/SuluGrapesJsBundle/issues) for a list of proposed features (and known issues). 💰 Support me ------------ [](#-support-me) You can buy me a coffee to support me **this plugin is 100% free**. [Buy me a coffee](https://www.buymeacoffee.com/steeven.th) 👨‍💻 Contact ----------- [](#‍-contact) [![](https://avatars.githubusercontent.com/u/82022828?s=96&v=4)](https://steeven-th.dev)[![x.com](./doc/images/x.webp)](https://x.com/ThomasSteeven2)[![Linkedin](./doc/images/linkedin.png)](https://www.linkedin.com/in/steeven-thomas-221b02b8/) 📘 License --------- [](#-license) This bundle is under the [MIT License](LICENSE). ### Health Score 40 — FairBetter than 88% of packages Maintenance78 Regular maintenance activity Popularity10 Limited adoption so far Community10 Small or concentrated contributor base Maturity54 Maturing project, gaining track record Bus Factor1 Top contributor holds 66.1% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~37 days Recently: every ~0 days Total 7 Last Release 88d ago Major Versions 0.1.8 → v1.0.02026-02-12 ### Community Maintainers ![](https://www.gravatar.com/avatar/15d31371355db522b06ffd73f8be76e32972f145390b1eba33b190c7fd412413?d=identicon)[steeven-th](/maintainers/steeven-th) --- Top Contributors [![steeven-th](https://avatars.githubusercontent.com/u/82022828?v=4)](https://github.com/steeven-th "steeven-th (37 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (11 commits)")[![actions-user](https://avatars.githubusercontent.com/u/65916846?v=4)](https://github.com/actions-user "actions-user (8 commits)") --- Tags phpsymfonysymfony-uxcmseditorsuluContent management systemgrapesjs ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/itech-world-sulu-grapesjs-bundle/health.svg) ``` [![Health](https://phpackages.com/badges/itech-world-sulu-grapesjs-bundle/health.svg)](https://phpackages.com/packages/itech-world-sulu-grapesjs-bundle) ``` ### Alternatives [forkcms/forkcms Fork is an open source CMS that will rock your world. 1.2k44.5k](/packages/forkcms-forkcms)[sulu/skeleton Project template for starting your new project based on the Sulu content management system 29733.3k](/packages/sulu-skeleton)[sulu/article-bundle Bundle for managing localized content-rich entities like blog-posts in the Sulu content management system 66409.6k2](/packages/sulu-article-bundle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)