Schema Addon

The WireFlow schema addon provides Blade components, a server-side trait, and Laravel validator rules for AlpineFlow's schema addon. Use it to build database-schema designers, ER diagrams, and resource graphs in Livewire.

Installation

The schema addon ships in the same WireFlow package — no separate install required. Run the install command once and it's available:

php artisan wireflow:install

For consumers who load AlpineFlow from npm rather than the bundled WireFlow dist, register the schema addon plugin alongside the core:

import AlpineFlow from '@getartisanflow/alpineflow';
import AlpineFlowSchema from '@getartisanflow/alpineflow/schema';

document.addEventListener('alpine:init', () => {
    window.Alpine.plugin(AlpineFlow);
    window.Alpine.plugin(AlpineFlowSchema);
});

The bundled WireFlow dist already includes the schema addon, so the npm path is only needed when you're managing AlpineFlow yourself.

Components

Component	Purpose
`<x-schema-designer>`	Opinionated full drop-in: canvas, inspectors, save controls.
`<x-flow-schema-node>`	Directive wrapper for schema-style nodes with optional SSR fallback.
`<x-schema-field>`	Composable row primitive — use to build custom field rows.
`<x-schema-node-inspector>`	Three-scope inspector — node level.
`<x-schema-row-inspector>`	Three-scope inspector — row level.
`<x-schema-edge-inspector>`	Three-scope inspector — edge level.

Server-side trait

WithSchemaDesigner — server-side CRUD over fields, edge cascade on field rename/remove, and event hooks for downstream persistence.

Validator rules

Rule	Purpose
`SchemaFieldName`	Validates field-name shape (no spaces, leading-letter, …).
`SchemaEdgeShape`	Validates edge connection shape (source/target match, sourceHandle present).

Wire bridge

The schema addon adds an asynchronous validation gate around drag-to-connect: dispatch @connect-validate from the canvas, resolve from the server, and the connection only commits when the server says yes.

See Server events for the full event reference.

Quick start

<?php
use ArtisanFlow\WireFlow\Concerns\WithSchemaDesigner;
use Livewire\Component;

class SchemaEditor extends Component
{
    use WithSchemaDesigner;

    public array $nodes = [
        ['id' => 'user', 'data' => ['label' => 'User', 'fields' => [['name' => 'id', 'type' => 'uuid', 'key' => 'primary']]]],
    ];

    public array $edges = [];

    public function render()
    {
        return view('livewire.schema-editor');
    }
}

<x-schema-designer :nodes="$nodes" :edges="$edges" />

That's the full surface — node rendering, drag-to-connect, inspectors, and server sync are all wired.