{"id":14983887,"url":"https://github.com/acseo/pagebuilderbundle","last_synced_at":"2025-06-20T17:32:48.484Z","repository":{"id":199337837,"uuid":"702669631","full_name":"acseo/PageBuilderBundle","owner":"acseo","description":"This bundle provides a PageBuilder Solution for Symfony (built on top of GrapesJS : https://grapesjs.com)","archived":false,"fork":false,"pushed_at":"2023-10-19T09:21:58.000Z","size":76,"stargazers_count":15,"open_issues_count":2,"forks_count":4,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-10T20:07:25.980Z","etag":null,"topics":["grapesjs","pagebuilder","symfony","symfony-bundle"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/acseo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-09T19:04:49.000Z","updated_at":"2025-04-06T17:18:01.000Z","dependencies_parsed_at":"2023-11-10T11:46:08.766Z","dependency_job_id":null,"html_url":"https://github.com/acseo/PageBuilderBundle","commit_stats":{"total_commits":7,"total_committers":1,"mean_commits":7.0,"dds":0.0,"last_synced_commit":"dfd1707daf945bfa32cb247f8d67f3a93934261d"},"previous_names":["acseo/pagebuilderbundle"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/acseo/PageBuilderBundle","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acseo%2FPageBuilderBundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acseo%2FPageBuilderBundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acseo%2FPageBuilderBundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acseo%2FPageBuilderBundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/acseo","download_url":"https://codeload.github.com/acseo/PageBuilderBundle/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/acseo%2FPageBuilderBundle/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260987955,"owners_count":23093411,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["grapesjs","pagebuilder","symfony","symfony-bundle"],"created_at":"2024-09-24T14:08:07.607Z","updated_at":"2025-06-20T17:32:43.448Z","avatar_url":"https://github.com/acseo.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ACSEO PageBuilder Bundle\n\nThis bundle provides a PageBuilder Solution built on top of [GrapesJS](https://grapesjs.com/). it provides :\n\n* a **Twig Component** that you can use in your template with `{{ component('PageBuilder' {'idField' : 'my_field'}) }}`. This component will create the PageBuilder area.\n* a `Page` Entity and a `PageController` that will allow you to store and load the HTML, CSS, and JSON config of the generated Web page.\n* a **Twig Component** that you can use to render the page and handle dynamic block rendering `{{ component('PageRender', {'html' : page.html}) }}`\n\n## Installation\n\n### Install the bundle using composer\n\n```bash\ncomposer require acseo/pagebuilder-bundle\n````\n\nEnable the bundle in you Symfony project\n\n```php\n\n\u003c?php\n// config/bundles.php\n\nreturn [\n    ACSEO\\PageBuilderBundle\\PageBuilderBundle::class =\u003e ['all' =\u003e true],\n```\n\n### Enable PageController to Load / Save Pages\n\nYou can choose to use the default `PageController` provided in order to load / save the Page entities\n\nTo do so, you need to enable the route in your project : \n\n```yaml\n# config/routes/acseo_page_builder.yaml\nacseo_page_builder:\n    resource: '@PageBuilderBundle/src/Controller/'\n    type: attribute\n```\n\n### Update your database to create the Page Entity\n\nWith doctrine, according to your strategy :\n\n```bash\nphp bin/console doctrine:schema:update\n# OR\nphp bin/console doctrine:migrations:diff\n```\n\n# Configuration\n\nThe Bundle configuration allows you to manage how GrapesJS will be **loaded**, and what additionnal **plugins** or **blocks** will be added\n\nHere is an example of a configuration file :\n\n```yaml\n# config/packages/acseo_page_builder.yaml\nacseo_page_builder:\n  #\n  # GrapesJS Config\n  #\n  # Use this to have only default values\n  #\n  grapesjs: ~  \n  #\n  # Use this to set specific values\n  #\n  grapesjs:\n    js:             # Optional : URL of the JS file for GrapeJS. \n                    # Default : https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.21.7/grapes.min.js\n    css:            # Optional : URL of the CSS file for GrapeJS. \n                    # Default : https://cdnjs.cloudflare.com/ajax/libs/grapesjs/0.21.7/css/grapes.min.css\n    urlLoad:        # Optional : Route name used to load Page JSON Content. \n                    # Default : acseo_page_builder_load\n    urlStore:       # Optional : Route name used to store Page JSON Content. \n                    # Default : acseo_page_builder_save\n    pageController: # Optional : Controller used to load / save Pages.       \n                    # Default : PageController::class \n  #\n  # Plugins Config\n  # Array of name, url, options\n  #\n  plugins:\n    ## Uncomment this example to load grapesjs-preset-webpage\n    #- name: grapesjs-preset-webpage\n    #  url: https://cdn.jsdelivr.net/npm/grapesjs-preset-webpage@1.0.3/dist/index.js                  \n  #\n  # Blocks Config\n  # Declare your custom Blocks\n  #\n  blocks:\nblocks:\n      latest-articles:\n        label: 'Latest articles'\n        category: 'Extra blocks'\n        media: '\u003csvg viewBox=\"0 0 24 24\"\u003e\u003c/svg\u003e'\n        content:\n          attributes:\n            'render': 'latest_articles'\n          traits:\n            - label: 'Number of articles'\n              name: 'articles'\n              type: 'text'\n              value: '5'\n            - label: 'Number of columns'\n              name: 'columns'\n              type: 'text'\n              value: '2'\n          content: '\u003cdiv class=\"block\"\u003eLatest articles. This block will be replaced by latest articles\u003c/div\u003e'\n```\n\n## Dynamic block rendering\n\nYou can create a custom block that will allow you, like the Twig extension method `{{ render() }}`, to make a call to a Controller inside your page.\n\nTo do so, your block must contain an attribute `render = 'route_name'`. All the attributes of this block will be sent as arguments to the Controller.\n\nThe generated output of this fragment will replace the original content of the page.\n\nIn our previous example, the custom block `latest-articles` will generate the following HTML :\n\nStored HTML in Page Entity : \n\n```html\n\u003c!-- ... --\u003e\n\u003cp\u003eLorem Ipsum\u003c/p\u003e\n\u003cdiv id=\"ijf8l\" render=\"latest_articles\" columns=\"1\" articles=\"3\"\u003e\n  \u003cdiv class=\"block\"\u003e\n    Latest articles. This block will be replaced by latest articles\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003cp\u003eLorem Ipsum\u003c/p\u003e\n\u003c!-- ... --\u003e\n```\n\nGenerated HTML with `{{ component('PageRender', {'html' : page.html}) }}`\n\n```html\n\u003c!-- ... --\u003e\n\u003cp\u003eLorem Ipsum\u003c/p\u003e\n\u003c!-- result from the route latest_articles --\u003e\n\u003cul\u003e\n  \u003cli\u003eArticle 1\u003c/li\u003e\n  \u003cli\u003eArticle 2\u003c/li\u003e\n  \u003cli\u003eArticle 3\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003eLorem Ipsum\u003c/p\u003e\n\u003c!-- ... --\u003e\n```\n\n# Usage\n\nIn order to work, your Twig page **must** contain an input field with the *page identifier* (the URI).\n\n```twig\n{# templates/my/page.html.twig #}\n\n\u003cinput type=\"hidden\" id=\"page_uri\" value=\"hello-world\" /\u003e\n{# OR #}\n\u003cinput type=\"text\" id=\"page_uri\" /\u003e\n\n{{ component('PageBuilder', {'idField' : 'page_uri'}) }}\n```\n\n# Result\n\nIf everything goes well, you should have a screen like this :\n\n![Screenshot of the result](./acseopagebuilder.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facseo%2Fpagebuilderbundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Facseo%2Fpagebuilderbundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Facseo%2Fpagebuilderbundle/lists"}