creagia/filament-code-field

A Filamentphp input field to edit or view code data.

3.0.4 2025-03-11 10:20 UTC

Requires

• php: ^8.1
• filament/filament: ^3.2
• illuminate/contracts: ^10.0|^11.0|^12.0
• spatie/laravel-package-tools: ^1.16

Requires (Dev)

• laravel/pint: ^1.0
• nunomaduro/collision: ^6.0|^8.0
• nunomaduro/larastan: ^2.0.1|^3.0
• orchestra/testbench: ^8.0|^9.0|^10.0
• pestphp/pest: ^1.21|^2.34|^3.7
• pestphp/pest-plugin-laravel: ^1.1|^2.3|^3.1
• phpstan/extension-installer: ^1.1
• phpstan/phpstan-deprecation-rules: ^1.0|^2.0
• phpstan/phpstan-phpunit: ^1.0|^2.0
• phpunit/phpunit: ^9.5|^10.5|^11.5.3
• spatie/laravel-ray: ^1.26

MIT

• Creagia

• laravel
• code editor
• filament
• creagia
• filament-code-field
• filament field

README

A CodeMirror powered code field for the Filamentphp admin panel and form builder.

With code autocompletion, light/dark modes, multiple languages, read-only mode and more.

Check screenshots and read more about the package in our blog post.

Installation

Latest version of the package requires Filament 3 and Laravel 11.

You can install the package via composer:

composer require creagia/filament-code-field

⚠️ Use version 2.x.x for Filament 3 and Laravel 10-12 support ⚠️

composer require "creagia/filament-code-field:^2.0.0"

⚠️ Use version 1.x.x for Filament 2 support ⚠️

composer require "creagia/filament-code-field:^1.0.0"

Usage

Creating a code field is straightforward, just instantiate the CodeField class for the desired property.

use Creagia\FilamentCodeField\CodeField;

return $form
    ->schema([
        CodeField::make('my_json'),
        // other fields
    ]);

Choosing another language

By default, a JSON field will be created.

If you want to create a field for another supported language, you can do so with the setLanguage() and helper methods.

Supported languages: JSON, PHP, HTML, XML and JavaScript (JS).

use Creagia\FilamentCodeField\CodeField;

return $form
    ->schema([
        CodeField::make('js_code')
            ->setLanguage(CodeField::JS),
            // or
            ->jsField()
    ]);

Disabling code completion

By default, the field comes with code completion/suggestions enabled.

For disabling this feature, use the disableAutocompletion().

use Creagia\FilamentCodeField\CodeField;

return $form
    ->schema([
        CodeField::make('js_code')
            ->htmlField()
            ->disableAutocompletion(),
    ]);

Line numbers

Line numbers can be enabled using the withLineNumbers() method.

use Creagia\FilamentCodeField\CodeField;

return $form
    ->schema([
        CodeField::make('json')
            ->withLineNumbers(),
    ]);

Read-only mode

Adding the Filamentphp disabled() method will make the code field read-only.

use Creagia\FilamentCodeField\CodeField;

return $form
    ->schema([
        CodeField::make('json')
            ->disabled(),
    ]);

Filamentphp methods

Of course, the code field extends the Filamentphp field class, and you can use all the usual methods such as label().

use Creagia\FilamentCodeField\CodeField;

return $form
    ->schema([
        CodeField::make('json')
            ->label('Your JSON data')
            ->hint('Top right corner info')
            ->helper('More info after the text field')
            // more methods
            ,
    ]);