PHPackages umutsevimcann/laravel-visual-builder - 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. umutsevimcann/laravel-visual-builder ActiveLibrary[Admin Panels](/categories/admin) umutsevimcann/laravel-visual-builder ==================================== Modern visual page builder for Laravel — drag-drop section editor with live iframe preview, global design tokens, entrance animations, copy/paste, revisions, and responsive controls. Polymorphic — attach to any Eloquent model. v0.6.1(1mo ago)110MITPHPPHP ^8.2CI passing Since Apr 16Pushed 1mo agoCompare [ Source](https://github.com/umutsevimcann/laravel-visual-builder)[ Packagist](https://packagist.org/packages/umutsevimcann/laravel-visual-builder)[ Docs](https://github.com/umutsevimcann/laravel-visual-builder)[ RSS](/packages/umutsevimcann-laravel-visual-builder/feed)WikiDiscussions main Synced 1w ago READMEChangelog (1)Dependencies (9)Versions (25)Used By (0) Laravel Visual Builder ====================== [](#laravel-visual-builder) [![Latest Version on Packagist](https://camo.githubusercontent.com/4fd1b39fe5f86d29d0ecb354e64cfb1d32d69243a3e27857972260342ffa3219/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f756d7574736576696d63616e6e2f6c61726176656c2d76697375616c2d6275696c6465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/umutsevimcann/laravel-visual-builder)[![GitHub Tests Action Status](https://camo.githubusercontent.com/0ef8261920a0a3c63e09dea65260541cd579773343f2030d9b607e0c4acea942/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f756d7574736576696d63616e6e2f6c61726176656c2d76697375616c2d6275696c6465722f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/umutsevimcann/laravel-visual-builder/actions/workflows/run-tests.yml)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/cad1ef926ec62b67dc18c7522ae354c1da0808287e2029576ec2953558195751/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f756d7574736576696d63616e6e2f6c61726176656c2d76697375616c2d6275696c6465722f636f64652d7374796c652e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/umutsevimcann/laravel-visual-builder/actions/workflows/code-style.yml)[![Codecov](https://camo.githubusercontent.com/a7c579facea3fba7c77011987c0e475b32673d38c5a93a9d1c3ab354fc2f35a8/68747470733a2f2f696d672e736869656c64732e696f2f636f6465636f762f632f6769746875622f756d7574736576696d63616e6e2f6c61726176656c2d76697375616c2d6275696c6465723f7374796c653d666c61742d737175617265)](https://codecov.io/gh/umutsevimcann/laravel-visual-builder)[![Total Downloads](https://camo.githubusercontent.com/24c8f698e64d12f11806c28cd7b5dc9a305af1af7516c1a3553acdbb955cef0b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f756d7574736576696d63616e6e2f6c61726176656c2d76697375616c2d6275696c6465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/umutsevimcann/laravel-visual-builder)[![License: MIT](https://camo.githubusercontent.com/6c711032aff1ca0eb6b211aa6cb3649ce7fd64a7714e1181d4bb457f9680e7cf/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE.md) **Modern visual page builder for Laravel.** Drag-drop section editor with live iframe preview, global design tokens, entrance animations, copy/paste, revisions, and responsive controls. Polymorphic — attach to any Eloquent model. > Framework-agnostic UI: no AdminLTE/Filament/Bootstrap assumptions. Plays with any admin layout via a publishable Blade component. Feature Highlights ------------------ [](#feature-highlights) - **Live iframe preview** — click an element, edit on the right, see changes instantly - **3-tab panel** — Content / Style / Advanced - **Full field library** — text, HTML, toggle, select, link, image (upload), reference (multi-select), repeater - **Element-level styling** — typography, colors, spacing, border radius, shadows per-field - **Global Design System** — site-wide colors + fonts via CSS variables - **Motion effects** — 10 entrance animations, IntersectionObserver-driven, accessibility-aware - **Copy/paste + context menu** — right-click to duplicate, copy styles, paste - **Undo/redo** — 50-step history, `Ctrl+Z` / `Ctrl+Shift+Z` / `Ctrl+S` - **Responsive preview** — desktop/tablet/mobile viewport modes - **Revisions** — timestamped snapshots, restore any version - **Polymorphic** — attach builder to Pages, Posts, Products, any Eloquent model Philosophy ---------- [](#philosophy) This package provides the **framework** for a visual builder. You bring the **content schema**: - Register your own `SectionType` classes (Hero, Gallery, Contact Form, etc.) - Implement `MediaServiceInterface` with your file storage strategy - Implement `AuthorizationInterface` with your permission system - Customize Blade views if defaults don't match your admin layout Two example section types ship with the package to get you started. Requirements ------------ [](#requirements) - PHP 8.2+ - Laravel 11.0 or 12.0 - MySQL 5.7+ / PostgreSQL 10+ / SQLite 3.9+ (JSON column support) Installation ------------ [](#installation) ``` composer require umutsevimcann/laravel-visual-builder ``` Publish config, migrations, and assets: ``` php artisan vendor:publish --tag="visual-builder-config" php artisan vendor:publish --tag="visual-builder-migrations" php artisan vendor:publish --tag="visual-builder-assets" php artisan migrate ``` Optional — publish views for full control: ``` php artisan vendor:publish --tag="visual-builder-views" ``` Quick Start ----------- [](#quick-start) ### 1. Make a model "buildable" [](#1-make-a-model-buildable) ``` use Illuminate\Database\Eloquent\Model; use Umutsevimcann\VisualBuilder\Support\Concerns\HasVisualBuilder; class Page extends Model { use HasVisualBuilder; } ``` ### 2. Define your own section types [](#2-define-your-own-section-types) ``` // app/Builder/HeroSection.php namespace App\Builder; use Umutsevimcann\VisualBuilder\Domain\SectionTypes\SectionTypeInterface; use Umutsevimcann\VisualBuilder\Domain\SectionTypes\Fields\TextField; use Umutsevimcann\VisualBuilder\Domain\SectionTypes\Fields\ImageField; use Umutsevimcann\VisualBuilder\Domain\SectionTypes\Fields\LinkField; class HeroSection implements SectionTypeInterface { public function key(): string { return 'hero'; } public function label(): string { return 'Hero Banner'; } public function description(): string { return 'Full-width banner with heading, subtitle, and CTA.'; } public function icon(): string { return 'fa-solid fa-image'; } public function fields(): array { return [ new TextField('headline', 'Headline', translatable: true, maxLength: 120), new TextField('subtitle', 'Subtitle', translatable: true, maxLength: 250), new ImageField('background_image', 'Background Image'), new LinkField('cta', 'Call-to-action Button'), ]; } public function defaultContent(): array { return ['headline' => ['en' => 'Welcome'], 'subtitle' => ['en' => '']]; } public function defaultStyle(): array { return ['padding_y' => '80px']; } public function viewPartial(): string { return 'builder.sections.hero'; } public function allowsMultipleInstances(): bool { return false; } public function isDeletable(): bool { return true; } public function previewImage(): ?string { return null; } public function buildContentFromLegacySettings(array $legacy): array { return []; } } ``` ### 3. Register in your AppServiceProvider [](#3-register-in-your-appserviceprovider) ``` use App\Builder\HeroSection; use Umutsevimcann\VisualBuilder\Domain\SectionTypes\SectionTypeRegistry; public function boot(): void { $this->app->extend(SectionTypeRegistry::class, function ($registry) { $registry->register(new HeroSection()); return $registry; }); } ``` ### 4. Add the editor to your admin view [](#4-add-the-editor-to-your-admin-view) ``` @extends('admin.layout') @section('content') @endsection ``` ### 5. Render on the frontend [](#5-render-on-the-frontend) ``` @foreach($page->builderSections as $section) @includeIf('builder.sections.' . str_replace('_', '-', $section->type), [ 'section' => $section, ]) @endforeach ``` Documentation ------------- [](#documentation) - **[Architecture](docs/architecture.md)** — layer diagram, persistence schema, save pipeline, iframe protocol - **[Extension Points](docs/extension-points.md)** — 4 swap-point contracts, events, publishable assets, morph map - **[Field Types Reference](docs/field-types.md)** — all 8 shipped fields + custom field guide Customization ------------- [](#customization) ### Swap the media service [](#swap-the-media-service) By default uploads go to `storage/app/public/visual-builder/`. Override by binding your own: ``` use Umutsevimcann\VisualBuilder\Contracts\MediaServiceInterface; $this->app->bind(MediaServiceInterface::class, MyS3MediaService::class); ``` ### Authorization [](#authorization) Guard the builder with any gate or middleware: ``` // config/visual-builder.php 'middleware' => ['web', 'auth'], 'authorization_gate' => 'edit-pages', // optional Gate check ``` ### Custom views [](#custom-views) Publish views and edit any template: ``` php artisan vendor:publish --tag="visual-builder-views" ``` ### Field types [](#field-types) Extend `FieldDefinition` abstract class to create custom fields (e.g., color palette, icon picker, map coordinates). Architecture ------------ [](#architecture) ``` ┌─────────────────────────────────────────────────┐ │ Your App │ │ ├─ AppServiceProvider: register SectionTypes │ │ ├─ config/visual-builder.php │ │ └─ resources/views/builder/sections/ │ └─────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────┐ │ Visual Builder Package │ │ ├─ Contracts/ (interfaces you implement) │ │ ├─ Domain/ │ │ │ ├─ Models/BuilderSection (polymorphic) │ │ │ ├─ SectionTypes/ (registry + fields) │ │ │ ├─ Actions/ (CRUD + ApplyBuilderLayout) │ │ │ └─ Services/DesignTokenService │ │ ├─ Http/ (controllers, requests, routes) │ │ └─ Resources (views, CSS, JS) │ └─────────────────────────────────────────────────┘ ``` Testing ------- [](#testing) ``` composer test composer test-coverage composer analyse # PHPStan composer format # Pint ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for recent changes. Contributing ------------ [](#contributing) Pull requests welcome. CI runs Pint in `--test` mode — style issues fail the build instead of being auto-fixed. Run `composer format` locally before pushing: ``` composer test && composer format ``` Credits ------- [](#credits) - [Umut Sevimcan](https://github.com/umutsevimcann) - Built with [spatie/laravel-package-tools](https://github.com/spatie/laravel-package-tools) License ------- [](#license) MIT — please see [LICENSE.md](LICENSE.md). ### Health Score 39 — LowBetter than 84% of packages Maintenance89 Actively maintained with recent releases Popularity7 Limited adoption so far Community6 Small or concentrated contributor base Maturity46 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% 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 ~0 days Total 24 Last Release 53d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/1252fb4aae83745fa8bc1d76996558da63e8c0b3c84d28f9d6628d7ea23b1857?d=identicon)[umutsevimcann](/maintainers/umutsevimcann) --- Top Contributors [![umutsevimcann](https://avatars.githubusercontent.com/u/111816053?v=4)](https://github.com/umutsevimcann "umutsevimcann (47 commits)") --- Tags laravelcmswysiwygvisual editordrag-dropdesign-systempage builderlive preview ### Code Quality TestsPest Static AnalysisPHPStan Code StyleLaravel Pint Type Coverage Yes ### Embed Badge ![Health badge](/badges/umutsevimcann-laravel-visual-builder/health.svg) ``` [![Health](https://phpackages.com/badges/umutsevimcann-laravel-visual-builder/health.svg)](https://phpackages.com/packages/umutsevimcann-laravel-visual-builder) ``` ### Alternatives [spatie/laravel-pdf Create PDFs in Laravel apps 1.0k4.3M41](/packages/spatie-laravel-pdf)[rawilk/profile-filament-plugin Profile & MFA starter kit for filament. 3913.7k](/packages/rawilk-profile-filament-plugin)[guava/filament-knowledge-base A filament plugin that adds a knowledge base and help to your filament panel(s). 207140.2k1](/packages/guava-filament-knowledge-base)[mradder/filament-logger Audit logging, activity tracking, exports, alerts, and dashboards for Filament admin panels. 2210.5k](/packages/mradder-filament-logger)[cybertroniankelvin/graper A visual drag-and-drop page builder for Filament admin panels, powered by GrapeJS v3. Build landing pages, marketing sites, and custom content pages without writing code. 201.8k](/packages/cybertroniankelvin-graper)[andreia/filament-ui-switcher Add a modal with options to switch between different UI layouts and styles (colors, fonts, font sizes). 245.8k](/packages/andreia-filament-ui-switcher) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)