Backpack DevTools v5 - A Proper Refactor

We just merged a significant refactor of Backpack DevTools — the package that lets you visually scaffold migrations, models, relationsh...

We just merged a significant refactor of Backpack DevTools — the package that lets you visually scaffold migrations, models, relationships, and CRUD panels directly from your browser. This post covers what changed, why we did it, and why it matters for you.

---

The Problem With the Old Architecture

DevTools has been around for a while, and over time the schema builder, the heart of the package, had accumulated complexity. The UI was powered by two separate Livewire components (MigrationSchema and RelationshipSchema) that had to constantly talk to each other via browser events to stay in sync. Between the two of them, there were 38 dispatched events fired for every meaningful user interaction. Every time you added a column, changed a type, or toggled a modifier, a chain of events had to fire across component boundaries just to keep the UI consistent. It worked, but it was brittle and slow to reason about.

There was also no test suite. None. Which made changes nerve-wracking.

---

What We Changed

A Single, Unified Schema Builder Component

The two-component architecture is gone. Both components have been merged into a single SchemaBuilder Livewire component. The 960+ lines of scattered, event-driven logic across two files has been distilled into one clean component — with only 2 dispatched events remaining (both for legitimate UI-only concerns, not state synchronization).

The result is a more predictable UI: state lives in one place, updates are immediate, and there's no inter-component choreography that can fall out of sync. The schema builder simply feels snappier.

This was also the right moment to upgrade to Livewire v4, which brings its own performance improvements and a cleaner wire model for deeply nested data.

---

JSON Schema Import & Export

This is the feature we're most excited about.

You can now export any schema definition as a JSON file and import it on any other DevTools installation. The format is straightforward so you can even create the JSON manually if you wanted.

What this unlocks in practice, and why we're genuinely excited about it: if DevTools ever produces unexpected output for your schema — a wrong migration, a missing relationship, anything — you can now export your schema as a JSON and attach it to the GitHub issue. We load it, hit generate, and we're looking at the exact same thing you are. No more "here's a description of what I was trying to do", no back-and-forth trying to reproduce the setup. One file, one click, reproduced.

That's the real win. The rest — teams sharing starter schemas, tutorial authors publishing a JSON instead of a 20-step walkthrough, version-controlling your scaffolding — is a bonus on top of that.

---

A Real Internal Architecture

The refactor wasn't just about the UI layer. Under the hood, the package now has proper structure where there was previously just ad-hoc logic scattered across components:

• Value Objects — SchemaDefinition, ColumnDefinition, RelationshipDefinition, and friends are now first-class objects that carry schema data cleanly through the entire generation pipeline.
• Registries — Column types, modifiers, relation types, and charset/collation options are now managed through dedicated registry classes (ColumnTypeRegistry, ColumnModifierRegistry, etc.) instead of being hardcoded inline.
• Serializer — SchemaSerializer handles the JSON import/export in a single, testable place.
• Contracts — BackpackAdapterContract and BlueprintAdapterContract define explicit interfaces for the generator adapters, making them independently testable.

None of this is visible to end users, but it's what makes everything else on this list possible.

---

Hundreds of Tests

The previous version had no automated test suite. This version ships with:

• 235 unit tests covering generators, value objects, registries, serializers, and the Livewire component logic
• 174 browser tests that actually open a Chromium browser, navigate the DevTools UI, and assert that everything works end-to-end

The browser suite covers the schema builder interactions, the JSON import flow, the model/migration/operation list pages, log management, and more.

This is the boring foundation that makes the rest sustainable. Changes are now verifiable. Regressions get caught automatically.

---

PHP 8.3 Minimum

The package now requires PHP 8.3+. Constructor property promotion, readonly classes, and modern type system features are used throughout, no more hesitating to use the language properly.

---

Why It Took a While

Because we did it properly. The temptation with refactors like this is to move fast and ship something that looks different but has the same fragile foundation. We didn't do that. The value objects, registries, and serializers had to exist before the component could be simplified. The tests had to be written alongside the changes, not after. The JSON format had to be designed so it's forwards-compatible and actually useful, not just an export curiosity.

The result is a DevTools that's substantially easier to maintain going forward, and one that should feel noticeably better to use. Not to mention that we have a solid base to build upon now.

---

Getting the Update

Update DevTools via Composer:

composer update backpack/devtools

The package now requires Livewire v4, so make sure your application is also on Livewire v4 before updating.

If you run into any issues, the Community Forum is the best place to report them.