Filament Pretty Json Laravel Package

Getting Started

Minimal Steps

1. Installation Run composer require novadaemon/filament-pretty-json in your Laravel project. Publish the package assets (if needed) with php artisan vendor:publish --provider="Novadaemon\FilamentPrettyJson\FilamentPrettyJsonServiceProvider" (though this package typically doesn’t require asset publishing).

2. First Use Case Add the field to a Filament Resource Form or Infolist:

   use Novadaemon\FilamentPrettyJson\Form\PrettyJsonField;
   
   public static function form(Form $form): Form
   {
       return $form->schema([
           PrettyJsonField::make('json_column_name'),
       ]);
   }
   

   For Infolist, use PrettyJsonEntry:

   use Novadaemon\FilamentPrettyJson\Infolist\PrettyJsonEntry;
   
   public static function infolist(Infolist $infolist): Infolist
   {
       return $infolist->schema([
           PrettyJsonEntry::make('json_column_name'),
       ]);
   }
   

3. Verify Compatibility Ensure your Filament version (2.x, 3.x, or 4.x) is supported. Check the package changelog for version-specific notes.

Implementation Patterns

Common Workflows

1. Displaying JSON in Forms Use PrettyJsonField for read-only JSON previews in edit forms (e.g., for debugging or user-friendly display of nested data).

   PrettyJsonField::make('metadata')
       ->label('User Metadata')
       ->columnSpanFull(), // Optional: Full-width display
   

2. Infolist Integration Use PrettyJsonEntry in resource tables or detail pages for clean JSON rendering:

   PrettyJsonEntry::make('config')
       ->label('App Configuration')
       ->hidden(fn ($record) => empty($record->config)), // Conditionally hide empty JSON
   

3. Dynamic JSON Sources Fetch JSON from APIs, database casts, or model attributes:

   // Example: Cast a column to JSON in the model
   protected $casts = [
       'settings' => 'json',
   ];
   

4. Nested JSON Handling The package auto-formats nested JSON structures. For deep nesting, limit depth with:

   PrettyJsonField::make('nested_data')
       ->maxDepth(3), // Optional: Truncate after 3 levels
   

5. Conditional Rendering Hide the field if JSON is empty or invalid:

   PrettyJsonField::make('api_response')
       ->hidden(fn ($record) => !json_validate($record->api_response)),
   

Integration Tips

• Pair with Filament Actions: Use the field in custom actions (e.g., "View JSON") for bulk operations.
• Combine with Other Fields: Group PrettyJsonField with related fields (e.g., a text input for a JSON key + the field for the full JSON).
• Localization: The package respects Filament’s localization. Use ->label(__('json.label')) for translations.
• Testing: Mock JSON data in tests:

  $record = User::factory()->create(['metadata' => ['key' => 'value']]);
  

Gotchas and Tips

Pitfalls

1. Performance with Large JSON

   • Issue: Deeply nested or large JSON (>10KB) may slow down rendering.
   • Fix: Use ->maxDepth() or truncate JSON server-side:

     $record->json_column = json_decode($record->json_column, true, 512); // Limit depth
     

2. Invalid JSON Handling

   • Issue: Non-JSON strings (e.g., null, malformed JSON) may break rendering.
   • Fix: Validate JSON before display:

     PrettyJsonField::make('data')
         ->hidden(fn ($record) => !is_string($record->data) || json_validate($record->data)),
     

3. Caching Conflicts

   • Issue: If JSON changes frequently, cached views may show stale data.
   • Fix: Exclude the field from caching or use ->cacheData(false).

4. Filament 4.x Quirks

   • Issue: Some Filament 4.x versions may require explicit type hints.
   • Fix: Ensure your Resource class extends Filament\Resources\Resource (not abstract classes).

Debugging

• Inspect Rendered HTML: Use browser dev tools to check if JSON is truncated or malformed.
• Log Raw Data: Add a temporary dd() to verify the JSON structure before rendering:

  PrettyJsonField::make('debug_json')
      ->state(fn ($record) => json_encode($record->debug_json, JSON_PRETTY_PRINT)),
  

• Check for Conflicts: Disable other Filament plugins to isolate issues.

Extension Points

1. Custom Styling Override the default CSS by publishing the package’s assets (if available) or target the .filament-pretty-json class:

   .filament-pretty-json pre {
       background: #f5f5f5;
       padding: 1rem;
       border-radius: 4px;
   }
   

2. Syntax Highlighting Extend the field to use a library like Prism.js for syntax highlighting:

   PrettyJsonField::make('code')
       ->extraAttributes(['class' => 'language-json']),
   

   Then add Prism.js to your Filament layout.

3. Custom JSON Parsing Override the default parser by extending the field:

   class CustomPrettyJsonField extends PrettyJsonField
   {
       protected function formatState($state): string
       {
           return json_encode($state, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES);
       }
   }
   

4. Server-Side Processing Pre-process JSON in the model’s getPrettyJsonAttribute():

   public function getPrettyJsonAttribute()
   {
       return json_encode($this->json_column, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE);
   }
   

   Then reference this attribute in the field:

   PrettyJsonField::make('pretty_json'),
   

Pro Tips

• Use for API Responses: Display raw API responses in admin panels for debugging.
• Combine with Filament Spatie Media Library: Show JSON metadata for uploaded files.
• Add Copy-to-Clipboard: Extend the field to include a copy button:

  PrettyJsonField::make('config')
      ->extraAttributes(['data-copy' => 'true']),
  

  Then add JavaScript to handle the copy action.