Skip to main content
You are currently viewing the documentation for Filament 4.x, which is a previous version of Filament.Looking for the current stable version? Visit the 5.x documentation.

​
Introduction

Filament allows you to render Blade content at various points in the frameworks views. It’s useful for plugins to be able to inject HTML into the framework. Also, since Filament does not recommend publishing the views due to an increased risk of breaking changes, it’s also useful for users.

​
Registering render hooks

To register render hooks, you can call FilamentView::registerRenderHook() from a service provider or middleware. The first argument is the name of the render hook, and the second argument is a callback that returns the content to be rendered: 
use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
use Illuminate\Support\Facades\Blade;

FilamentView::registerRenderHook(
    PanelsRenderHook::BODY_START,
    fn (): string => Blade::render('@livewire(\'livewire-ui-modal\')'),
);
You could also render view content from a file: 
use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
use Illuminate\Contracts\View\View;

FilamentView::registerRenderHook(
    PanelsRenderHook::BODY_START,
    fn (): View => view('impersonation-banner'),
);

​
Available render hooks

​
Panel Builder render hooks

use Filament\View\PanelsRenderHook;
  • PanelsRenderHook::AUTH_LOGIN_FORM_AFTER - After login form
  • PanelsRenderHook::AUTH_LOGIN_FORM_BEFORE - Before login form
  • PanelsRenderHook::AUTH_PASSWORD_RESET_REQUEST_FORM_AFTER - After password reset request form
  • PanelsRenderHook::AUTH_PASSWORD_RESET_REQUEST_FORM_BEFORE - Before password reset request form
  • PanelsRenderHook::AUTH_PASSWORD_RESET_RESET_FORM_AFTER - After password reset form
  • PanelsRenderHook::AUTH_PASSWORD_RESET_RESET_FORM_BEFORE - Before password reset form
  • PanelsRenderHook::AUTH_REGISTER_FORM_AFTER - After register form
  • PanelsRenderHook::AUTH_REGISTER_FORM_BEFORE - Before register form
  • PanelsRenderHook::BODY_END - Before </body>
  • PanelsRenderHook::BODY_START - After <body>
  • PanelsRenderHook::CONTENT_AFTER - After page content
  • PanelsRenderHook::CONTENT_BEFORE - Before page content
  • PanelsRenderHook::CONTENT_END - After page content, inside <main>
  • PanelsRenderHook::CONTENT_START - Before page content, inside <main>
  • PanelsRenderHook::FOOTER - Footer of the page
  • PanelsRenderHook::GLOBAL_SEARCH_AFTER - After the global search container, inside the topbar
  • PanelsRenderHook::GLOBAL_SEARCH_BEFORE - Before the global search container, inside the topbar
  • PanelsRenderHook::GLOBAL_SEARCH_END - The end of the global search container
  • PanelsRenderHook::GLOBAL_SEARCH_START - The start of the global search container
  • PanelsRenderHook::HEAD_END - Before </head>
  • PanelsRenderHook::HEAD_START - After <head>
  • PanelsRenderHook::LAYOUT_END - End of the layout container, also can be scoped to the page class
  • PanelsRenderHook::LAYOUT_START - Start of the layout container, also can be scoped to the page class
  • PanelsRenderHook::PAGE_END - End of the page content container, also can be scoped to the page or resource class
  • PanelsRenderHook::PAGE_FOOTER_WIDGETS_AFTER - After the page footer widgets, also can be scoped to the page or resource class
  • PanelsRenderHook::PAGE_FOOTER_WIDGETS_BEFORE - Before the page footer widgets, also can be scoped to the page or resource class
  • PanelsRenderHook::PAGE_FOOTER_WIDGETS_END - End of the page footer widgets, also can be scoped to the page or resource class
  • PanelsRenderHook::PAGE_FOOTER_WIDGETS_START - Start of the page footer widgets, also can be scoped to the page or resource class
  • PanelsRenderHook::PAGE_HEADER_ACTIONS_AFTER - After the page header actions, also can be scoped to the page or resource class
  • PanelsRenderHook::PAGE_HEADER_ACTIONS_BEFORE - Before the page header actions, also can be scoped to the page or resource class
  • PanelsRenderHook::PAGE_HEADER_WIDGETS_AFTER - After the page header widgets, also can be scoped to the page or resource class
  • PanelsRenderHook::PAGE_HEADER_WIDGETS_BEFORE - Before the page header widgets, also can be scoped to the page or resource class
  • PanelsRenderHook::PAGE_HEADER_WIDGETS_END - End of the page header widgets, also can be scoped to the page or resource class
  • PanelsRenderHook::PAGE_HEADER_WIDGETS_START - Start of the page header widgets, also can be scoped to the page or resource class
  • PanelsRenderHook::PAGE_START - Start of the page content container, also can be scoped to the page or resource class
  • PanelsRenderHook::PAGE_SUB_NAVIGATION_END_AFTER - After the page sub navigation “end” sidebar position, also can be scoped to the page or resource class
  • PanelsRenderHook::PAGE_SUB_NAVIGATION_END_BEFORE - Before the page sub navigation “end” sidebar position, also can be scoped to the page or resource class
  • PanelsRenderHook::PAGE_SUB_NAVIGATION_SELECT_AFTER - After the page sub navigation select (for mobile), also can be scoped to the page or resource class
  • PanelsRenderHook::PAGE_SUB_NAVIGATION_SELECT_BEFORE - Before the page sub navigation select (for mobile), also can be scoped to the page or resource class
  • PanelsRenderHook::PAGE_SUB_NAVIGATION_SIDEBAR_AFTER - After the page sub navigation sidebar, also can be scoped to the page or resource class
  • PanelsRenderHook::PAGE_SUB_NAVIGATION_SIDEBAR_BEFORE - Before the page sub navigation sidebar, also can be scoped to the page or resource class
  • PanelsRenderHook::PAGE_SUB_NAVIGATION_START_AFTER - After the page sub navigation “start” sidebar position, also can be scoped to the page or resource class
  • PanelsRenderHook::PAGE_SUB_NAVIGATION_START_BEFORE - Before the page sub navigation “start” sidebar position, also can be scoped to the page or resource class
  • PanelsRenderHook::PAGE_SUB_NAVIGATION_TOP_AFTER - After the page sub navigation “top” tabs position, also can be scoped to the page or resource class
  • PanelsRenderHook::PAGE_SUB_NAVIGATION_TOP_BEFORE - Before the page sub navigation “top” tabs position, also can be scoped to the page or resource class
  • PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABLE_AFTER - After the resource table, also can be scoped to the page or resource class
  • PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABLE_BEFORE - Before the resource table, also can be scoped to the page or resource class
  • PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABS_END - The end of the filter tabs (after the last tab), also can be scoped to the page or resource class
  • PanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABS_START - The start of the filter tabs (before the first tab), also can be scoped to the page or resource class
  • PanelsRenderHook::RESOURCE_PAGES_MANAGE_RELATED_RECORDS_TABLE_AFTER - After the relation manager table, also can be scoped to the page or resource class
  • PanelsRenderHook::RESOURCE_PAGES_MANAGE_RELATED_RECORDS_TABLE_BEFORE - Before the relation manager table, also can be scoped to the page or resource class
  • PanelsRenderHook::RESOURCE_RELATION_MANAGER_AFTER - After the relation manager table, also can be scoped to the page or relation manager class
  • PanelsRenderHook::RESOURCE_RELATION_MANAGER_BEFORE - Before the relation manager table, also can be scoped to the page or relation manager class
  • PanelsRenderHook::RESOURCE_TABS_END - The end of the resource tabs (after the last tab), also can be scoped to the page or resource class
  • PanelsRenderHook::RESOURCE_TABS_START - The start of the resource tabs (before the first tab), also can be scoped to the page or resource class
  • PanelsRenderHook::SCRIPTS_AFTER - After scripts are defined
  • PanelsRenderHook::SCRIPTS_BEFORE - Before scripts are defined
  • PanelsRenderHook::SIDEBAR_LOGO_AFTER - After the logo in the sidebar
  • PanelsRenderHook::SIDEBAR_LOGO_BEFORE - Before the logo in the sidebar
  • PanelsRenderHook::SIDEBAR_NAV_END - In the sidebar, before </nav>
  • PanelsRenderHook::SIDEBAR_NAV_START - In the sidebar, after <nav>
  • PanelsRenderHook::SIMPLE_LAYOUT_END - End of the simple layout container, also can be scoped to the page class
  • PanelsRenderHook::SIMPLE_LAYOUT_START - Start of the simple layout container, also can be scoped to the page class
  • PanelsRenderHook::SIMPLE_PAGE_END - End of the simple page content container, also can be scoped to the page class
  • PanelsRenderHook::SIMPLE_PAGE_START - Start of the simple page content container, also can be scoped to the page class
  • PanelsRenderHook::SIDEBAR_FOOTER - Pinned to the bottom of the sidebar, below the content
  • PanelsRenderHook::SIDEBAR_START - Start of the sidebar container
  • PanelsRenderHook::STYLES_AFTER - After styles are defined
  • PanelsRenderHook::STYLES_BEFORE - Before styles are defined
  • PanelsRenderHook::TENANT_MENU_AFTER - After the tenant menu
  • PanelsRenderHook::TENANT_MENU_BEFORE - Before the tenant menu
  • PanelsRenderHook::TOPBAR_AFTER - Below the topbar
  • PanelsRenderHook::TOPBAR_BEFORE - Above the topbar
  • PanelsRenderHook::TOPBAR_END - End of the topbar container
  • PanelsRenderHook::TOPBAR_LOGO_AFTER - After the logo in the topbar
  • PanelsRenderHook::TOPBAR_LOGO_BEFORE - Before the logo in the topbar
  • PanelsRenderHook::TOPBAR_START - Start of the topbar container
  • PanelsRenderHook::USER_MENU_AFTER - After the user menu
  • PanelsRenderHook::USER_MENU_BEFORE - Before the user menu
  • PanelsRenderHook::USER_MENU_PROFILE_AFTER - After the profile item in the user menu
  • PanelsRenderHook::USER_MENU_PROFILE_BEFORE - Before the profile item in the user menu

​
Table Builder render hooks

All these render hooks can be scoped to any table Livewire component class. When using the Panel Builder, these classes might be the List or Manage page of a resource, or a relation manager. Table widgets are also Livewire component classes. 
use Filament\Tables\View\TablesRenderHook;
  • TablesRenderHook::FILTER_INDICATORS - Replace the existing filter indicators, receives filterIndicators data as array<Filament\Tables\Filters\Indicator>
  • TablesRenderHook::HEADER_CELL - Replace the existing header cells, receives the Filament\Tables\Columns\Column object as column and isReordering in the data.
  • TablesRenderHook::SELECTION_INDICATOR_ACTIONS_AFTER - After the “select all” and “deselect all” action buttons in the selection indicator bar
  • TablesRenderHook::SELECTION_INDICATOR_ACTIONS_BEFORE - Before the “select all” and “deselect all” action buttons in the selection indicator bar
  • TablesRenderHook::HEADER_AFTER - After the header container
  • TablesRenderHook::HEADER_BEFORE - Before the header container
  • TablesRenderHook::TOOLBAR_AFTER - After the toolbar container
  • TablesRenderHook::TOOLBAR_BEFORE - Before the toolbar container
  • TablesRenderHook::TOOLBAR_END - The end of the toolbar
  • TablesRenderHook::TOOLBAR_GROUPING_SELECTOR_AFTER - After the grouping selector
  • TablesRenderHook::TOOLBAR_GROUPING_SELECTOR_BEFORE - Before the grouping selector
  • TablesRenderHook::TOOLBAR_REORDER_TRIGGER_AFTER - After the reorder trigger
  • TablesRenderHook::TOOLBAR_REORDER_TRIGGER_BEFORE - Before the reorder trigger
  • TablesRenderHook::TOOLBAR_SEARCH_AFTER - After the search container
  • TablesRenderHook::TOOLBAR_SEARCH_BEFORE - Before the search container
  • TablesRenderHook::TOOLBAR_START - The start of the toolbar
  • TablesRenderHook::TOOLBAR_COLUMN_MANAGER_TRIGGER_AFTER - After the column manager trigger
  • TablesRenderHook::TOOLBAR_COLUMN_MANAGER_TRIGGER_BEFORE - Before the column manager trigger

​
Actions render hooks

All these render hooks can be scoped to any Livewire component class. When using the Panel Builder, these classes might be the List or Manage page of a resource, or a relation manager. Scoping is typically not enough in this case, as Livewire components can have multiple actions, so you can access the action data as Filament\Actions\Action to identify the specific action in all these render hooks. 
use Filament\Actions\View\ActionsRenderHook;

​
Widgets render hooks

use Filament\Widgets\View\WidgetsRenderHook;
  • WidgetsRenderHook::TABLE_WIDGET_END - End of the table widget, after the table itself, also can be scoped to the table widget class
  • WidgetsRenderHook::TABLE_WIDGET_START - Start of the table widget, before the table itself, also can be scoped to the table widget class

​
Scoping render hooks

Some render hooks can be given a “scope”, which allows them to only be output on a specific page or Livewire component. For instance, you might want to register a render hook for just 1 page. To do that, you can pass the class of the page or component as the second argument to registerRenderHook(): 
use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;
use Illuminate\Support\Facades\Blade;

FilamentView::registerRenderHook(
    PanelsRenderHook::PAGE_START,
    fn (): View => view('warning-banner'),
    scopes: \App\Filament\Resources\Users\Pages\EditUser::class,
);
You can also pass an array of scopes to register the render hook for: 
use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;

FilamentView::registerRenderHook(
    PanelsRenderHook::PAGE_START,
    fn (): View => view('warning-banner'),
    scopes: [
        \App\Filament\Resources\Users\Pages\CreateUser::class,
        \App\Filament\Resources\Users\Pages\EditUser::class,
    ],
);
Some render hooks for the Panel Builder allow you to scope hooks to all pages in a resource: 
use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;

FilamentView::registerRenderHook(
    PanelsRenderHook::PAGE_START,
    fn (): View => view('warning-banner'),
    scopes: \App\Filament\Resources\Users\UserResource::class,
);

​
Retrieving the currently active scopes inside the render hook

The $scopes are passed to the render hook function, and you can use them to determine which page or component the render hook is being rendered on: 
use Filament\Support\Facades\FilamentView;
use Filament\View\PanelsRenderHook;

FilamentView::registerRenderHook(
    PanelsRenderHook::PAGE_START,
    fn (array $scopes): View => view('warning-banner', ['scopes' => $scopes]),
    scopes: \App\Filament\Resources\Users\UserResource::class,
);

​
Passing data to render hooks

Render hooks can receive “data” from when the hook is rendered. To access data from a render hook, you can inject it using an array $data parameter to the hook’s rendering function: 
use Filament\Support\Facades\FilamentView;
use Filament\Tables\View\TablesRenderHook;

FilamentView::registerRenderHook(
    TablesRenderHook::FILTER_INDICATORS,
    fn (array $data): View => view('filter-indicators', ['indicators' => $data['filterIndicators']]),
);

​
Rendering hooks

Plugin developers might find it useful to expose render hooks to their users. You do not need to register them anywhere, simply output them in Blade like so: 
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_START) }}
To provide scope your render hook, you can pass it as the second argument to renderHook(). For instance, if your hook is inside a Livewire component, you can pass the class of the component using static::class: 
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_START, scopes: $this->getRenderHookScopes()) }}
You can even pass multiple scopes as an array, and all render hooks that match any of the scopes will be rendered: 
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\View\PanelsRenderHook::PAGE_START, scopes: [static::class, \App\Filament\Resources\Users\UserResource::class]) }}
You can pass data to a render hook using a data argument to the renderHook() function: 
{{ \Filament\Support\Facades\FilamentView::renderHook(\Filament\Tables\View\TablesRenderHook::FILTER_INDICATORS, data: ['filterIndicators' => $filterIndicators]) }}
Edit this page on GitHub

Sponsored by

KirschbaumAgiledropCMS MaxSerpApiMailtrapBaiz.ai