PHPackages                             itliusha/filament-pretty-json - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. itliusha/filament-pretty-json

ActiveLibrary[Utility & Helpers](/categories/utility)

itliusha/filament-pretty-json
=============================

Read-only field to show pretty json in your filamentphp forms

08PHP

Since Nov 25Pushed 5mo agoCompare

[ Source](https://github.com/itliusha/filament-pretty-json)[ Packagist](https://packagist.org/packages/itliusha/filament-pretty-json)[ RSS](/packages/itliusha-filament-pretty-json/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

novadaemon/filament-pretty-json
===============================

[](#novadaemonfilament-pretty-json)

Read-only field to show pretty json in your [filamentphp](https://filamentphp.com/) forms or infolists.

[![Screenshot](https://raw.githubusercontent.com/novadaemon/filament-pretty-json/refs/heads/main/resources/img/screenshot.webp)](https://raw.githubusercontent.com/novadaemon/filament-pretty-json/refs/heads/main/resources/img/screenshot.webp)

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require itliusha/filament-pretty-json:dev-main
```

This package supports Filament 2.x, 3.x and 4.x.

Add to form
-----------

[](#add-to-form)

Simply use the component as you'd use any other Filament field. It's especially perfect for the resource view page where it blends right in.

```
use Novadaemon\FilamentPrettyJson\Form\PrettyJsonField;

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

Add to infolist
---------------

[](#add-to-infolist)

Use *PrettyJsonEntry* class instead.

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

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

The value of the field can be casting to string, json, array, object, AsArrayObject or object that implements Jsonable interface

```
/**
 * @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,
];
```

Allowing the value to be copied to the clipboard
------------------------------------------------

[](#allowing-the-value-to-be-copied-to-the-clipboard)

You may make the JSON copyable, such that clicking on the icon that appear in the top of the div when this option is enabled, the JSON value to the clipboard, and optionally specify a custom confirmation message and duration in milliseconds.

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

[![Copyable](https://raw.githubusercontent.com/novadaemon/filament-pretty-json/refs/heads/main/resources/img/copyable.webp)](https://raw.githubusercontent.com/novadaemon/filament-pretty-json/refs/heads/main/resources/img/copyable.webp)

Customize
---------

[](#customize)

### Add extra attributes

[](#add-extra-attributes)

You can add additional attributes to the pre div using the **extraAttributes()** method.

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

### Global customization

[](#global-customization)

Optionally, you can publish the views using

```
php artisan vendor:publish --tag="filament-pretty-json-views"
```

Also, you can overwrite the css rules in your stylesheets.

```
.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;
}
```

Contributing
------------

[](#contributing)

Contributing is pretty chill and is highly appreciated! Just send a PR and/or create an issue!

Credits
-------

[](#credits)

- [All contributors](https://github.com/novadaemon/filament-pretty-json/contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

19

—

LowBetter than 10% of packages

Maintenance51

Moderate activity, may be stable

Popularity4

Limited adoption so far

Community12

Small or concentrated contributor base

Maturity12

Early-stage or recently created project

 Bus Factor1

Top contributor holds 81.3% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://www.gravatar.com/avatar/e466dbb53646bb9a9938aae547edf5397c62eaf14b89c57ac4b2f25f492c6ad3?d=identicon)[itliusha](/maintainers/itliusha)

---

Top Contributors

[![novadaemon](https://avatars.githubusercontent.com/u/11314101?v=4)](https://github.com/novadaemon "novadaemon (39 commits)")[![itliusha](https://avatars.githubusercontent.com/u/37198584?v=4)](https://github.com/itliusha "itliusha (4 commits)")[![Ercogx](https://avatars.githubusercontent.com/u/22002063?v=4)](https://github.com/Ercogx "Ercogx (2 commits)")[![laravel-shift](https://avatars.githubusercontent.com/u/15991828?v=4)](https://github.com/laravel-shift "laravel-shift (1 commits)")[![natecarlson](https://avatars.githubusercontent.com/u/502200?v=4)](https://github.com/natecarlson "natecarlson (1 commits)")[![zmiulan](https://avatars.githubusercontent.com/u/2788819?v=4)](https://github.com/zmiulan "zmiulan (1 commits)")

### Embed Badge

![Health badge](/badges/itliusha-filament-pretty-json/health.svg)

```
[![Health](https://phpackages.com/badges/itliusha-filament-pretty-json/health.svg)](https://phpackages.com/packages/itliusha-filament-pretty-json)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)