diff --git a/docs-assets/app/app/Livewire/Forms/FieldsDemo.php b/docs-assets/app/app/Livewire/Forms/FieldsDemo.php
index e43f98393c..ae490f2bec 100644
--- a/docs-assets/app/app/Livewire/Forms/FieldsDemo.php
+++ b/docs-assets/app/app/Livewire/Forms/FieldsDemo.php
@@ -8,6 +8,7 @@ use Filament\Actions\Contracts\HasActions;
 use Filament\Forms\Components\Builder;
 use Filament\Forms\Components\Checkbox;
 use Filament\Forms\Components\CheckboxList;
+use Filament\Forms\Components\CodeEditor;
 use Filament\Forms\Components\ColorPicker;
 use Filament\Forms\Components\DatePicker;
 use Filament\Forms\Components\DateTimePicker;
@@ -1853,6 +1854,26 @@ class FieldsDemo extends Component implements HasActions, HasSchemas
                             ->pips()
                             ->default(50),
                     ]),
+                Group::make()
+                    ->id('codeEditor')
+                    ->extraAttributes([
+                        'class' => 'p-16 max-w-xl',
+                    ])
+                    ->schema([
+                        CodeEditor::make('code')
+                            ->default(<<<PHP
+                                <?php
+
+                                namespace App\Models;
+
+                                use Illuminate\Database\Eloquent\Model;
+
+                                class Post extends Model
+                                {
+                                    // ...
+                                }
+                                PHP),
+                    ]),
             ]);
     }
 
diff --git a/docs-assets/screenshots/images/dark/forms/fields/code-editor/simple.jpg b/docs-assets/screenshots/images/dark/forms/fields/code-editor/simple.jpg
new file mode 100644
index 0000000000..8da5938b8c
Binary files /dev/null and b/docs-assets/screenshots/images/dark/forms/fields/code-editor/simple.jpg differ
diff --git a/docs-assets/screenshots/images/light/forms/fields/code-editor/simple.jpg b/docs-assets/screenshots/images/light/forms/fields/code-editor/simple.jpg
new file mode 100644
index 0000000000..50d512aa9f
Binary files /dev/null and b/docs-assets/screenshots/images/light/forms/fields/code-editor/simple.jpg differ
diff --git a/docs-assets/screenshots/schema.js b/docs-assets/screenshots/schema.js
index e0368ec7d3..322d8cd639 100644
--- a/docs-assets/screenshots/schema.js
+++ b/docs-assets/screenshots/schema.js
@@ -1402,6 +1402,20 @@ export default {
             deviceScaleFactor: 3,
         },
     },
+    'forms/fields/code-editor/simple': {
+        url: 'forms/fields',
+        selector: '#codeEditor',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+        before: async (page) => {
+            await page.waitForNetworkIdle()
+
+            await new Promise((resolve) => setTimeout(resolve, 500))
+        },
+    },
     'forms/fields/actions/suffix': {
         url: 'forms/fields',
         selector: '#suffixAction',
diff --git a/packages/forms/docs/01-overview.md b/packages/forms/docs/01-overview.md
index e95a0ed870..8f97d767ae 100644
--- a/packages/forms/docs/01-overview.md
+++ b/packages/forms/docs/01-overview.md
@@ -29,6 +29,7 @@ Form field classes can be found in the `Filament\Form\Components` namespace. The
 - [Color picker](color-picker)
 - [Toggle buttons](toggle-buttons)
 - [Slider](slider)
+- [Code editor](code-editor)
 - [Hidden](hidden)
 
 You may also [create your own custom fields](custom-fields) to edit data however you wish.
diff --git a/packages/forms/docs/20-code-editor.md b/packages/forms/docs/20-code-editor.md
new file mode 100644
index 0000000000..fec6bb9b3d
--- /dev/null
+++ b/packages/forms/docs/20-code-editor.md
@@ -0,0 +1,16 @@
+---
+title: Code editor
+---
+import AutoScreenshot from "@components/AutoScreenshot.astro"
+
+## Introduction
+
+The code editor component allows you to write code in a set of common programming languages: HTML, CSS, JavaScript, PHP and JSON.
+
+```php
+use Filament\Forms\Components\CodeEditor;
+
+CodeEditor::make('code')
+```
+
+<AutoScreenshot name="forms/fields/code-editor/simple" alt="Code editor" version="4.x" />
diff --git a/packages/forms/docs/20-hidden.md b/packages/forms/docs/21-hidden.md
similarity index 100%
rename from packages/forms/docs/20-hidden.md
rename to packages/forms/docs/21-hidden.md
diff --git a/packages/forms/docs/21-custom-fields.md b/packages/forms/docs/22-custom-fields.md
similarity index 100%
rename from packages/forms/docs/21-custom-fields.md
rename to packages/forms/docs/22-custom-fields.md
diff --git a/packages/forms/docs/22-validation.md b/packages/forms/docs/23-validation.md
similarity index 100%
rename from packages/forms/docs/22-validation.md
rename to packages/forms/docs/23-validation.md
diff --git a/packages/schemas/docs/01-overview.md b/packages/schemas/docs/01-overview.md
index 028fee5890..aa2d06c2f7 100644
--- a/packages/schemas/docs/01-overview.md
+++ b/packages/schemas/docs/01-overview.md
@@ -43,6 +43,7 @@ For building [forms](../forms), Filament includes a set of fields for different
 - [Color picker](../forms/color-picker)
 - [Toggle buttons](../forms/toggle-buttons)
 - [Slider](../forms/slider)
+- [Code editor](../forms/code-editor)
 - [Hidden](../forms/hidden)
 - Or, build your own [custom form field](../forms/custom-fields)