PHPackages msa/laravel-grapes - 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. [Utility & Helpers](/categories/utility) 4. / 5. msa/laravel-grapes ActiveLibrary[Utility & Helpers](/categories/utility) msa/laravel-grapes ================== laravel grapes is a cms drag and drop page builder v1.0.3(2y ago)1853.1k↑50%36[12 issues](https://github.com/allamo123/laravel-grapes/issues)MITCSS Since Dec 18Pushed 2y ago10 watchersCompare [ Source](https://github.com/allamo123/laravel-grapes)[ Packagist](https://packagist.org/packages/msa/laravel-grapes)[ RSS](/packages/msa-laravel-grapes/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (3)Dependencies (2)Versions (5)Used By (0) [![](./laravel-grapes-logo.png)](./laravel-grapes-logo.png) [![GitHub](https://camo.githubusercontent.com/b870fde0ba1c15d1e8535a7b95dd9f34b1d00775a18741a409d94c268c0a3bcd/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f616c6c616d6f3132332f6c61726176656c2d6772617065733f636f6c6f723d253233303030267374796c653d6d6974)](https://camo.githubusercontent.com/b870fde0ba1c15d1e8535a7b95dd9f34b1d00775a18741a409d94c268c0a3bcd/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f616c6c616d6f3132332f6c61726176656c2d6772617065733f636f6c6f723d253233303030267374796c653d6d6974)[![Total Download](https://camo.githubusercontent.com/a5747d6e226ab024ea8197e15eea722cf543bd446faf1e2b78ecd9b34467cc6f/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646d2f6d73612f6c61726176656c2d677261706573)](https://camo.githubusercontent.com/a5747d6e226ab024ea8197e15eea722cf543bd446faf1e2b78ecd9b34467cc6f/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646d2f6d73612f6c61726176656c2d677261706573)[![GitHub release (latest by date including pre-releases)](https://camo.githubusercontent.com/d611a86e65fc2bbd4b689386df00f159f1d67e2e40ea597f03809a00c41a12f8/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f616c6c616d6f3132332f6c61726176656c2d6772617065733f696e636c7564655f70726572656c6561736573)](https://camo.githubusercontent.com/d611a86e65fc2bbd4b689386df00f159f1d67e2e40ea597f03809a00c41a12f8/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f616c6c616d6f3132332f6c61726176656c2d6772617065733f696e636c7564655f70726572656c6561736573) [![](./screenshots/screenshot_01.png)](./screenshots/screenshot_01.png) Table of Contents1. [About Laravel Grapes](#about-laravel-grapes) 2. [Diffrence Between Regular Version And Pro Version](#regular-version-vs-pro-version) 3. [Installation Steps](#installation-steps) 4. [Usage](#usage) - [Options Panel](#1-options-panel) - [View Components](#view-components) - [Preview](#preview) - [Full Screen](#full-screen) - [View Code](#view-code) - [Create New Page](#create-new-page) - [Edit Code]() - [Component Manager]() - [Page Manager](#page-manager) - [Clear Canvas](#clear-canvas) - [Save Component](#save-component) - [Save Changes](#save-changes) - [Page Panel](#2-page-panel) - [Select Page](#select-page) - [Select Device](#select-device) - [View Panel](#3-view-panel) - [Block Manager](#block-manager) - [Layer Manager](#layer-manager) - [Component Settings](#component-settings) - [Style Manager](#style-manager) - [Customize Builder Style Sheet](#customize-builder-style-sheet) 5. [Translations](#translations) 6. [Author](#author) 7. [License](#license) About Laravel Grapes -------------------- [](#about-laravel-grapes) 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. Laravel Grapes Comes With A Pro Version Will Be Available On [Code Canyon](https://codecanyon.net/) SOON !. --- Diffrence Between Regular Version And Pro Version ------------------------------------------------- [](#diffrence-between-regular-version-and-pro-version) FeatureRegular VersionPro VersionLaravel CSRFyesyesLaravel Auth User ConditionyesyesLaravel Auth Dynamic GuardyesyesMultilingualyesyesDynamic Laravel Shortcode widgets1unlimtedDynamic Routes /{id}Noyes--- Installation Steps ------------------ [](#installation-steps) ``` composer require msa/laravel-grapes ``` ``` php artisan vendor:publish --provider="MSA\LaravelGrapes\LaravelGrapesServiceProvider" --tag="*" ``` ``` php artisan migrate ``` #### Go to config/lg.php [](#go-to-configlgphp) ``` 'hello', // prefix for builder 'middleware' => null, // middleware for builder 'frontend_prefix' => '', // prefix for frontend /* Define additional translation languages. */ 'languages' => [ 'ar', 'es', ], ];` ``` ##### 1) builder\_prefix [](#1-builder_prefix) The builder by default come with route `route('website.builder')` which consists of [your-domain.com/hello/front-end-builder](#1-builder_prefix). you can change the builder prefix to hi so now the builder load with route prefix hi instead of hello. ##### 2) middleware [](#2-middleware) Assign any middleware you want to the builder for example auth:admin. ##### 3) frontend\_prefix [](#3-frontend_prefix) The 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. Now laravel grapes is working. Navigate to builder route [your-domain.com/builder\_prefix/front-end-builder](#1-builder_prefix). [![](./screenshots/screenshot_02.png)](./screenshots/screenshot_02.png) --- Usage ----- [](#usage) The Controll Panel Consists Of 3 Panels :- [1) Options Panel](#1-options-panel) [2) Page Panel](#2-page-panel) [3) View Panel](#3-view-panel) [4) Customize Builder Style Sheet](#customize-builder-style-sheet) ### 1. Options Panel [](#1-options-panel) [![](./screenshots/options_panel_screenshot.png)](./screenshots/options_panel_screenshot.png) The options panel consists of 11 buttons :- - [View Components](#view-components) - [Preview](#preview) - [Full Screen](#full-screen) - [View Code](#view-code) - [Create New Page](#create-new-page) - [Edit Code](#edit-code) - [Component Manager](#component-manager) - [Page Manager](#page-manager) - [Clear Canvas](#clear-canvas) - [Save Component](#save-component) - [Save Changes](#save-changes) #### View Components [](#view-components) The 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. [![](./screenshots/screenshot_04.png)](./screenshots/screenshot_04.png) #### Preview [](#preview) The preview button help you to show page without pannels like screenshot below [![](./screenshots/screenshot_preview.png)](./screenshots/screenshot_preview.png) #### Full Screen [](#full-screen) The full screen mode button hide all browser utils and show only the builder. #### View Code [](#view-code) The view code button show you the html and css code of the page like sceenshot below [![](./screenshots/screenshot_05.png)](./screenshots/screenshot_05.png) #### Create New Page [](#create-new-page) The 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 / . [![](./screenshots/screenshot_03.png)](./screenshots/screenshot_03.png) After 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. Don'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 ```