kirschbaum-development/filament-diffs

A Filament plugin that wraps @pierre/diffs to render beautiful file diffs and syntax-highlighted code views.

dev-main 2026-04-13 16:34 UTC

Requires

• php: ^8.1
• filament/filament: ^3.0 || ^4.0 || ^5.0
• spatie/laravel-package-tools: ^1.15.0

Requires (Dev)

• larastan/larastan: ^3.0
• laravel/pint: ^1.0
• nunomaduro/collision: ^8.0
• orchestra/testbench: ^9.0 || ^10.0 || ^11.0
• pestphp/pest: ^3.0 || ^4.0
• pestphp/pest-plugin-arch: ^3.0 || ^4.0
• pestphp/pest-plugin-laravel: ^3.0 || ^4.0
• pestphp/pest-plugin-livewire: ^3.0 || ^4.0
• pestphp/pest-plugin-type-coverage: ^3.0 || ^4.0
• rector/rector: ^2.0

MIT

• Travis Obregon

• laravel
• kirschbaum-development
• filament
• filament-plugin
• filamentphp
• filament-diffs

README

Syntax-highlighted file viewing and visual diff rendering for Filament infolists. Powered by @pierre/diffs.

Components

FileEntry

Renders any text-based content with syntax highlighting. Useful for displaying raw file contents, stored code, API payloads, or any structured text directly in an infolist.

FileDiffEntry

Renders a side-by-side diff between two versions of content with syntax highlighting. Useful for comparing model versions, reviewing changes, or showing before/after states.

Requirements

• PHP 8.1+
• Filament 3.x, 4.x, or 5.x

Installation

composer require kirschbaum-development/filament-diffs -W

Then register the plugin in your panel provider:

use Kirschbaum\FilamentDiffs\FilamentDiffsPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            FilamentDiffsPlugin::make(),
        ]);
}

Usage

FileEntry

Use FileEntry in any infolist to render a field's value with syntax highlighting. The state is resolved from the record attribute matching the entry name:

use Kirschbaum\FilamentDiffs\Infolists\Components\FileEntry;

FileEntry::make('webhook_payload')
    ->label('Webhook Payload')
    ->fileName('payload.json')

You can override the state entirely using a closure:

FileEntry::make('webhook_payload')
    ->label('Webhook Payload')
    ->fileName('payload.json')
    ->state(fn ($record) => $record->getRawPayload())

FileDiffEntry

Use FileDiffEntry to render a side-by-side diff between two strings. Both ->old() and ->new() accept a string or a closure that receives the current record. A null value is treated as an empty string, making it easy to represent newly created files.

use Kirschbaum\FilamentDiffs\Infolists\Components\FileDiffEntry;

FileDiffEntry::make('content')
    ->label('Changes')
    ->fileName('post.md')
    ->old(fn ($record) => $record->previousVersion?->content)
    ->new(fn ($record) => $record->content)

Setting the Language

Both components detect the syntax highlighting language from the file name. You can also set it explicitly using any Shiki language identifier — this takes precedence over file name detection:

FileEntry::make('source')
    ->language('php')

FileDiffEntry::make('content')
    ->old(fn ($record) => $record->previousVersion?->content)
    ->new(fn ($record) => $record->content)
    ->language('markdown')

Passing Options

Both components accept an ->options() array that is passed directly to the underlying @pierre/diffs components, giving you access to the full range of configuration including themes, diff styles, and more:

FileEntry::make('source')
    ->fileName('app.php')
    ->options([
        'theme' => 'github-dark',
    ])

FileDiffEntry::make('content')
    ->old(fn ($record) => $record->previousVersion?->content)
    ->new(fn ($record) => $record->content)
    ->fileName('post.md')
    ->options([
        'diffStyle' => 'unified',
    ])

See the @pierre/diffs documentation for all available options.

Configuration

Default Theme

Publish the config file to set a default theme across all components in your application:

php artisan vendor:publish --tag="filament-diffs-config"

// config/filament-diffs.php
return [
    'default_theme' => null,
];

You can also set a default theme per panel via the plugin, which takes precedence over the config file:

FilamentDiffsPlugin::make()
    ->defaultTheme('github-dark')

Theme Precedence

Themes are resolved in the following order (highest priority first):

1. Per-component ->options(['theme' => '...'])
2. Panel plugin FilamentDiffsPlugin::make()->defaultTheme('...')
3. Config file filament-diffs.default_theme

Testing

composer test

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• Travis Obregon
• Kirschbaum Development Group
• @pierre/diffs by The Pierre Computer Co.
• All Contributors

Sponsorship

Development of this package is sponsored by Kirschbaum Development Group, a developer driven company focused on problem solving, team building, and community. Learn more about us or join us!

License

The MIT License (MIT). Please see License File for more information.