Rendering a schema in a Blade view

composer show filament/schemas

#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 }}

#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.

Still need help? Join our Discord community or open a GitHub discussion