PHPackages                             hadyfayed/filament-workflow-canvas - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. hadyfayed/filament-workflow-canvas

ActiveLibrary[Utility & Helpers](/categories/utility)

hadyfayed/filament-workflow-canvas
==================================

Visual workflow builder and canvas component for FilamentPHP applications

1.1.0(10mo ago)35[14 PRs](https://github.com/hadyfayed/filament-workflow-canvas/pulls)MITTypeScriptPHP ^8.2CI passing

Since Jun 24Pushed 5mo agoCompare

[ Source](https://github.com/hadyfayed/filament-workflow-canvas)[ Packagist](https://packagist.org/packages/hadyfayed/filament-workflow-canvas)[ Docs](https://github.com/hadyfayed/filament-workflow-canvas)[ RSS](/packages/hadyfayed-filament-workflow-canvas/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (5)Versions (17)Used By (0)

Laravel Workflow Canvas
=======================

[](#laravel-workflow-canvas)

A visual workflow builder and canvas component for Laravel applications. Built on top of the React Wrapper package, providing a drag-and-drop interface for creating complex workflows.

Features
--------

[](#features)

- 🎨 **Visual Workflow Builder** - Drag-and-drop interface for building workflows
- 🔗 **Node-based System** - Trigger, Condition, Transform, and Analytics nodes
- 📊 **Real-time Preview** - Live workflow execution preview
- 💾 **Auto-save** - Automatic saving of workflow changes
- 🔄 **State Management** - Advanced state management with persistence
- 🎯 **Type Safe** - Full TypeScript support
- 🖥️ **Fullscreen Mode** - Expandable canvas for complex workflows
- 🔍 **Validation** - Built-in workflow validation and error detection
- 📱 **Responsive** - Works on desktop and tablet devices

Installation
------------

[](#installation)

### Option 1: Using as Distributed Packages (Recommended)

[](#option-1-using-as-distributed-packages-recommended)

```
composer require hadyfayed/filament-workflow-canvas
npm install @hadyfayed/filament-workflow-canvas
```

**Dependencies:**

This package requires the React Wrapper v3.1.0+ as a base:

```
composer require hadyfayed/filament-react-wrapper:"^3.1.0"
npm install @hadyfayed/filament-react-wrapper@"^3.1.0"
```

### Option 2: Using as Local Development Packages

[](#option-2-using-as-local-development-packages)

```
# Copy package files to your resources directory
cp -r packages/react-wrapper/resources/js/* resources/js/react-wrapper/
cp -r packages/workflow-canvas/resources/js/* resources/js/workflow-canvas/
```

### Setup

[](#setup)

Publish the configuration files:

```
php artisan vendor:publish --tag=workflow-canvas-config
```

Publish the assets:

```
php artisan vendor:publish --tag=workflow-canvas-assets
```

Run the migrations:

```
php artisan migrate
```

### ✨ No Plugin Registration Required!

[](#-no-plugin-registration-required)

React Wrapper v3.1.0+ provides **direct Filament integration**:

- No plugin registration needed in your Filament panel
- Components work directly with Filament forms and resources
- Automatic asset loading and dependency management
- Just install the packages and start using the components!

### Vite Configuration (Standard Laravel Approach)

[](#vite-configuration-standard-laravel-approach)

```
// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/js/bootstrap-react.tsx'
            ],
            refresh: true,
        }),
        react(),
    ],
    resolve: {
        alias: {
            '@': '/resources/js',
        },
    },
});
```

### Bootstrap Configuration

[](#bootstrap-configuration)

For distributed packages:

```
// resources/js/bootstrap-react.tsx
import React from 'react';

// Initialize the React wrapper core system
import '@hadyfayed/filament-react-wrapper/bootstrap';

// Initialize workflow canvas components
import '@hadyfayed/filament-workflow-canvas/bootstrap';

console.log('React Wrapper and Workflow Canvas bootstrapped for Filament integration');

export default function bootstrap() {
    return true;
}
```

For local development:

```
// resources/js/bootstrap-react.tsx
import React from 'react';

// Initialize the React wrapper core system
import './react-wrapper/core';

// Initialize workflow canvas components
import './workflow-canvas/index';

console.log('React Wrapper and Workflow Canvas bootstrapped for Filament integration');

export default function bootstrap() {
    return true;
}
```

Basic Usage
-----------

[](#basic-usage)

### Blade Component

[](#blade-component)

```

```

### Livewire Integration

[](#livewire-integration)

```
use HadyFayed\WorkflowCanvas\Models\Workflow;

class WorkflowBuilder extends Component
{
    public Workflow $workflow;
    public array $canvasData = [];

    public function mount(Workflow $workflow)
    {
        $this->workflow = $workflow;
        $this->canvasData = $workflow->canvas_data ?? [];
    }

    public function updatedCanvasData()
    {
        $this->workflow->update(['canvas_data' => $this->canvasData]);
    }

    public function render()
    {
        return view('livewire.workflow-builder');
    }
}
```

```

```

### Filament Integration (React Wrapper v3.1.0+ Direct Integration)

[](#filament-integration-react-wrapper-v310-direct-integration)

#### Form Field Integration

[](#form-field-integration)

```
use HadyFayed\WorkflowCanvas\Forms\Components\WorkflowCanvasField;

// In your Filament Resource
WorkflowCanvasField::make('canvas_data')
    ->reactive()           // Enable real-time React-PHP state sync
    ->lazy()              // Load component when visible (performance optimization)
    ->enableAutoSave()    // Auto-save workflow changes
    ->showMinimap()       // Show workflow minimap
    ->enableFullscreen()  // Allow fullscreen editing
    ->nodeTypes(config('workflow-canvas.node_types'))
    ->onWorkflowChange(fn($state) => $this->processWorkflow($state));
```

#### Widget Integration

[](#widget-integration)

```
use HadyFayed\WorkflowCanvas\Widgets\WorkflowStatsWidget;

// In your Filament Panel
class WorkflowStatsWidget extends ReactWidget
{
    protected string $componentName = 'WorkflowStatsWidget';

    public function getData(): array
    {
        return $this->getWorkflowStats(); // Data automatically shared with React
    }
}
```

#### No Plugin Required!

[](#no-plugin-required)

React Wrapper v3.1.0+ provides **direct Filament integration** without requiring plugin registration:

- Components work directly with Filament forms and resources
- Lazy loading and asset management handled automatically
- 90%+ React-PHP function mapping for seamless integration

Node Types
----------

[](#node-types)

The package comes with four built-in node types:

### Trigger Nodes

[](#trigger-nodes)

- Entry points for workflows
- Support event, webhook, schedule, and manual triggers
- Configuration options for event types and filters

### Condition Nodes

[](#condition-nodes)

- Filter data based on configurable conditions
- Support multiple operators (equals, contains, exists, etc.)
- AND/OR logic for multiple conditions

### Transform Nodes

[](#transform-nodes)

- Modify and map data between workflow steps
- Support field mapping, JavaScript code, and templates
- Built-in transformations (uppercase, lowercase, hash, base64)

### Analytics Driver Nodes

[](#analytics-driver-nodes)

- Send data to analytics platforms
- Support for GA4, Meta Pixel, Mixpanel, and more
- Configurable async processing and error handling

Configuration
-------------

[](#configuration)

Customize the workflow canvas in `config/workflow-canvas.php`:

```
return [
    'canvas' => [
        'default_height' => '600px',
        'fullscreen_enabled' => true,
        'auto_save' => true,
        'auto_save_delay' => 500,
    ],

    'node_types' => [
        'trigger' => [
            'label' => 'Trigger',
            'icon' => '⚡',
            'color' => 'blue',
            'processor' => TriggerProcessor::class,
        ],
        // ... more node types
    ],

    'validation' => [
        'max_nodes' => 100,
        'max_connections' => 200,
        'required_trigger' => true,
        'prevent_cycles' => true,
    ],
];
```

Custom Node Types
-----------------

[](#custom-node-types)

Create custom node types by extending the base processor:

```
use HadyFayed\WorkflowCanvas\Processors\BaseNodeProcessor;

class CustomProcessor extends BaseNodeProcessor
{
    public function process(mixed $node, array $inputData, WorkflowExecution $execution): array
    {
        // Your custom processing logic
        return $outputData;
    }

    public function getConfigSchema(): array
    {
        return [
            'custom_field' => [
                'type' => 'text',
                'label' => 'Custom Field',
                'required' => true,
            ],
        ];
    }
}
```

Register the custom node type:

```
// config/workflow-canvas.php
'node_types' => [
    'custom' => [
        'label' => 'Custom Node',
        'icon' => '⭐',
        'color' => 'purple',
        'processor' => CustomProcessor::class,
    ],
],
```

Workflow Execution
------------------

[](#workflow-execution)

Execute workflows programmatically:

```
use HadyFayed\WorkflowCanvas\Services\WorkflowExecutionService;

$executionService = app(WorkflowExecutionService::class);
$result = $executionService->execute($workflow, $inputData);

if ($result->isSuccessful()) {
    $outputData = $result->getOutputData();
} else {
    $errors = $result->getErrors();
}
```

Events
------

[](#events)

The package dispatches several events during workflow execution:

```
use HadyFayed\WorkflowCanvas\Events\WorkflowStarted;
use HadyFayed\WorkflowCanvas\Events\WorkflowCompleted;
use HadyFayed\WorkflowCanvas\Events\WorkflowFailed;

// Listen for workflow events
Event::listen(WorkflowStarted::class, function ($event) {
    Log::info('Workflow started', ['workflow_id' => $event->workflow->id]);
});
```

API Reference
-------------

[](#api-reference)

### Workflow Model

[](#workflow-model)

```
$workflow = Workflow::create([
    'name' => 'My Workflow',
    'description' => 'A sample workflow',
    'canvas_data' => $canvasData,
    'is_active' => true,
]);

// Validate workflow structure
$errors = $workflow->validate();

// Duplicate workflow
$copy = $workflow->duplicate('New Name');

// Check for cycles
$hasCycles = $workflow->hasCycles();
```

### Canvas Component Props

[](#canvas-component-props)

```
WorkflowCanvasComponent::make(
    workflow: $workflow,
    readonly: false,
    height: '800px',
    statePath: 'canvas_data'
)
```

Development
-----------

[](#development)

### Package Development

[](#package-development)

When developing the packages locally:

```
# In the package directory
cd packages/workflow-canvas
npm install
npm run build  # Build distributable package

# Copy to main app for testing
cd ../../
cp -r packages/workflow-canvas/resources/js/* resources/js/workflow-canvas/
```

### TypeScript Compilation

[](#typescript-compilation)

```
# Check types in package
cd packages/workflow-canvas
npm run typecheck

# Build with type declarations
npm run build
```

### Main App Development

[](#main-app-development)

```
# Start development server
npm run dev

# Build for production
npm run build
```

### Testing

[](#testing)

```
# Package tests
cd packages/workflow-canvas
composer test
npm test

# Main app tests
cd ../../
php artisan test
```

### Custom Node Development

[](#custom-node-development)

Create custom nodes by extending the base components:

```
// resources/js/components/CustomNode.tsx
import React from 'react';
import { NodeProps } from 'reactflow';

export default function CustomNode({ data }: NodeProps) {
    return (

            {data.label}
            {/* Your custom UI */}

    );
}
```

Register the custom node:

```
// resources/js/bootstrap-react.tsx
import { componentRegistry } from './react-wrapper/core';
import CustomNode from './components/CustomNode';

componentRegistry.register({
    name: 'CustomNode',
    component: CustomNode,
    metadata: {
        category: 'custom',
        description: 'Custom workflow node'
    }
});
```

License
-------

[](#license)

MIT License. See [LICENSE](LICENSE) for details.

###  Health Score

37

—

LowBetter than 82% of packages

Maintenance68

Regular maintenance activity

Popularity7

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity57

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 63.2% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~10 days

Total

2

Last Release

308d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/1528bda6b13420aabf7c8cc00c5ad095a40a6c581f3db827cab806608738276f?d=identicon)[hadyfayed](/maintainers/hadyfayed)

---

Top Contributors

[![hadyfayed](https://avatars.githubusercontent.com/u/6465546?v=4)](https://github.com/hadyfayed "hadyfayed (12 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (7 commits)")

---

Tags

laravelbuilderworkflowcanvasreactfilamentvisual

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/hadyfayed-filament-workflow-canvas/health.svg)

```
[![Health](https://phpackages.com/badges/hadyfayed-filament-workflow-canvas/health.svg)](https://phpackages.com/packages/hadyfayed-filament-workflow-canvas)
```

###  Alternatives

[jibaymcs/filament-tour

Bring the power of DriverJs to your Filament panels and start a tour !

12247.8k](/packages/jibaymcs-filament-tour)[aymanalhattami/filament-context-menu

context menu (right click menu) for filament

9838.0k](/packages/aymanalhattami-filament-context-menu)[tapp/filament-google-autocomplete-field

Filament plugin that provides a Google Autocomplete field

3098.1k](/packages/tapp-filament-google-autocomplete-field)[defstudio/filament-searchable-input

A searchable autocomplete input for Filament forms

3212.4k](/packages/defstudio-filament-searchable-input)[agencetwogether/hookshelper

Simple plugin to toggle display hooks available in current page.

2312.7k](/packages/agencetwogether-hookshelper)[marcogermani87/filament-cookie-consent

Easy cookie consent integrations for Filament

1917.0k](/packages/marcogermani87-filament-cookie-consent)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)