Filamentphp code field

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 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
            ,
    ]);