Skip to main content
Before proceeding, make sure filament/schemas is installed in your project. You can check by running:
composer show filament/schemas
If it’s not installed, consult the installation guide and configure the individual components according to the instructions.

​
Setting up the Livewire component

First, generate a new Livewire component: 
php artisan make:livewire ViewProduct
Then, render your Livewire component on the page: 
@livewire('view-product')
Alternatively, you can use a full-page Livewire component: 
use App\Livewire\ViewProduct;
use Illuminate\Support\Facades\Route;

Route::get('products/{product}', ViewProduct::class);
You must use the InteractsWithSchemas trait, and implement the HasSchemas interface on your Livewire component class: 
use Filament\Schemas\Concerns\InteractsWithSchemas;
use Filament\Schemas\Concerns\RestrictsFileUploadsToSchemaComponents;
use Filament\Schemas\Contracts\HasSchemas;
use Livewire\Component;

class ViewProduct extends Component implements HasSchemas
{
    use InteractsWithSchemas;
    use RestrictsFileUploadsToSchemaComponents;

    // ...
}

​
Adding the schema

Next, add a method to the Livewire component which accepts a $schema object, modifies it, and returns it: 
use Filament\Schemas\Schema;

public function productSchema(Schema $schema): Schema
{
    return $schema
        ->components([
            // ...
        ]);
}
Finally, render the schema in the Livewire component’s view: 
{{ $this->productSchema }}
filament/schemas also includes the following packages:
  • filament/actions
  • filament/support
These packages allow you to use their components within Livewire components. For example, if your schema uses Actions, remember to implement the HasActions interface and use the InteractsWithActions trait on your Livewire component class.If you are using any other Filament components in your schema, make sure to install and integrate the corresponding package as well.

​
Security considerations for file uploads

The InteractsWithSchemas trait exposes Livewire’s file upload RPC methods on every component that uses it — whether or not the component’s schema contains an upload field. If your Livewire component is reachable to users you do not want uploading arbitrary files, add the RestrictsFileUploadsToSchemaComponents trait. See Restricting Livewire file uploads to schema components for details.