### Install Filament Pretty JSON via Composer

Source: https://github.com/novadaemon/filament-pretty-json/blob/main/README.md

This command installs the filament-pretty-json package using Composer. It is compatible with Filament versions 2.x, 3.x, and 4.x.

```bash
composer require novadaemon/filament-pretty-json
```

--------------------------------

### Install novadaemon/filament-pretty-json via Composer

Source: https://context7.com/novadaemon/filament-pretty-json/llms.txt

Installs the package using Composer and optionally publishes views for customization. The package auto-registers through Laravel's package discovery mechanism and assets are automatically registered with Filament.

```bash
composer require novadaemon/filament-pretty-json

# Optional: publish views for customization
php artisan vendor:publish --tag="filament-pretty-json-views"
```

--------------------------------

### Custom CSS for Filament Pretty JSON

Source: https://github.com/novadaemon/filament-pretty-json/blob/main/README.md

Provides example CSS rules for customizing the appearance of the pretty JSON display. This includes styling for the container, preformatted text, and specific JSON elements in both light and dark modes.

```css
.prettyjson-container {
  position: relative;
  min-width: 0;
  flex: 1;
}

pre.prettyjson {
  color: black;
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid rgb(229, 231, 235);
  border-radius: 0.5rem;
  padding: 10px 20px;
  overflow: auto;
  font-size: 12px;
}

:is(.dark) pre.prettyjson {
  opacity: 0.7;
  --tw-bg-opacity: 1;
  --tw-border-opacity: 1;
  border: 1px solid rgb(75 85 99 / var(--tw-border-opacity));
  color: rgb(209 213 219 / var(--tw-text-opacity));
}

:is(.dark) pre.prettyjson span.json-key {
  color: red !important;
}

:is(.dark) pre.prettyjson span.json-string {
  color: aquamarine !important;
}

:is(.dark) pre.prettyjson span.json-value {
  color: deepskyblue !important;
}

.copy-button {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  cursor: pointer;
  color: rgb(156 163 175);
  border: none;
  outline: none;
  z-index: 50;
}

.copy-button:hover {
  color: rgb(75 85 99);
}

.copy-button:active,
.copy-button:focus {
  border: none;
  outline: none;
}
```

--------------------------------

### Enable Copy to Clipboard for Pretty JSON Entry

Source: https://github.com/novadaemon/filament-pretty-json/blob/main/README.md

Configures the PrettyJsonEntry component to allow users to copy the JSON content to their clipboard. Custom messages and durations for the confirmation are also supported.

```php
PrettyJsonEntry::make('card_info')
    ->copyable()
    ->copyMessage('Your JSON is copied to the clipboard')
    ->copyMessageDuration(1500)
```

--------------------------------

### Display JSON in Filament Infolists using PrettyJsonEntry

Source: https://context7.com/novadaemon/filament-pretty-json/llms.txt

The PrettyJsonEntry component is used in Filament infolists to display formatted JSON data in read-only views. It supports syntax highlighting and includes an optional copyable functionality with customizable messages and durations.

```php
use NovadaemonFilamentPrettyJsonInfolistPrettyJsonEntry;
use FilamentInfolistsInfolist;
use FilamentResourcesResource;

class OrderResource extends Resource
{
    public static function infolist(Infolist $infolist): Infolist
    {
        return $infolist->schema([
            PrettyJsonEntry::make('payment_details')
                ->label('Payment Information')
                ->copyable()
                ->copyMessage('Payment details copied!')
                ->copyMessageDuration(2000),

            PrettyJsonEntry::make('shipping_info')
                ->extraAttributes([
                    'style' => 'font-size: 14px;',
                ]),
        ]);
    }
}

// Model with various cast types
class Order extends Model
{
    protected $casts = [
        'payment_details' => 'object',
        'shipping_info' => AsArrayObject::class,
    ];
}
```

--------------------------------

### Add Pretty JSON Entry to Filament Infolist

Source: https://github.com/novadaemon/filament-pretty-json/blob/main/README.md

Illustrates how to use the PrettyJsonEntry component within a FilamentPHP infolist schema. This is used to display formatted JSON data in resource detail views.

```php
use Novadaemon\FilamentPrettyJson\Infolist\PrettyJsonEntry;

class InfoResource extends Resource
{
    public static function infolist(Infolist $infolist): Form
    {
        return $infolist
            ->schema([
                PrettyJsonEntry::make('json')
            ]);
    }
}
```

--------------------------------

### Enable Copy-to-Clipboard for JSON Data in Filament

Source: https://context7.com/novadaemon/filament-pretty-json/llms.txt

Both PrettyJsonField and PrettyJsonEntry components support clipboard copying for JSON data. This feature can be enabled using the `copyable()` method and customized with messages and durations.

```php
use NovadaemonFilamentPrettyJsonInfolistPrettyJsonEntry;

PrettyJsonEntry::make('api_response')
    ->copyable()
    ->copyMessage('API response copied to clipboard')
    ->copyMessageDuration(1500);

// The copyable state automatically excludes null values
// and provides the raw JSON string to the clipboard
```

--------------------------------

### JavaScript prettyPrint Function for JSON Formatting

Source: https://context7.com/novadaemon/filament-pretty-json/llms.txt

Shows how to use the globally available `prettyPrint` JavaScript function to convert JSON objects into syntax-highlighted HTML. This function is automatically loaded by the package and can be integrated into custom JavaScript or Alpine.js components.

```javascript
// The prettyPrint function is automatically loaded
// and can be used in custom JavaScript code

const jsonData = {
    "user": "john_doe",
    "email": "john@example.com",
    "settings": {
        "theme": "dark",
        "notifications": true
    },
    "tags": ["admin", "verified"]
};

// Format JSON for display
const formattedHtml = window.prettyPrint(jsonData);

// Use in Alpine.js components (as implemented in the package)
// <div x-data="{
//     json: @js($data),
//     get formatted() { return window.prettyPrint(this.json) }
// }" x-html="formatted"></div>
```

--------------------------------

### Global CSS Customization for JSON Display

Source: https://context7.com/novadaemon/filament-pretty-json/llms.txt

Demonstrates how to override default styling for JSON containers and preformatted JSON elements using CSS. Supports dark mode by targeting '.dark' class and customizes the appearance of JSON keys, strings, and values.

```css
/* Custom styling for JSON containers */
.prettyjson-container {
    position: relative;
    min-width: 0;
    flex: 1;
}

pre.prettyjson {
    color: black;
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid rgb(229, 231, 235);
    border-radius: 0.5rem;
    padding: 10px 20px;
    overflow: auto;
    font-size: 13px;
}

/* Dark mode support */
:is(.dark) pre.prettyjson {
    border: 1px solid rgb(75 85 99);
    color: rgb(209 213 219);
}

:is(.dark) pre.prettyjson span.json-key {
    color: #ff6b6b !important;
}

:is(.dark) pre.prettyjson span.json-string {
    color: #7fdbca !important;
}

:is(.dark) pre.prettyjson span.json-value {
    color: #00bfff !important;
}
```

--------------------------------

### Handling Various JSON Data Types with Laravel Casting

Source: https://context7.com/novadaemon/filament-pretty-json/llms.txt

The package automatically handles multiple JSON data type formats through component lifecycle conversions, supporting Laravel's Eloquent casting system and custom Jsonable implementations.

```php
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Casts\AsArrayObject;
use Illuminate\Contracts\Support\Jsonable;

class Product extends Model
{
    protected $casts = [
        'attributes' => 'string',      // Plain JSON string
        'specs' => 'json',              // Laravel json cast
        'features' => 'array',          // Array cast
        'metadata' => 'object',         // Object cast
        'options' => AsArrayObject::class, // ArrayObject cast
        'custom_data' => CustomCast::class, // Custom Jsonable cast
    ];
}

// Custom Jsonable implementation
class CustomCast implements Jsonable
{
    public function toJson($options = 0): string
    {
        return json_encode($this->data, $options);
    }
}
```

--------------------------------

### Apply Custom Styling to JSON Components with extraAttributes

Source: https://context7.com/novadaemon/filament-pretty-json/llms.txt

Custom CSS styling can be applied to individual JSON display components using the `extraAttributes` method. This allows for adjustments to height, scrolling behavior, and other visual aspects.

```php
use NovadaemonFilamentPrettyJsonFormPrettyJsonField;

PrettyJsonField::make('large_json_data')
    ->extraAttributes([
        'style' => 'max-height: 400px; overflow-y: scroll;',
        'class' => 'custom-json-container',
    ]);
```

--------------------------------

### Add Pretty JSON Field to Filament Form

Source: https://github.com/novadaemon/filament-pretty-json/blob/main/README.md

Demonstrates how to integrate the PrettyJsonField component into a FilamentPHP form schema. This allows displaying JSON data in a formatted way within form resources.

```php
use NovadaemonFilamentPrettyJsonForm\PrettyJsonField;

class FormResource extends Resource
{
    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                PrettyJsonField::make('json')
            ]);
    }
}
```

--------------------------------

### Add Extra Attributes to Pretty JSON Field

Source: https://github.com/novadaemon/filament-pretty-json/blob/main/README.md

Demonstrates how to apply additional HTML attributes to the container of the PrettyJsonField component using the `extraAttributes()` method. This can be used for styling or other DOM manipulations.

```php
PrettyJsonField::make('card')
->extraAttributes([
  'style' => 'max-height: 200px;',
]),
```

--------------------------------

### Display JSON in Filament Forms using PrettyJsonField

Source: https://context7.com/novadaemon/filament-pretty-json/llms.txt

The PrettyJsonField component displays formatted JSON data within Filament forms. It automatically handles conversion of various data types to formatted JSON strings with syntax highlighting. Supports custom styling via extraAttributes.

```php
use NovadaemonFilamentPrettyJsonFormPrettyJsonField;
use FilamentFormsForm;
use FilamentResourcesResource;

class UserResource extends Resource
{
    public static function form(Form $form): Form
    {
        return $form->schema([
            PrettyJsonField::make('metadata')
                ->label('User Metadata'),

            PrettyJsonField::make('settings')
                ->extraAttributes([
                    'style' => 'max-height: 300px; overflow-y: auto;',
                ]),
        ]);
    }
}

// Model with JSON casting
class User extends Model
{
    protected $casts = [
        'metadata' => 'array',
        'settings' => 'json',
    ];
}
```

--------------------------------

### Casting JSON Field Values in Laravel

Source: https://github.com/novadaemon/filament-pretty-json/blob/main/README.md

Shows how to configure attribute casting for a JSON field in a Laravel model. This allows the JSON data to be treated as strings, arrays, objects, or custom cast types.

```php
/**
 * @var string[]
 */
protected $casts = [
    'card_info' => 'string',
    // OR 'card_info' => 'json',
    // OR 'card_info' => 'array',
    // OR 'card_info' => 'object',
    // OR 'card_info' => AsArrayObject::class,
    // OR 'card_info' => CustomCast::class,
];
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.