Weave Code
Weaver
Helps Laravel developers discover, compare, and choose open-source packages. See popularity, security, maintainers, and scores at a glance to make better decisions.
Feedback
Share your thoughts, report bugs, or suggest improvements.
Subject
Message
Filament Monaco Editor

Filament Monaco Editor Laravel Package

timo-de-winter/filament-monaco-editor

Filament form field that brings the Monaco Editor, the code editor behind VS Code, into your admin panels. Edit JSON, CSS, JavaScript, and other code directly in forms with syntax highlighting, autocompletion, and the familiar editor experience.

View on GitHub
Deep Wiki
Context7

A package to implement the monaco editor into a filament project

Frequently asked questions about Filament Monaco Editor
How do I install timo-de-winter/filament-monaco-editor in a Laravel Filament panel?
Install the package with Composer, register its plugin on the target Filament panel provider, and run the asset-publish step so the Monaco bundle and worker files are available. There are no migrations or service-provider changes beyond panel registration. Because the release notes are thin, pin the exact version you validate rather than using a caret range, and record that pin with a review date.
Which Filament version does timo-de-winter/filament-monaco-editor support?
The plugin's major versions appear to track the host Filament major, so the v5.x line likely targets Filament v5. Confirm this against the package's composer.json constraints for filament/filament, laravel/framework, livewire/livewire, and PHP before installing. If your panel runs Filament v4, treat plugin v5 as incompatible until you upgrade or select an older plugin line.
Does the Monaco editor form field work with Livewire in Filament?
Yes. The field is a Filament form component rendered inside a Livewire component, so the editor mounts client-side within that Livewire-rendered form. Test a full Livewire re-render and a deploy cycle during your pilot, since heavy JavaScript widgets can lose or duplicate state when the DOM is swapped. Keep the editor on a single low-risk form behind a feature flag until that passes.
How do I add a JSON or CSS code editor to a Filament resource form?
Add the package's field class to your form schema components array, binding it to the model attribute that holds the code and setting the language for highlighting and autocompletion. The field is declarative, so it can be dropped into any resource form or custom page without changing your schema. Validate the exact class name and language option names against the installed version's source, since documentation is sparse.
Does filament-monaco-editor load Monaco from a CDN or publish assets locally?
The package registers assets, but the release artifacts do not clearly state whether Monaco is fetched from a CDN at runtime or published into public/. Decide this explicitly during your dependency spike and document the choice, because it determines air-gapped support, CSP behavior, and bundle size. A supported no-CDN mode is not documented, so verify it yourself before committing.
Will the Monaco Editor break my Content-Security-Policy in Filament?
It can. Monaco spawns blob and web workers, which are commonly blocked unless worker-src and script-src permit blob: or a nonce. Validate the editor under your production CSP on a throwaway branch before rollout, and check whether the package documents nonce support or CSP guidance. If your policy is strict, this is the main integration risk rather than the PHP code.
Is timo-de-winter/filament-monaco-editor actively maintained and does it have a changelog?
The release signal is weak: v5.6.3 is published with only a compare link from v5.0.0 and no narrative changelog, and the project has a single maintainer. Six minor releases without human-readable notes means you cannot tell from the artifacts what changed or whether minor bumps were breaking in practice. Subscribe to GitHub Releases, pin the exact version, and assign an owner to re-evaluate on the next minor release.
How should I test the Monaco editor field before using it in production?
Run a dependency spike on a throwaway branch: install, register the plugin, render one field, and confirm the editor loads under your CSP. Measure the JavaScript payload on a throttled connection and decide between CDN and published assets. Then pilot a single low-risk JSON config field behind a feature flag and roll out only after it survives a deploy and a Livewire re-render test.
Can I use the Monaco editor field in an offline or air-gapped Filament admin panel?
Only if the Monaco assets and web workers are served locally rather than from a CDN, and the package does not document a supported no-CDN mode. Even with published assets, Monaco's blob workers must be allowed by your CSP in an isolated environment. Treat air-gapped use as unproven until you have validated asset delivery and worker loading yourself.
What alternatives are there to filament-monaco-editor for code editing in Filament forms?
Alternatives include CodeMirror-based Filament editor fields, a highlighted textarea component, or a custom Blade component wrapping the editor you already trust. The main trade-offs are bundle size, CSP friendliness, offline asset control, and maintenance health. Avoid installing two Monaco-based plugins in one panel, since duplicate Monaco bundles will inflate the payload and can conflict.
Weaver

How can I help you explore Laravel packages today?

Conversation history is not saved when not logged in.
Prompt
Add packages to context
No packages found.
middlewares/firewall
qubiqx/montapacking
nyoncode/laravel-package-console
pnscripts/filament-broadquill-lite
pnscripts/laravel-sentfold-lite
vleap/mx-sdk-laravel-internal
twidpay/utils
htetmyathlaing/scout-elasticsearch-driver
artisan-toolbox/front-awesome
ls/client-assistant
users-au/laravel-client
robertmarney/lara-hierarchial-collections
simonschaufi/rule-doc-generator
emissaoja/emissaoja
blackbricksoftware/gravityforms-civicrm-form-processor
al-rahabi/fancy-crud
jinas/dhivatar-component
mltstephane/laravel-quality
bernskiold/laravel-talentlms
bernskioldmedia/laravel-form-architect