Download the PHP package tivents/livewire-form-builder without Composer
On this page you can find all versions of the php package tivents/livewire-form-builder. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download tivents/livewire-form-builder
More information about tivents/livewire-form-builder
Files in tivents/livewire-form-builder
Package livewire-form-builder
Short Description A powerful drag-and-drop form builder for Laravel 12 with Livewire 5, supporting all field types, conditional logic, multi-column layouts, and form submissions.
License MIT
Informations about the package livewire-form-builder
Laravel Form Architect
A powerful, drag-and-drop form builder for Laravel 12 and Livewire 5 — a drop-in replacement for form.io.
The package ships no Models and no Migrations. You own your data layer. The package communicates with your app through a clean FormRepositoryContract interface.
Features
| Feature | |
|---|---|
| Drag & Drop builder canvas | ✅ |
| 15 field types | ✅ |
| Multi-column layout (full, 1/2, 1/3, 2/3, 1/4, 3/4) | ✅ |
| Repeater groups with nested columns | ✅ |
| Conditional logic (show/hide per AND/OR rules) | ✅ |
| Real-time per-field validation | ✅ |
| File uploads (single & multiple) | ✅ |
| JSON schema import / export | ✅ |
| CSV submission export | ✅ |
| Repository pattern — bring your own Model | ✅ |
| Artisan scaffolding commands | ✅ |
| Fully publishable views | ✅ |
Field types
| Group | Types |
|---|---|
| Inputs | text, textarea, number, select, checkbox, radio, toggle, datetime, file, repeater, hidden |
| Layout | heading, hint, html, divider, row |
Requirements
- PHP
^8.2 - Laravel
^12.0 - Livewire
^4.0
Installation
1. Publish config
2. Publish the repository stub
This places the following file in your project:
| File | Purpose |
|---|---|
app/Repositories/LivewireFormBuilderRepository.php |
Eloquent implementation of FormRepositoryContract |
The package ships no migration. Create your own migration for the forms and form_submissions tables (the stub's docblock shows the expected columns) and run php artisan migrate when ready.
You are free to rename tables, add columns, or swap out Eloquent for anything else — as long as your repository implements the contract.
3. Include the package styles (Tailwind CSS)
The builder and renderer use Tailwind CSS classes. When you embed the components inside your own app layout, Tailwind's build step must scan the package views — otherwise the classes will be purged and the UI will be unstyled.
Tailwind v4 — add an @source directive to your resources/css/app.css:
Tailwind v3 — add the path to the content array in your tailwind.config.js:
Then rebuild your assets (npm run dev / npm run build).
Note: The built-in admin routes (
/livewire-form-builder) use the package's own layout, which loads Tailwind via CDN and does not require the above. The step above is only needed when embedding<livewire:livewire-form-builder::builder />or<livewire:livewire-form-builder::renderer />inside your own Blade layouts.
4. Bind the repository
In app/Providers/AppServiceProvider.php:
Or set it in config/livewire-form-builder.php:
Usage
Admin builder UI
Navigate to /livewire-form-builder — requires the middleware configured in config/livewire-form-builder.php (auth by default).
Embed the builder in your own view
Embed the renderer (public-facing)
Renderer props
| Prop | Type | Default | Description |
|---|---|---|---|
form-id |
int\|string\|null |
null |
Load schema from repository and associate submissions |
schema |
array |
[] |
Pass schema directly (flat field array or full {name, schema, settings} object). When set, the repository is not called for schema loading. form-id is still used to save submissions. |
submission-id |
int\|string\|null |
null |
Edit mode — pre-fills the form and calls updateSubmission on submit instead of saveSubmission |
initial-data |
array |
[] |
Pre-fill data for edit mode. Skips the repository findSubmissionOrFail call when provided. |
extra-fields |
array |
[] |
Additional fields injected from the backend, not part of the schema. Values are merged into the submission data. |
show-hidden |
bool |
false |
Show fields marked as hidden: true in the schema (with a "Hidden field" badge). |
success-message |
string |
'Thank you! Your response has been recorded.' |
Message shown after successful submission (no redirect). |
redirect-url |
string |
'' |
Redirect to this URL after submit instead of showing the success message. |
Listen to Livewire events
Listen to JS events
Configuration (config/livewire-form-builder.php)
Adding a Custom Field Type
Use the scaffold command:
This generates:
app/FormFields/StarRatingField.php— implement your logicresources/views/vendor/livewire-form-builder/fields/star_rating.blade.php— renderer viewresources/views/vendor/livewire-form-builder/settings/star_rating.blade.php— builder settings panel
Then register it:
Row / Column Layout
Fields support a flat width property (full, 1/2, 1/3, 2/3, 1/4, 3/4) that positions them on a shared 12-column grid. For explicit structural grouping, use the row field type as a container.
A row is always full-width itself and renders a nested 12-column grid for its children. Fields inside a row use the same width values.
When to use row:
- You want to move or delete a group of fields as a unit in the builder
- You need semantically grouped columns (e.g. first name + last name side by side)
- You want to mix different widths within a clearly bounded section
Schema structure:
Children support all standard field properties (validation, conditional logic, etc.). The row field itself carries no validation rules.
JSON Schema Format
Field properties
| Property | Description |
|---|---|
type |
Field type (see field types table) |
key |
Unique identifier within the form — used as the data key in submissions |
label |
Display label |
width |
Column width: full, 1/2, 1/3, 2/3, 1/4, 3/4 |
required |
true to make the field mandatory |
hidden |
true to hide the field in the renderer by default. The field is still initialised and its default value is submitted. Visible when :show-hidden="true" is passed to the renderer. Configurable in the builder settings panel. |
default |
Default value pre-filled on mount |
disabled |
true to render the input as read-only |
placeholder |
Input placeholder text |
hint |
Helper text shown below the label |
conditions |
Conditional logic — see below |
Examples
The examples/ directory contains ready-to-copy code for common integration scenarios:
| File | Pattern | Use case |
|---|---|---|
ApiWebhookRepository.php |
Repository decorator | Saves to DB and POSTs a signed JSON payload to a webhook URL |
FormSubmissionListener.php |
Laravel event listener | Reacts to a FormSubmitted event — supports ShouldQueue for background processing |
api-form-page.blade.php |
Client-side JS | Listens to the browser form-submitted event and calls any HTTP endpoint via fetch() |
CentralApiFormRepository.php |
Central API repository | Full repository backed entirely by an HTTP API — no local DB needed; for multi-system setups |
See examples/README.md for setup instructions and payload shapes.
Repository Contract
Your repository must implement Tivents\LivewireFormBuilder\Contracts\FormRepositoryContract:
| Method | Description |
|---|---|
findOrFail(id) |
Return form object with at least id, name, schema, settings |
create(data) |
Persist new form, return it |
update(id, data) |
Update form, return it |
delete(id) |
Delete form |
paginate(perPage) |
Return paginated list of forms |
saveSubmission(formId, data, meta) |
Store a new submission |
updateSubmission(submissionId, data, meta) |
Update an existing submission (called in edit mode) |
paginateSubmissions(formId, perPage) |
Return paginated submissions for a form |
findSubmissionOrFail(formId, submissionId) |
Return single submission object with a data array property |
deleteSubmission(submissionId) |
Delete submission |
Artisan Commands
License
MIT