Filament Json Preview Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require ahmedabdelaal/filament-json-preview
   php artisan vendor:publish --tag=jsoneditor
   

   • The vendor:publish step ensures SVG icons (e.g., for the editor toolbar) are available.

2. First Use Case: Add the JsonPreview component to an Infolist (for read-only display) or Form (for editable JSON):

   use AhmedAbdel3al\FilamentJsonPreview\Widgets\JsonPreview;
   
   public static function form(Form $form): Form
   {
       return $form->schema([
           JsonPreview::make('json_data')
               ->columnSpanFull(), // Optional: Full-width layout
       ]);
   }
   

   • Data Binding: Pass JSON data via the data() method:

     JsonPreview::make('logs')->data($yourJsonArrayOrString)
     

3. Where to Look First:

   • Documentation: The JSONEditor docs for advanced features (e.g., themes, modes).
   • Package Source: Widgets/JsonPreview.php for method signatures and defaults.

Implementation Patterns

Common Workflows

1. Read-Only JSON Display (Infolist):

   JsonPreview::make('config')
       ->label('Application Settings')
       ->columnSpan('full')
       ->disabled(); // Disable editing if needed
   

2. Editable JSON (Form):

   JsonPreview::make('metadata')
       ->required()
       ->rules(['json']) // Validate JSON format
       ->columnSpan('full');
   

   • Note: For forms, ensure the underlying field (e.g., Textarea) is bound to a JSON string or array.

3. Dynamic Data Binding: Use closures for runtime data:

   JsonPreview::make('dynamic_data')
       ->data(fn () => $this->getJsonDataFromApi())
       ->reactive(); // Update on parent changes
   

4. Integration with Filament Tables: Add a JSON column to a table for inline preview:

   Table::make(MyModel::class)
       ->columns([
           Tables\Columns\JsonColumn::make('attributes')
               ->label('JSON Attributes')
               ->content(fn ($record) => JsonPreview::make('preview')
                   ->data($record->attributes)
                   ->disabled()
                   ->columnSpan('full')),
       ]);
   

5. Theming: Leverage JSONEditor’s built-in themes (e.g., dark, light):

   JsonPreview::make('theme_example')
       ->theme('dark')
       ->mode('code'); // or 'tree', 'view'
   

Pro Tips

• Default Values: Set a default JSON structure:

  JsonPreview::make('settings')->default([
      'key' => 'default_value',
  ]);
  

• Conditional Rendering:

  JsonPreview::make('conditional_json')
      ->visible(fn ($record) => $record->hasJsonData)
      ->hiddenLabel();
  

Gotchas and Tips

Pitfalls

1. Data Format Mismatch:

   • Issue: Passing non-JSON strings (e.g., HTML) may break rendering.
   • Fix: Validate input with ->rules(['json']) or pre-process data:

     JsonPreview::make('data')->data(json_encode($array, JSON_PRETTY_PRINT));
     

2. Icon Publishing:

   • Issue: Missing icons if vendor:publish is skipped.
   • Fix: Run php artisan vendor:publish --tag=jsoneditor after installation.

3. Performance with Large JSON:

   • Issue: Deeply nested JSON may lag in the editor.
   • Fix: Use ->mode('code') for large payloads or lazy-load data.

4. Reactivity Quirks:

   • Issue: reactive() may not trigger updates if the parent component doesn’t emit events.
   • Fix: Use ->livewire() for Livewire components or ->reactive() with Alpine.js.

Debugging

• Console Errors:

  • Check for Uncaught TypeError if JSONEditor fails to load. Ensure:
    • No JavaScript errors block the script.
    • The jsoneditor CDN is accessible (or use local assets via mix).
  • Debug Mode: Enable JSONEditor’s debug mode:

    JsonPreview::make('debug_json')->debug(true);
    

• Data Binding:

  • Verify data is a valid JSON string or array:

    dd(json_decode($yourData, true)); // Should not return false
    

Extension Points

1. Custom Modes: Extend JSONEditor’s modes by passing a custom config:

   JsonPreview::make('custom')
       ->options([
           'modes' => ['code', 'tree', 'view', 'form'],
       ]);
   

2. Event Listeners: Listen to JSON changes in forms:

   JsonPreview::make('live_updates')
       ->onChange(fn ($value) => $this->handleJsonChange($value));
   

3. Localization: Override JSONEditor’s labels (e.g., for translations):

   JsonPreview::make('i18n_json')
       ->options([
           'labels' => [
               'add_item' => __('filament-json-preview::add_item'),
           ],
       ]);
   

Config Quirks

• Default Options: The package merges defaults with your config. Override globally via:

  // config/filament-json-preview.php
  'default_options' => [
      'mode' => 'tree',
      'theme' => 'light',
  ],
  

• Asset Loading: If using Laravel Mix/Vite, ensure jsoneditor is included in your build:

  // resources/js/app.js
  import 'jsoneditor/dist/jsoneditor.min.css';
  import 'jsoneditor';