PHPackages                             pepperfm/filament-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. pepperfm/filament-json

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

pepperfm/filament-json
======================

Filament plugin for processing JSON field

5.0.2(4w ago)750.5k↓43.8%2MITPHPPHP ^8.2CI passing

Since Jul 16Pushed 3w ago1 watchersCompare

[ Source](https://github.com/pepperfm/filament-json)[ Packagist](https://packagist.org/packages/pepperfm/filament-json)[ Docs](https://github.com/pepperfm/filament-json)[ GitHub Sponsors](https://github.com/pepperfm)[ RSS](/packages/pepperfm-filament-json/feed)WikiDiscussions 5.x Synced 2d ago

READMEChangelog (5)Dependencies (51)Versions (57)Used By (0)

Filament JSON Column (v5)
=========================

[](#filament-json-column-v5)

[![Latest Version on Packagist](https://camo.githubusercontent.com/d8cd6d9c322b384932efa208545c2255d6abf19349c198059c27d9f64c82b14f/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f706570706572666d2f66696c616d656e742d6a736f6e2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/pepperfm/filament-json)[![Tests](https://camo.githubusercontent.com/99822530b9f1f7a98d443e36d27fad57b4449f6e0c9e8759c5273e6b62da06b7/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f706570706572666d2f66696c616d656e742d6a736f6e2f72756e2d74657374732e796d6c3f6272616e63683d352e78266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/pepperfm/filament-json/actions/workflows/run-tests.yml?query=branch%3A5.x)[![Code Style](https://camo.githubusercontent.com/8f53d2f32bfd565bd5de6e2115a6d40b0830c87e98f3b13df0fd7a39f2859623/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f706570706572666d2f66696c616d656e742d6a736f6e2f6669782d7068702d636f64652d7374796c696e672e796d6c3f6272616e63683d352e78266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/pepperfm/filament-json/actions/workflows/fix-php-code-styling.yml?query=branch%3A5.x)[![Downloads](https://camo.githubusercontent.com/68bfdace7bd23b304551d720dfa2b9e7e1ee5379c200a08917f54247f6a6aa1f/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f706570706572666d2f66696c616d656e742d6a736f6e2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/pepperfm/filament-json)

Beautiful JSON viewer column for **Filament v5** tables.

- **Render modes:** Tree / Table
- **Presentation modes:** Inline / Modal / Drawer
- **Inline** shows **pretty-printed raw JSON** (compact, fast) with **click-to-copy**
- **Modal/Drawer** support **Expand all / Collapse all** (Tree mode) and **Copy JSON**
- Polished **light/dark** styling. No build steps required for your app.

---

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

[](#installation)

### [Documentation on my doc. website](https://docs.pepperfm.com/filament-json)

[](#documentation-on-my-doc-website)

```
composer r pepperfm/filament-json:^5.0
```

> Previous major versions:
>
> - Filament 4 → `composer r pepperfm/filament-json:^4.0` or `^3.0`
> - Filament 3 → `composer r pepperfm/filament-json:^2.0`

Optionally publish config or views if you want to customize them:

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

No Tailwind/Vite setup is required — the package ships a compiled stylesheet and registers it via Filament assets.

---

Quick start
-----------

[](#quick-start)

```
use PepperFM\FilamentJson\Columns\JsonColumn;
use PepperFM\FilamentJson\Enums\{RenderModeEnum, ContainerModeEnum};

// Inline (in-cell): always pretty raw JSON with click-to-copy
JsonColumn::make('properties')
    ->renderAs(RenderModeEnum::Tree) // used if you later switch to modal/drawer
    ->presentIn(ContainerModeEnum::Inline);

// Tree in a Drawer (with toolbar)
JsonColumn::make('properties')
    ->renderAs(RenderModeEnum::Tree)
    ->presentIn(ContainerModeEnum::Drawer)
    ->initiallyCollapsed(1)
    ->expandAllToggle() // Tree only (modal/drawer)
    ->copyJsonAction(false); // hide Copy button

// Table mode in a Modal with custom headers
JsonColumn::make('properties')
    ->renderAs(RenderModeEnum::Table)
    ->presentIn(ContainerModeEnum::Modal)
    ->keyColumnLabel('Custom Key Label')
    ->valueColumnLabel('Custom Value Label');
```

### Sugar aliases

[](#sugar-aliases)

```
// Content render mode:
->asTree() // = renderAs(RenderModeEnum::Tree)
->asTable() // = renderAs(RenderModeEnum::Table)

// Container presentation:
->inlineContainer() // = presentIn(ContainerModeEnum::Inline)
->inModal() // = presentIn(ContainerModeEnum::Modal)
->inDrawer() // = presentIn(ContainerModeEnum::Drawer)
```

---

Behavior & UX
-----------------

[](#behavior--ux)

- **Inline** container always renders a **pretty-printed raw JSON block** directly in the cell.
    Click the block (or press Enter/Space when focused) to copy JSON to clipboard.
- Raw JSON strings are decoded when they contain valid JSON, so string database values such as `{"key":"value"}` can still render as structured Tree/Table content.
- **Expand/Collapse** buttons only appear in **Tree** mode, and only for **Modal/Drawer**.
- `maxDepth(int)` controls nesting depth rendering in **Table** mode.
- `filterNullable(true)` filters out `null` values from arrays/collections. It preserves valid JSON falsy values like `false`, `0`, `"0"`, and empty strings.
- `characterLimit(?int)` truncates long string scalars.

---

Modal / Drawer toolbar
----------------------

[](#modal--drawer-toolbar)

In modal/drawer modes you can enable a small toolbar above the content:

```
JsonColumn::make('properties')
    ->asTree()
    ->inDrawer()
    ->expandAllToggle() // adds Expand all / Collapse all buttons
    ->copyJsonAction(false); // hide Copy JSON button
```

---

Labels (Table mode)
-------------------

[](#labels-table-mode)

```
JsonColumn::make('properties')
    ->asTable()
    ->inModal()
    ->keyColumnLabel('Key')
    ->valueColumnLabel('Value');
```

---

API reference (selected)
------------------------

[](#api-reference-selected)

- `renderAs(RenderModeEnum::Tree|Table)` — choose how JSON is rendered.
- `presentIn(ContainerModeEnum::Inline|Modal|Drawer)` — choose where it is presented.
- `asTree()`, `asTable()` — sugar for `renderAs(...)`.
- `inlineContainer()`, `inModal()`, `inDrawer()` — sugar for `presentIn(...)`.
- `initiallyCollapsed(int $depth = 1)` — auto-collapse depth for Tree.
- `expandAllToggle(bool $on = true)` — toggle Tree toolbar buttons (modal/drawer).
- `copyJsonAction(bool $on = true)` — toggle Copy JSON button (modal/drawer).
- `keyColumnLabel(string)`, `valueColumnLabel(string)` — Table headers.
- `maxDepth(int)` — nesting limit for Table mode nested blocks.
- `filterNullable(bool)` — filter out `null` values while preserving falsy JSON scalars.
- `characterLimit(?int)` — truncate long string values.
- `getContainerMode()` / `isModalContainer()` / `isDrawerContainer()` / `isInlineContainer()` — container checks.

---

Migration from v4 → v5
----------------------

[](#migration-from-v4--v5)

Filament v5 has no breaking API changes — it adds Livewire v4 support. The upgrade is straightforward:

```
composer require pepperfm/filament-json:^5.0
```

No code changes required. All existing `JsonColumn` configuration works as-is.

**Requirements:**

- PHP 8.2+
- Laravel 11.28+ or 12+
- Filament 5.x

---

Migration from v3 → v4
----------------------

[](#migration-from-v3--v4)

### TL;DR

[](#tldr)

- **Inline** now always renders **pretty raw JSON** (with click‑to‑copy).
    If you need the interactive **Tree** inside a cell — switch to **Modal** or **Drawer** (e.g. `->inDrawer()`).
- Methods renamed for clarity (old ones still work but are deprecated):
    - `asModal()` → `inModal()`
    - `asDrawer()` → `inDrawer()`
    - `inline()` → `inlineContainer()`
    - `getAsModal()/getAsDrawer()/getContainer()` → `getContainerMode()` or `isInlineContainer()`
- No app-side asset build is required anymore — the package ships compiled CSS.

### Before (v3)

[](#before-v3)

```
JsonColumn::make('properties')
    ->asTree()
    ->asDrawer()
    ->initiallyCollapsed()
    ->filterNullable();
```

### After (v4)

[](#after-v4)

```
use PepperFM\FilamentJson\Enums\{RenderModeEnum, ContainerModeEnum};

JsonColumn::make('properties')
    ->renderAs(RenderModeEnum::Tree)
    ->presentIn(ContainerModeEnum::Drawer)
    ->initiallyCollapsed()
    ->filterNullable(true);
```

### Inline behavior change

[](#inline-behavior-change)

If you previously relied on Tree/Table **inline** (inside the cell), note that v4 renders **pretty JSON** instead.
To keep the interactive view, present it in a modal or drawer:

```
JsonColumn::make('properties')
    ->asTree()
    ->inDrawer(); // or ->inModal()
```

### Optional toolbar

[](#optional-toolbar)

In modal/drawer Tree mode you can show a small toolbar:

```
JsonColumn::make('properties')
    ->asTree()
    ->inDrawer()
    ->expandAllToggle() // Expand all / Collapse all buttons
    ->copyJsonAction(false); // Hide copy JSON button
```

### Testing adjustments

[](#testing-adjustments)

If you test rendering, use a Filament **List** resource page fixture and ensure session/error bags are initialized in your test case to avoid `ViewErrorBag` null issues.

---

Version matrix
--------------

[](#version-matrix)

- Filament **5.x** → `pepperfm/filament-json:^5.0`
- Filament **4.x** → `pepperfm/filament-json:^4.0` or `^3.0`
- Filament **3.x** → `pepperfm/filament-json:^2.0`

Your existing constraints like `^3.x` or `^4.x` will continue to resolve to the proper major — v5 won’t auto-install unless you opt in.

---

Styling
-------

[](#styling)

The package ships a compiled CSS with soft borders, proper light/dark palette, and table grid lines.
If you publish views and manually tweak Tailwind, ensure your scanner includes the package views (e.g. `resources/views/vendor/filament-json/**/*.blade.php`).

---

Package extension points
------------------------

[](#package-extension-points)

The package keeps a small facade target, an empty publishable config file, and a Livewire testing mixin registration for backward compatibility and future package-level helpers. The primary public API remains `JsonColumn::make(...)->...`.

---

### Customize button and modal props

[](#customize-button-and-modal-props)

Important

The `button()` and `modal()` method accept the type of `array|Arrayable|\stdClass`, and implements basic properties of button and modal blade components from Filament documentation: Core Concepts - Blade Components

```
use PepperFM\FilamentJson\Columns\JsonColumn;
use Filament\Support\Enums\Width;
use Filament\Support\Icons\Heroicon;

$buttonConfig = literal(
    color: 'primary',
    size: Width::Medium->value
);
$modalConfig = [
    'icon' => Heroicon::OutlinedSwatch,
    'alignment' => 'start',
    'width' => Width::Medium->value,
    'closedByEscaping' => true,
    'closed_button' => false, // also accepts camel_case
];

JsonColumn::make('properties')
    ->inModal()
    ->button($buttonConfig)
    ->modal($modalConfig);
```

#### DTO schemas of components configuration:

[](#dto-schemas-of-components-configuration)

```
use Filament\Support\Enums\Width;
use Filament\Support\Icons\Heroicon;

class ButtonConfigDto extends \Pepperfm\Ssd\BaseDto
{
    public string $color = 'primary';

    public Heroicon $icon = Heroicon::OutlinedSwatch;

    public ?string $label = null;

    public ?string $tooltip = null;

    public string $size = Width::Medium->value;

    public ?string $href = null;

    public ?string $tag = null;
}
```

```
use Filament\Support\Icons\Heroicon;
use Filament\Support\Enums\Alignment;
use Filament\Support\Enums\Width;

class ModalConfigDto extends \Pepperfm\Ssd\BaseDto
{
    public ?string $id = null;

    public Heroicon $icon = Heroicon::Sparkles;

    public string $iconColor = 'primary';

    public Alignment $alignment = Alignment::Start;

    public string $width = Width::TwoExtraLarge->value;

    public bool $closeByClickingAway = true;

    public bool $closedByEscaping = true;

    public bool $closedButton = true;

    public bool $autofocus = true;
}
```

---

Testing
-------

[](#testing)

```
composer test
composer analyse
composer lint
```

The test suite uses Pest v4, Orchestra Testbench, and Filament resource fixtures to cover the column API and package integration points.

---

Changelog
---------

[](#changelog)

See the GitHub Releases page for a full changelog per version.

---

Security
--------

[](#security)

If you discover any security-related issues, please email the maintainer instead of using the issue tracker. When debugging host-application data, avoid logging raw JSON payloads unless you have reviewed them for secrets or personal data.

---

Credits
-------

[](#credits)

- @pepperfm (author)
- All contributors

---

License
-------

[](#license)

The MIT License (MIT). See `LICENSE` for details.

###  Health Score

56

—

FairBetter than 97% of packages

Maintenance94

Actively maintained with recent releases

Popularity37

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity67

Established project with proven stability

 Bus Factor1

Top contributor holds 100% 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.

###  Release Activity

Cadence

Every ~12 days

Recently: every ~73 days

Total

56

Last Release

28d ago

Major Versions

1.x-dev → 2.0.02025-03-22

2.0.4 → 3.0.02025-08-17

2.x-dev → 3.0.22025-08-17

3.x-dev → 4.0.02025-08-17

4.x-dev → 5.0.02026-03-16

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/36007880?v=4)[Dmitry](/maintainers/PepperFM)[@pepperfm](https://github.com/pepperfm)

---

Top Contributors

[![pepperfm](https://avatars.githubusercontent.com/u/36007880?v=4)](https://github.com/pepperfm "pepperfm (81 commits)")

---

Tags

laravelpepperfmfilament-json

###  Code Quality

TestsPest

Static AnalysisPHPStan

Code StyleLaravel Pint

Type Coverage Yes

### Embed Badge

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

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

###  Alternatives

[stephenjude/filament-feature-flags

Filament implementation of feature flags and segmentation with Laravel Pennant.

122177.8k1](/packages/stephenjude-filament-feature-flags)[ysfkaya/filament-phone-input

A phone input component for Laravel Filament

3161.3M25](/packages/ysfkaya-filament-phone-input)[rawilk/profile-filament-plugin

Profile & MFA starter kit for filament.

3914.6k](/packages/rawilk-profile-filament-plugin)[marcelweidum/filament-expiration-notice

Customize the livewire expiration notice

94135.4k5](/packages/marcelweidum-filament-expiration-notice)[stephenjude/filament-jetstream

A Laravel starter kit built with Filament inspired by Jetstream.

17760.2k3](/packages/stephenjude-filament-jetstream)[stephenjude/filament-debugger

About

104162.2k2](/packages/stephenjude-filament-debugger)

PHPackages © 2026

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