Core Concepts
Render hooks
Overview
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 formPanelsRenderHook::AUTH_LOGIN_FORM_BEFORE
- Before login formPanelsRenderHook::AUTH_PASSWORD_RESET_REQUEST_FORM_AFTER
- After password reset request formPanelsRenderHook::AUTH_PASSWORD_RESET_REQUEST_FORM_BEFORE
- Before password reset request formPanelsRenderHook::AUTH_PASSWORD_RESET_RESET_FORM_AFTER
- After password reset formPanelsRenderHook::AUTH_PASSWORD_RESET_RESET_FORM_BEFORE
- Before password reset formPanelsRenderHook::AUTH_REGISTER_FORM_AFTER
- After register formPanelsRenderHook::AUTH_REGISTER_FORM_BEFORE
- Before register formPanelsRenderHook::BODY_END
- Before</body>
PanelsRenderHook::BODY_START
- After<body>
PanelsRenderHook::CONTENT_END
- After page content, inside<main>
PanelsRenderHook::CONTENT_START
- Before page content, inside<main>
PanelsRenderHook::FOOTER
- Footer of the pagePanelsRenderHook::GLOBAL_SEARCH_AFTER
- After the global search container, inside the topbarPanelsRenderHook::GLOBAL_SEARCH_BEFORE
- Before the global search container, inside the topbarPanelsRenderHook::GLOBAL_SEARCH_END
- The end of the global search containerPanelsRenderHook::GLOBAL_SEARCH_START
- The start of the global search containerPanelsRenderHook::HEAD_END
- Before</head>
PanelsRenderHook::HEAD_START
- After<head>
PanelsRenderHook::PAGE_END
- End of the page content container, also can be scoped to the page or resource classPanelsRenderHook::PAGE_FOOTER_WIDGETS_AFTER
- After the page footer widgets, also can be scoped to the page or resource classPanelsRenderHook::PAGE_FOOTER_WIDGETS_BEFORE
- Before the page footer widgets, also can be scoped to the page or resource classPanelsRenderHook::PAGE_HEADER_ACTIONS_AFTER
- After the page header actions, also can be scoped to the page or resource classPanelsRenderHook::PAGE_HEADER_ACTIONS_BEFORE
- Before the page header actions, also can be scoped to the page or resource classPanelsRenderHook::PAGE_HEADER_WIDGETS_AFTER
- After the page header widgets, also can be scoped to the page or resource classPanelsRenderHook::PAGE_HEADER_WIDGETS_BEFORE
- Before the page header widgets, also can be scoped to the page or resource classPanelsRenderHook::PAGE_START
- Start of the page content container, also can be scoped to the page or resource classPanelsRenderHook::PAGE_SUB_NAVIGATION_END_AFTER
- After the page sub navigation "end" sidebar position, also can be scoped to the page or resource classPanelsRenderHook::PAGE_SUB_NAVIGATION_END_BEFORE
- Before the page sub navigation "end" sidebar position, also can be scoped to the page or resource classPanelsRenderHook::PAGE_SUB_NAVIGATION_SELECT_AFTER
- After the page sub navigation select (for mobile), also can be scoped to the page or resource classPanelsRenderHook::PAGE_SUB_NAVIGATION_SELECT_BEFORE
- Before the page sub navigation select (for mobile), also can be scoped to the page or resource classPanelsRenderHook::PAGE_SUB_NAVIGATION_START_AFTER
- After the page sub navigation "start" sidebar position, also can be scoped to the page or resource classPanelsRenderHook::PAGE_SUB_NAVIGATION_START_BEFORE
- Before the page sub navigation "start" sidebar position, also can be scoped to the page or resource classPanelsRenderHook::PAGE_SUB_NAVIGATION_TOP_AFTER
- After the page sub navigation "top" tabs position, also can be scoped to the page or resource classPanelsRenderHook::PAGE_SUB_NAVIGATION_TOP_BEFORE
- Before the page sub navigation "top" tabs position, also can be scoped to the page or resource classPanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABLE_AFTER
- After the resource table, also can be scoped to the page or resource classPanelsRenderHook::RESOURCE_PAGES_LIST_RECORDS_TABLE_BEFORE
- Before the resource table, also can be scoped to the page or resource classPanelsRenderHook::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 classPanelsRenderHook::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 classPanelsRenderHook::RESOURCE_PAGES_MANAGE_RELATED_RECORDS_TABLE_AFTER
- After the relation manager table, also can be scoped to the page or resource classPanelsRenderHook::RESOURCE_PAGES_MANAGE_RELATED_RECORDS_TABLE_BEFORE
- Before the relation manager table, also can be scoped to the page or resource classPanelsRenderHook::RESOURCE_RELATION_MANAGER_AFTER
- After the relation manager table, also can be scoped to the page or relation manager classPanelsRenderHook::RESOURCE_RELATION_MANAGER_BEFORE
- Before the relation manager table, also can be scoped to the page or relation manager classPanelsRenderHook::RESOURCE_TABS_END
- The end of the resource tabs (after the last tab), also can be scoped to the page or resource classPanelsRenderHook::RESOURCE_TABS_START
- The start of the resource tabs (before the first tab), also can be scoped to the page or resource classPanelsRenderHook::SCRIPTS_AFTER
- After scripts are definedPanelsRenderHook::SCRIPTS_BEFORE
- Before scripts are definedPanelsRenderHook::SIDEBAR_NAV_END
- In the sidebar, before</nav>
PanelsRenderHook::SIDEBAR_NAV_START
- In the sidebar, after<nav>
PanelsRenderHook::SIMPLE_PAGE_END
- End of the simple page content container, also can be scoped to the page classPanelsRenderHook::SIMPLE_PAGE_START
- Start of the simple page content container, also can be scoped to the page classPanelsRenderHook::SIDEBAR_FOOTER
- Pinned to the bottom of the sidebar, below the contentPanelsRenderHook::STYLES_AFTER
- After styles are definedPanelsRenderHook::STYLES_BEFORE
- Before styles are definedPanelsRenderHook::TENANT_MENU_AFTER
- After the tenant menuPanelsRenderHook::TENANT_MENU_BEFORE
- Before the tenant menuPanelsRenderHook::TOPBAR_AFTER
- Below the topbarPanelsRenderHook::TOPBAR_BEFORE
- Above the topbarPanelsRenderHook::TOPBAR_END
- End of the topbar containerPanelsRenderHook::TOPBAR_START
- Start of the topbar containerPanelsRenderHook::USER_MENU_AFTER
- After the user menuPanelsRenderHook::USER_MENU_BEFORE
- Before the user menuPanelsRenderHook::USER_MENU_PROFILE_AFTER
- After the profile item in the user menuPanelsRenderHook::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::SELECTION_INDICATOR_ACTIONS_AFTER
- After the "select all" and "deselect all" action buttons in the selection indicator barTablesRenderHook::SELECTION_INDICATOR_ACTIONS_BEFORE
- Before the "select all" and "deselect all" action buttons in the selection indicator barTablesRenderHook::HEADER_AFTER
- After the header containerTablesRenderHook::HEADER_BEFORE
- Before the header containerTablesRenderHook::TOOLBAR_AFTER
- After the toolbar containerTablesRenderHook::TOOLBAR_BEFORE
- Before the toolbar containerTablesRenderHook::TOOLBAR_END
- The end of the toolbarTablesRenderHook::TOOLBAR_GROUPING_SELECTOR_AFTER
- After the grouping selectorTablesRenderHook::TOOLBAR_GROUPING_SELECTOR_BEFORE
- Before the grouping selectorTablesRenderHook::TOOLBAR_REORDER_TRIGGER_AFTER
- After the reorder triggerTablesRenderHook::TOOLBAR_REORDER_TRIGGER_BEFORE
- Before the reorder triggerTablesRenderHook::TOOLBAR_SEARCH_AFTER
- After the search containerTablesRenderHook::TOOLBAR_SEARCH_BEFORE
- Before the search containerTablesRenderHook::TOOLBAR_START
- The start of the toolbarTablesRenderHook::TOOLBAR_TOGGLE_COLUMN_TRIGGER_AFTER
- After the toggle columns triggerTablesRenderHook::TOOLBAR_TOGGLE_COLUMN_TRIGGER_BEFORE
- Before the toggle columns trigger
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 classWidgetsRenderHook::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\UserResource\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\UserResource\Pages\CreateUser::class, \App\Filament\Resources\UserResource\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\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\UserResource::class,);
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\UserResource::class]) }}
Edit on GitHubStill need help? Join our Discord community or open a GitHub discussion