Code editor

Introduction

The code editor component allows you to write code in a textarea with line numbers. By default, no syntax highlighting is applied.

use Filament\Forms\Components\CodeEditor;

CodeEditor::make('code')

Using language syntax highlighting

You may change the language syntax highlighting of the code editor using the language() method. The editor supports CSS, HTML, JavaScript, JSON and PHP. You can open the Filament\Forms\Components\CodeEditor\Enums\Language enum class to see the full list. To switch to using JavaScript syntax highlighting, you can use the Language::JavaScript enum value:

use Filament\Forms\Components\CodeEditor;
use Filament\Forms\Components\CodeEditor\Enums\Language;

CodeEditor::make('code')
    ->language(Language::JavaScript)

As well as allowing a static value, the language() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.

Learn more about utility injection.

Utility	Type	Parameter	Description
Field	Filament\Forms\Components\Field	$component	The current field component instance.
Get function	Filament\Schemas\Components\Utilities\Get	$get	A function for retrieving values from the current form data. Validation is not run.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent model FQN	?string<Illuminate\Database\Eloquent\Model>	$model	The Eloquent model FQN for the current schema.
Operation	string	$operation	The current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>.
Raw state	mixed	$rawState	The current value of the field, before state casts were applied. Validation is not run.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current schema.
State	mixed	$state	The current value of the field. Validation is not run.