Preview & Public Assets

The Filament panel theme styles the editor chrome. The iframe preview and public template output are separate HTML documents, so they also need CSS. FilamentCraft uses a three-tier asset model.

Tier 0 — package fallback (default)

php artisan filamentcraft:install copies the package's compiled section bundle to public/css/.... Built-in sections render correctly out of the box, even before the host has a custom front-end build.

Tier 1 — mirror the admin panel into the iframe

If your Filament panel theme also contains your site/section utilities, copy those <link> and <style> tags into the iframe at runtime:

$plugin = FilamentCraftPlugin::make()
    ->mirrorEditorStyles();

This is useful while editing because the iframe inherits the same compiled theme as the panel. It only affects authenticated preview rendering; public pages still need their own stylesheet.

Tier 2 — register the host site's Vite build

Production hosts should register the CSS/JS that visitors will receive:

$plugin = FilamentCraftPlugin::make()
    ->viteManifest(public_path('build/manifest.json'), [
        'resources/css/site.css',
        'resources/js/site.ts',
    ]);

Or for theme-style builds under a sub-directory:

$plugin = FilamentCraftPlugin::make()
    ->viteBuild('themes/shop/debut/editor');

Pass the configured $plugin to $panel->plugin($plugin). You can also register URLs directly with ->stylesheet('https://…/theme.css') / ->script('…/site.js') or via config('filamentcraft.assets.extra_styles') / extra_scripts.

Disabling the fallback

If your site build fully owns the section styling, disable the package fallback:

'assets' => [
    'site_css_enabled' => false,
],