Visual Builder is a drag and drop interface creator for Laravel.  It's designed to allow someone with minimal PHP experience to create forms.

For developers, it massively speeds up the process of creating forms for front and backend and allows us to easily include a set of components on the page.

Visual builder admin

• Own Auth Guard and user table
• Admin interface on customisable url
• Admin can be disabled for production use

Visual Builder allows a developer to create layouts which contain forms, fields, buttons or any custom component.

This is not intended for end users but as a tool for developers to manage their components, make them more easily reusable and configurable via a web interface.

Visual builder includes:-

• Layout Editor
• Forms
• Fields - linked to a model's attribute to define label, placeholder, validation, icon, custom JS or any other custom attribute.
• Validators - 62 Built in laravel validators and add your own
• Inputs (Components) - Currently 23 bootstrap 5 components, but they could be your own tailwind or livewire components.
• Import/Export of layouts.  Id's and relations use NanoId's to prevent ID clashes.
• Email Template Editor

Creating a new form

Let’s and see how easy development can be.

1. Name your form
2. Set the URL the form will submit to.
3. Choose a model, if your models are not stored in App\Models you can add custom paths for discovery.
4. Hit Save

You’ll notice the form is doing client side validation.  This is using Laravel’s as yet undocumented precognition which allows us to use server side validation rules from the client side via ajax request. Super cool!  This is the only feature that I’ve missed from Yii framework that's now built in to Laravel.

On this form when we change the submit url the available methods are also updated.  We’ve all submitted forms using GET instead of POST at some point.  This solves that problem by only providing available methods on the form.

Clone, Link or Create a new layout.

A  form needs a layout, we can create a new one or link to an existing layout.  The layout contains all the elements on the form and it’s common for say create and edit forms to be identical.  In that case we can link the layout to multiple forms, minimising duplication of work.

The layout component can include nested fields, buttons, custom blade or components.