Weave Code
Filament Code Editor Laravel Package
dotswan/filament-code-editor
A Laravel/Filament form field that adds a full-featured code editor to your admin panels. Edit code, JSON, CSS, and more with syntax highlighting, configurable themes, line numbers, and language modes. Easy to drop into any Filament resource or form.
Supercharge Filament with CodeMirror! Effortlessly edit CSS, HTML, JS, JSON, PHP in Filament forms.
Frequently asked questions about Filament Code Editor
- What is dotswan/filament-code-editor and what does it do?
- It is a Filament form field that embeds the CodeMirror editor inside your admin panel, so you can edit code-like content such as CSS, HTML, JavaScript, JSON, and PHP directly in a form. It adds syntax highlighting, line numbers, configurable themes, and language modes on top of a standard Filament component. You drop it into a resource or form schema like any other field.
- How do I install dotswan/filament-code-editor in a Laravel app?
- Install it with Composer using composer require dotswan/filament-code-editor, then register the plugin in your Filament panel provider if the release notes for your version require it. Publish any config or front-end assets the README lists, then clear your caches. Always confirm the Composer constraints match your Filament, Laravel, PHP, and Livewire versions before installing.
- Does dotswan/filament-code-editor support Filament v3?
- Version 2.0.0 targets Filament v4, and because it is a major version bump whose stated change is v4 compatibility, you should treat it as a new compatibility line rather than a drop-in patch. Applications still on Filament v3 should stay on package v1.x until they plan the Filament v4 upgrade. Check the package's composer.json for the exact declared constraints before deciding.
- Which Laravel and PHP versions does this Filament code editor require?
- The package inherits its framework requirements from Filament, so your Laravel, PHP, and Livewire versions must satisfy whatever Filament v4 declares. Look at the composer.json constraints rather than assuming, since those are the authoritative source. If your app runs an older Laravel or PHP version, resolve that upgrade before adopting package v2.
- How do I add a code editor field to a Filament form?
- Use the package's code editor field class inside your form schema and set the language mode you need, such as CSS, HTML, JS, JSON, or PHP. Theme, line numbers, and editor height are typically configured by chaining fluent methods on the field instance. Because the API may have changed in v2, confirm the exact class and method names against the README for your installed version.
- Can I use it to edit JSON or CSS in an admin panel?
- Yes. Editing code-like content in Filament forms is exactly the use case: JSON configuration, CSS snippets, HTML templates, JavaScript, and PHP. Syntax highlighting and line numbers make structured content far easier to read and correct than a plain textarea. It is not a JSON validator, so pair it with validation rules if data correctness matters.
- How do I change the editor theme or turn on line numbers?
- The field exposes options for themes, line numbers, and language modes, usually configured by chaining methods on the field in your form schema. Some builds also allow defaults through a published config file. Option names can differ between major versions, so verify them in the README for v2 before relying on them.
- Is dotswan/filament-code-editor safe to use in production?
- It is a thin form-field wrapper around CodeMirror, so the main risks are version compatibility and asset publishing rather than runtime behavior. Pin the package to a specific version, verify the editor assets load correctly inside your admin panel, and run smoke tests in staging first. No security policy is documented in the available material, so review the license and repository activity yourself.
- How do I upgrade from v1.x to v2.0.0 of this package?
- Version 2.0.0 is a major release adding Filament v4 support, so upgrade Filament and the package together on a dedicated branch rather than partially in production. Check for an upgrade guide, re-register the plugin if the registration API changed, and republish config, views, or assets as needed. Finish with automated tests and manual admin regression checks before a phased rollout.
- What are the alternatives to dotswan/filament-code-editor?
- Alternatives include other Filament code editor fields or Monaco and CodeMirror wrappers, plus a plain monospace Textarea for very simple cases. If you only need JSON input validation, a dedicated JSON field or a small custom form component may be lighter. Compare bundle size, Filament version support, and maintenance activity before switching.
Weaver
How can I help you explore Laravel packages today?