Download the PHP package mrclln/wire-form-builder without Composer

Livewire Form Builder

A standalone, open-source Laravel Livewire package that provides a dynamic, drag-and-drop Form Builder. It lets you visually compose forms, exports the result as form schema JSON, and renders saved schemas as functional forms.

Inspired by the schema layout and field options of jQuery FormBuilder — but built natively with Livewire 4 + Alpine.js. No jQuery, no FormBuilder JS is used.

Features

• 🧩 Drag & drop canvas with Livewire 4's native wire:sortable reordering.
• 🎛 Sidebar palette of field types: text, textarea, select, checkbox, checkbox group, radio, date, file, plus layout elements (header, paragraph), and Section dividers that render the form as a multi-step wizard (Google Forms-style), where fields below each section become their own page.
• ⚙️ Field settings drawer to edit label, name, placeholder, required, options, and a custom CSS class (className).
• 📋 Duplicate fields with a single click to copy any field on the canvas.
• 📦 JSON schema output generated live and ready to persist.
• 🖥 FormRenderer component renders a saved schema into a working form.
• 🔁 Two-way #[Modelable] binding on both components so a parent can stay in sync with wire:model — no manual listeners required.
• 🎨 Fully Tailwind-configurable — every class is pulled from a publishable config/wire-form-builder.php.

Demo

See the form builder in action:

▶️ Watch the demo on YouTube

Requirements

• PHP >= 8.2
• Laravel 11 / 12 / 13
• Livewire 4
• Tailwind CSS (in your host app)

Tailwind CSS setup

This package ships its styles as Tailwind utility classes through its Blade views and config/wire-form-builder.php. You must make sure your app's Tailwind build scans those files, otherwise classes (e.g. the builder's grid-cols-[16rem_1fr]) are never generated and the palette/canvas will appear unstyled and stacked.

Tailwind v4

Tailwind v4 does not scan vendor/ automatically. Add the package's views (and optionally its config) as a source in your resources/css/app.css:

Then rebuild your assets and hard-refresh:

Tailwind v3

Include the package in your content globs in tailwind.config.js:

Installation

Publish the configuration and/or the views:

Usage

Editor (FormBuilder)

Drop the editor anywhere in a Blade view:

Add fields from the sidebar, reorder them by dragging the handle, edit each field in the drawer (label, name, placeholder, required, options, or a custom CSS class), duplicate a field, or remove it. The generated JSON is kept in sync with the canvas at all times.

You can also seed an existing schema:

Or pre-seed from a JSON schema string:

Binding the schema (#[Modelable])

The schema property is marked #[Modelable], so a parent component can bind to it with wire:model and keep it in two-way sync as fields are added, edited, reordered, duplicated, or removed:

Whenever the canvas changes, $formSchema on the parent updates automatically (no manual @input listener required). To react to changes server-side, emit a listener or read the property in any parent action.

You can also read or normalise the canvas from plain PHP via the component's helpers:

Renderer (FormRenderer)

Pass a schema (array or JSON string) to render a functional form:

The schemaFields property is marked #[Modelable], so you can also bind it two-way with wire:model. As users fill in the rendered fields, the value key is written into each schema entry, and the parent's bound property updates in real-time — no submit button required.

The rendered form fields bind to schemaFields.{index}.value, so every keystroke is reflected in the parent's $formSchema array. Each entry looks like:

Retrieve a clean name => value map at any time via $formRenderer->getAnswers().

Backend API (FormBuilder facade)

When you need to read, normalise, or persist schema JSON from plain PHP (e.g. saving a builder's canvas to the database), use the FormBuilder facade:

Customizing styles

Every class is defined in config/wire-form-builder.php under styles. For example, to restyle text inputs:

Views reference these via config('wire-form-builder.styles...'), so no Blade editing is required for restyling. The field_types key controls which field types appear in the palette.

Architecture

License

MIT © mrclln