{"id":37007192,"url":"https://github.com/allamo123/laravel-grapes","last_synced_at":"2026-01-14T00:46:32.778Z","repository":{"id":64859186,"uuid":"577150459","full_name":"allamo123/laravel-grapes","owner":"allamo123","description":"Laravel Grapes is a library for laravel framework, that offer cms drag and drop page builder for frontend which support all Laravel functionality and help user to change all frontend and content just in simple clicks.","archived":false,"fork":false,"pushed_at":"2024-03-19T21:41:40.000Z","size":11818,"stargazers_count":187,"open_issues_count":11,"forks_count":38,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-10-31T02:14:38.319Z","etag":null,"topics":["drag-and-drop","laravel","laravel-cms-frontend-builder","laravel-grapejs","laravel-grapes-package","laravel-package","package","page-builder","php"],"latest_commit_sha":null,"homepage":"https://github.com/allamo123/laravel-grapes","language":"CSS","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/allamo123.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}},"created_at":"2022-12-12T04:34:47.000Z","updated_at":"2025-10-15T14:00:07.000Z","dependencies_parsed_at":"2024-03-18T22:49:01.489Z","dependency_job_id":"2b41ff19-94d9-4286-a8ef-01af9cc62027","html_url":"https://github.com/allamo123/laravel-grapes","commit_stats":{"total_commits":268,"total_committers":2,"mean_commits":134.0,"dds":0.003731343283582045,"last_synced_commit":"625bae7e7b7fa469ad08a0e936c1d06177f7f6c1"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/allamo123/laravel-grapes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allamo123%2Flaravel-grapes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allamo123%2Flaravel-grapes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allamo123%2Flaravel-grapes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allamo123%2Flaravel-grapes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/allamo123","download_url":"https://codeload.github.com/allamo123/laravel-grapes/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/allamo123%2Flaravel-grapes/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28406576,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-13T21:51:37.118Z","status":"ssl_error","status_checked_at":"2026-01-13T21:45:14.585Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["drag-and-drop","laravel","laravel-cms-frontend-builder","laravel-grapejs","laravel-grapes-package","laravel-package","package","page-builder","php"],"created_at":"2026-01-14T00:46:32.691Z","updated_at":"2026-01-14T00:46:32.770Z","avatar_url":"https://github.com/allamo123.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"./laravel-grapes-logo.png\" width=\"300\"\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/allamo123/laravel-grapes?color=%23000\u0026style=mit\"\u003e\n\u003cimg alt=\"Total Download\" src=\"https://img.shields.io/packagist/dm/msa/laravel-grapes\"\u003e\n\u003cimg alt=\"GitHub release (latest by date including pre-releases)\" src=\"https://img.shields.io/github/v/release/allamo123/laravel-grapes?include_prereleases\"\u003e\n\u003c/p\u003e\n\u003cp align=\"left\"\u003e\u003cimg src=\"./screenshots/screenshot_01.png\"\u003e\u003c/p\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eTable of Contents\u003c/summary\u003e\n  \u003col\u003e\n    \u003cli\u003e\n        \u003ca href=\"#about-laravel-grapes\"\u003eAbout Laravel Grapes\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003ca href=\"#regular-version-vs-pro-version\"\u003eDiffrence Between Regular Version And Pro Version\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003ca href=\"#installation-steps\"\u003eInstallation Steps\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003ca href=\"#usage\"\u003eUsage\u003c/a\u003e\n        \u003cul\u003e\n            \u003cli\u003e\n                \u003ca href=\"#1-options-panel\"\u003eOptions Panel\u003c/a\u003e\n                \u003cul\u003e\n                    \u003cli\u003e\u003ca href=\"#view-components\"\u003eView Components\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca href=\"#preview\"\u003ePreview\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca href=\"#full-screen\"\u003eFull Screen\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca href=\"#view-code\"\u003eView Code\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca href=\"#create-new-page\"\u003eCreate New Page\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca href=\"#Edit Code\"\u003eEdit Code\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca href=\"#Component Manager\"\u003eComponent Manager\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca href=\"#page-manager\"\u003ePage Manager\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca href=\"#clear-canvas\"\u003eClear Canvas\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca href=\"#save-component\"\u003eSave Component\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca href=\"#save-changes\"\u003eSave Changes\u003c/a\u003e\u003c/li\u003e\n                \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\n                \u003ca href=\"#2-page-panel\"\u003ePage Panel\u003c/a\u003e\n                \u003cul\u003e\n                    \u003cli\u003e\u003ca href=\"#select-page\"\u003eSelect Page\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca href=\"#select-device\"\u003eSelect Device\u003c/a\u003e\u003c/li\u003e\n                \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\n                \u003ca href=\"#3-view-panel\"\u003eView Panel\u003c/a\u003e\n                \u003cul\u003e\n                    \u003cli\u003e\u003ca href=\"#block-manager\"\u003eBlock Manager\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca href=\"#layer-manager\"\u003eLayer Manager\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca href=\"#component-settings\"\u003eComponent Settings\u003c/a\u003e\u003c/li\u003e\n                    \u003cli\u003e\u003ca href=\"#style-manager\"\u003eStyle Manager\u003c/a\u003e\u003c/li\u003e\n                \u003c/ul\u003e\n            \u003c/li\u003e\n            \u003cli\u003e\n                \u003ca href=\"#customize-builder-style-sheet\"\u003eCustomize Builder Style Sheet\u003c/a\u003e\n            \u003c/li\u003e\n        \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003ca href=\"#translations\"\u003eTranslations\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003ca href=\"#author\"\u003eAuthor\u003c/a\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n        \u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\n    \u003c/li\u003e\n  \u003c/ol\u003e\n\u003c/details\u003e\n\n## About Laravel Grapes\n\nLaravel Grapes is a library for laravel framework, that offer cms drag and drop page builder for frontend which support all Laravel functionality and help user to change all frontend and content just in simple clicks.\n\nLaravel Grapes Comes With A Pro Version Will Be Available On [Code Canyon](https://codecanyon.net/) SOON !.\n\n\u003chr\u003e\n\n## Diffrence Between Regular Version And Pro Version\n\n| Feature                           | Regular Version | Pro Version |\n|-----------------------------------|-----------------|-------------|\n| Laravel CSRF                      | yes             | yes         |\n| Laravel Auth User Condition       | yes             | yes         |\n| Laravel Auth Dynamic Guard        | yes             | yes         |\n| Multilingual                      | yes             | yes         |\n| Dynamic Laravel Shortcode widgets | 1               | unlimted    |\n| Dynamic Routes /{id}              | No              | yes         |\n\n\n\u003chr\u003e\n\n## Installation Steps\n\n```jsx \ncomposer require msa/laravel-grapes\n```\n```jsx \nphp artisan vendor:publish --provider=\"MSA\\LaravelGrapes\\LaravelGrapesServiceProvider\" --tag=\"*\"\n```\n\n```jsx \nphp artisan migrate\n```\n\n\n#### Go to config/lg.php\n\n```jsx\n    \u003c?php\n\n    return [\n        // routes configurations\n        'builder_prefix' =\u003e 'hello', // prefix for builder\n\n        'middleware' =\u003e null, // middleware for builder\n\n        'frontend_prefix' =\u003e '', // prefix for frontend\n\n        /* Define additional translation languages. */\n        'languages' =\u003e [\n            'ar',\n            'es',\n        ],\n    ];`\n```\n\n##### 1) builder_prefix\nThe builder by default come with route \u003ccode\u003eroute('website.builder')\u003c/code\u003e which consists of   [your-domain.com/hello/front-end-builder](#1-builder_prefix).\u003cbr\u003e\nyou can change the builder prefix to hi so now the builder load with route prefix hi instead of hello.\u003cbr\u003e\n\n##### 2) middleware\nAssign any middleware you want to the builder for example auth:admin.\n\n##### 3) frontend_prefix\nThe frontend prefix by default it comes empty that mean that any generated front end page builder it load directly with your slug that created by you so if you need to set prefix for your generated frontend so change it to your prefix that you want. \u003cbr\u003e\n\nNow laravel grapes is working.\n\nNavigate to builder route [your-domain.com/builder_prefix/front-end-builder](#1-builder_prefix).\n\n\u003cp align=\"left\"\u003e\u003cimg src=\"./screenshots/screenshot_02.png\"\u003e\u003c/p\u003e\n\n\u003chr\u003e\n\n## Usage\n\nThe Controll Panel Consists Of 3 Panels :-\n\n[1) Options Panel](#1-options-panel) \u003cbr\u003e\n\n[2) Page Panel](#2-page-panel) \u003cbr\u003e\n\n[3) View Panel](#3-view-panel) \u003cbr\u003e\n\n[4) Customize Builder Style Sheet](#customize-builder-style-sheet) \u003cbr\u003e\n\n### 1. Options Panel\n\u003cp align=\"left\"\u003e\u003cimg src=\"./screenshots/options_panel_screenshot.png\" width=\"400\"\u003e\u003c/p\u003e\u003cbr\u003e\n\nThe options panel consists of 11 buttons :-\n\n- [View Components](#view-components)\n- [Preview](#preview)\n- [Full Screen](#full-screen)\n- [View Code](#view-code)\n- [Create New Page](#create-new-page)\n- [Edit Code](#edit-code)\n- [Component Manager](#component-manager)\n- [Page Manager](#page-manager)\n- [Clear Canvas](#clear-canvas)\n- [Save Component](#save-component)\n- [Save Changes](#save-changes)\n\n#### View Components\nThe view component button show grid lines for all components droped in the canvas, this help to to select each component individual for example take a look on the screenshot below.\u003cbr\u003e\u003cbr\u003e\n\n\u003cp align=\"left\"\u003e\u003cimg src=\"./screenshots/screenshot_04.png\" width=\"790\"\u003e\u003c/p\u003e\u003cbr\u003e\n\n#### Preview\nThe preview button help you to show page without pannels like screenshot below\u003cbr\u003e\n\u003cp align=\"left\"\u003e\u003cimg src=\"./screenshots/screenshot_preview.png\" width=\"790\"\u003e\u003c/p\u003e\u003cbr\u003e\n\n#### Full Screen\nThe full screen mode button hide all browser utils and show only the builder.\u003cbr\u003e\u003cbr\u003e\n\n#### View Code\nThe view code button show you the html and css code of the page like sceenshot below\u003cbr\u003e\n\u003cp align=\"left\"\u003e\u003cimg src=\"./screenshots/screenshot_05.png\" width=\"790\"\u003e\u003c/p\u003e\u003cbr\u003e\n\n#### Create New Page\n\nThe create new page button at topbar when you press on it, the popup modal open with new page form, so fill page name and slug and if you need the page become a home page type slug /  .\u003cbr\u003e\n\n\u003cp align=\"left\"\u003e\u003cimg src=\"./screenshots/screenshot_03.png\" width=\"790\"\u003e\u003c/p\u003e\u003cbr\u003e\nAfter submit the form will receive toast notification that page has been created successfully, so select the new page throw select page input on the top bar to start modifying the page.\u003cbr\u003e\u003cbr\u003e\n\nDon't forget to remove the default route in routes/web.php becaues it will conflict with home page, you don't need web.php for frontend routes because laravel grapes come with it own route file\n\n``` jsx\n\u003c?php\n\nuse Illuminate\\Support\\Facades\\Route;\n\n/*\n|--------------------------------------------------------------------------\n| Web Routes\n|--------------------------------------------------------------------------\n|\n| Here is where you can register web routes for your application. These\n| routes are loaded by the RouteServiceProvider within a group which\n| contains the \"web\" middleware group. Now create something great!\n|\n*/\n\n// Route::get('/', function () {\n//     return view('welcome');\n// });\n\n``` \n\u003cbr\u003e\n\n#### Edit Code\nThe edit code button it will open a popup code editor modal that hold page code including html and css.\u003cbr\u003e\n\u003cp align=\"left\"\u003e\u003cimg src=\"./screenshots/edit_code_screenshot.png\" width=\"790\"\u003e\u003c/p\u003e\u003cbr\u003e\nSo you can edit the html and css code from the code editor popup, for editing syles you will find page style inside tag \u003ccode\u003e\u003cstyle\u003e\u003c/style\u003e\u003c/code\u003e.\u003cbr\u003e\n\n###### Note: Html and css on the code editor merged in one page but after submit the code you can [View Code](#view-code), you will find styles and html each of them seperate and each generated page has it's own blade file and css file.\u003cbr\u003e\u003cbr\u003e\n\n\n#### Component Manager\nThe Component Manager button will open a popup hold all custome components that has been [saved](#save-component) to reused on another page to let you edit name of the component or delete it.\u003cbr\u003e\n\u003cp align=\"left\"\u003e\u003cimg src=\"./screenshots/component_manager_screenshot.png\" width=\"790\"\u003e\u003c/p\u003e\u003cbr\u003e\n\n#### Page Manager\nThe page manager button will open a popup hold all pages and let you to edit page name and slug.\u003cbr\u003e\n\u003cp align=\"left\"\u003e\u003cimg src=\"./screenshots/pages_manager_screenshot.png\" width=\"790\"\u003e\u003c/p\u003e\u003cbr\u003e\n\n#### Clear Canvas\nThe clear canvas button will remove all components from the canvas.\u003cbr\u003e\u003cbr\u003e\n\n#### Save Component\nLaravel Grapes let you to save any custome component for reuse it on other pages all you need to select the component and click on [Save Component Button](#save-component).\u003cbr\u003e\u003cbr\u003e\n\n#### Save Changes\nThe save changes button update the page content and if you check the page slug you will find that page content has been changed.\u003cbr\u003e\u003cbr\u003e\n\n### 2. Page Panel\n\nThe options panel consists of 2 select input :-\n\n- [Select Page](#select-page)\n- [Select Device](#select-device)\n\n#### Select Page\nThe select page input let you to select page that you need to modify it.\u003cbr\u003e\u003cbr\u003e\n\n#### Select Device\nThe select device input let you to modify page html and styles on different screens with the following sizes\n- Desktop\n- Extra Large\n- Large\n- Tablet\n- Medium\n- Mobile Landscape\n- Small\n- Extra Small\n- Mobile Portrait\n\n### 3. View Panel\nThe View Panel consists of 4 buttons :-\n- [Block Manager](#block-manager)\n- [Layer Manager](#layer-manager)\n- [Components Settings](#components-settings)\n- [Style Manager](#style-manager)\n\n\n#### Block Manager\nThe Block Manager Comes with Bootstrap Components :-\n- Layout which holds\n  - [ ] Navbar\n  - [ ] Section\n  - [ ] Container\n  - [ ] Row\n  - [ ] Column\n  - [ ] Column break\n  - [ ] Media Object\n\n- Components which holds\n  - [ ] Dropdown Menu\n  - [ ] Menu\n  - [ ] Menu Link\n  - [ ] Alert\n  - [ ] Link\n  - [ ] Tabs\n  - [ ] Tab\n  - [ ] Badge\n  - [ ] Card\n  - [ ] Card Container\n  - [ ] Collapse\n  - [ ] Dropdown Item\n  - [ ] Dropdown Button\n\n- Typography which holds\n  - [ ] Header\n  - [ ] Paragraph\n  - [ ] Separator\n\n- Templates which holds\n  - [ ] 5 prebuilt templates\n\n- Saved which holds\n  - [ ] All your saved custom\u003cbr\u003e \n  \n#### Layer Manager\nAnother utility tool you might find useful when working with web elements is the layer manger. It's a tree overview of the structure nodes and enables you to manage it easier.\u003cbr\u003e\n\n\u003cp align=\"left\"\u003e\u003cimg src=\"./screenshots/layer_manager_screenshot.png\" width=\"790\"\u003e\u003c/p\u003e\u003cbr\u003e\n\n#### Components Settings\nEach component come with it's own settings you can modify it for example, if you select from the canvas link element and got to component settings you will find the following:\n\n* The attribute of href link\n* The attribute of target\n* The attribute of toggle\n* Show Laravel Auth User Email\n* Laravel Auth User option, for show element\n* Laravel Auth Guard option, for show element. (default is web)\n* The attribute of id\n* The attribute of title\u003cbr\u003e\n\n\u003cp align=\"left\"\u003e\u003cimg src=\"./screenshots/component_settings_screenshot.png\" width=\"790\"\u003e\u003c/p\u003e\u003cbr\u003e\n\n#### Style Manager\n\nThe Style manager is composed by sectors, which group inside different types of CSS properties. So you can add, for instance, a Dimension sector for width and height, and another one as Typography for font-size and color and more. So it's up to you decide how organize sectors.\u003cbr\u003e\n\n\u003cp align=\"left\"\u003e\u003cimg src=\"./screenshots/style_manager_screenshot.png\" width=\"790\"\u003e\u003c/p\u003e\u003cbr\u003e\n\n- Classes\n  - [ ] State (for styling the hover effect, and click, etc...)\n  - [ ] Add class\n  - [ ] remove class\n\n- General\n  - [ ] Float Options\n  - [ ] Display Options\n  - [ ] Position Options\n\n- Flex Options\n\n- Dimension Options\n\n- Typography Options\n\n- Decorations Options\n\n- Extra\n  - [ ] Tarnsitions \n  - [ ] Prespective \n  - [ ] Transform\u003cbr\u003e\n\n### 4. Customize Builder Style Sheet\nGo to public/css/laravel-grapes.css and start Customizing Laravel Grapes Builder style sheet As You Wish.\n\n## Translations\nEach text component have translation input trait for your languages that you were defined in [config/lg.php](#go-to-configlgphp),  In the example below you will find Ar Local and Es Local .\u003cbr\u003e\n\n###### It supported rtl for arabic language (ar)\n\n\u003cp align=\"left\"\u003e\u003cimg src=\"./screenshots/translation-screenshot.png\" width=\"790\"\u003e\u003c/p\u003e\u003cbr\u003e\n\n## Author\n\n[![Mohamed Allam](https://github.com/allamo123.png?size=90)](https://github.com/allamo123) \n\n## [License](https://github.com/allamo123/laravel-grapes/blob/main/LICENSE)\n\nMIT © [Mohamed Allam ](https://github.com/allamo123)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallamo123%2Flaravel-grapes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fallamo123%2Flaravel-grapes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fallamo123%2Flaravel-grapes/lists"}