PHPackages abdelhamiderrahmouni/filament-monaco-editor - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. abdelhamiderrahmouni/filament-monaco-editor ActiveLibrary[Utility & Helpers](/categories/utility) abdelhamiderrahmouni/filament-monaco-editor =========================================== A monaco editor form field for filamentphp. v0.2.5(2y ago)18182.2k↓23.6%3[5 PRs](https://github.com/abdelhamiderrahmouni/filament-monaco-editor/pulls)MITPHPPHP ^8.1CI passing Since Apr 12Pushed 2mo ago1 watchersCompare [ Source](https://github.com/abdelhamiderrahmouni/filament-monaco-editor)[ Packagist](https://packagist.org/packages/abdelhamiderrahmouni/filament-monaco-editor)[ Docs](https://github.com/abdelhamiderrahmouni/filament-monaco-editor)[ GitHub Sponsors](https://github.com/AbdelhamidErrahmouni)[ RSS](/packages/abdelhamiderrahmouni-filament-monaco-editor/feed)WikiDiscussions v3.x Synced 1mo ago READMEChangelog (5)Dependencies (13)Versions (15)Used By (0) A Monaco Editor form field for Filamentphp. =========================================== [](#a-monaco-editor-form-field-for-filamentphp) [![Latest Version on Packagist](https://camo.githubusercontent.com/064cf542a91de6a19734df88dc9e6259d6e9a1aeab69d7ddd9497a42a5d1d000/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f616264656c68616d696465727261686d6f756e692f66696c616d656e742d6d6f6e61636f2d656469746f722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/abdelhamiderrahmouni/filament-monaco-editor)[![GitHub Tests Action Status](https://camo.githubusercontent.com/fabd4ddde73453c5baa1cc6aafc619bf0e4259787b2b25051e68e93cc18e841c/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f616264656c68616d696465727261686d6f756e692f66696c616d656e742d6d6f6e61636f2d656469746f722f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/abdelhamiderrahmouni/filament-monaco-editor/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/0cdf7754e00f6cd6fe7327bc5efb787d04943b34cf30a6ac24b210c05247a819/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f616264656c68616d696465727261686d6f756e692f66696c616d656e742d6d6f6e61636f2d656469746f722f6669782d7068702d636f64652d7374796c696e672e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/abdelhamiderrahmouni/filament-monaco-editor/actions?query=workflow%3A%22Fix+PHP+code+styling%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/be1c77b3e1883e1f6e0c93c76c6cbc570e14e0ed599bd7f65e8f19a06021d92e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f616264656c68616d696465727261686d6f756e692f66696c616d656e742d6d6f6e61636f2d656469746f722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/abdelhamiderrahmouni/filament-monaco-editor) This package provides a Monaco editor field for [FilamentPHP](https://filamentphp.com/). Demo ---- [](#demo) Installation ------------ [](#installation) You can install the package via composer: ``` composer require abdelhamiderrahmouni/filament-monaco-editor ``` You can publish the config file with: ``` php artisan vendor:publish --tag="filament-monaco-editor-config" ``` Optionally, you can publish the views using ``` php artisan vendor:publish --tag="filament-monaco-editor-views" ``` This is the contents of the published config file: ``` return [ "general" => [ "enable-preview" => true, "show-full-screen-toggle" => true, "show-placeholder" => true, "placeholder-text" => "Your code here...", "show-loader" => true, "font-size" => "15px", "line-numbers-min-chars" => true, "automatic-layout" => true, "default-theme" => "blackboard" ], "themes" => [ "blackboard" => [ "base" => "vs-dark", "inherit" => true, "rules" => [ # long list of rules ... ], "colors" => [ "editor.foreground" => "#F8F8F8", "editor.background" => "#0C1021", "editor.selectionBackground" => "#253B76", "editor.lineHighlightBackground" => "#FFFFFF0F", "editorCursor.foreground" => "#FFFFFFA6", "editorWhitespace.foreground" => "#FFFFFF40" ] ] ], ]; ``` Usage ----- [](#usage) You can use this field with minimal configuration like this: ``` use AbdelhamidErrahmouni\FilamentMonacoEditor\MonacoEditor; MonacoEditor::make('content') ->language('php'), ``` You can change the theme of the editor by using the `theme` method: ``` ->theme('blackboard') # themes should be defined in the config file in the themes array ``` Add Scripts and Styles to preview's head element ``` ->previewHeadEndContent(""), ``` Add attributes to the preview's body element ``` ->previewBodyAttributes([ 'class' => 'bg-red-500', 'id' => 'preview-body' ]), ``` Add content to the start of the preview's body element ``` ->previewBodyStartContent(""), ``` Add content to the end of the preview's body element ``` ->previewBodyEndContent(""), ``` You can Disable preview code functionality by method or in the config ``` ->enablePreview(false) # or ->disablePreview() ``` You can show/hide the full screen button by method or in the config ``` ->showFullScreenButton(false) # or ->hideFullScreenButton() ``` Show/Hide The loader ``` ->showLoader(false) # or ->hideLoader() ``` Show/Hide the placeholder ``` ->showPlaceholder(false) # or ->hidePlaceholder() ``` Customize placeholder's text ``` ->placeholderText('Your placeholder text') ``` change the font-size of the editor ``` ->fontSize('14px') ``` Customization ------------- [](#customization) You can use your own theme by customizing the themes array in `filament-monaco-editor.php` config file: ``` "themes" => [ "themeName" => [ "base" => "vs-dark|vs-light", "inherit" => true|false, "rules" => [ //... your rules ], "colors" => [ // your colors, the following are an example... "editor.foreground" => "#F8F8F8", "editor.background" => "#0C1021", "editor.selectionBackground" => "#253B76", "editor.lineHighlightBackground" => "#FFFFFF0F", "editorCursor.foreground" => "#FFFFFFA6", "editorWhitespace.foreground" => "#FFFFFF40" ] ] ], ``` Testing ------- [](#testing) ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details. Security Vulnerabilities ------------------------ [](#security-vulnerabilities) Please review [our security policy](../../security/policy) on how to report security vulnerabilities. Credits ------- [](#credits) Thanks to [PinesUI](https://devdojo.com/pines/docs/monaco-editor) for the Monaco editor component and the [DevDojo](https://devdojo.com/) team for their dedication and contribution to open source projects. - [Abdelhamid Errahmouni](https://github.com/abdelhamiderrahmouni) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 44 — FairBetter than 92% of packages Maintenance58 Moderate activity, may be stable Popularity42 Moderate usage in the ecosystem Community20 Small or concentrated contributor base Maturity47 Maturing project, gaining track record Bus Factor3 3 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~71 days Recently: every ~158 days Total 10 Last Release 127d ago Major Versions v0.2.5 → v3.x-dev2026-01-12 ### Community Maintainers ![](https://www.gravatar.com/avatar/745a0575996f5a3dcb6b8e177e5f37e610d83906028a1e99aa2ec3213a281027?d=identicon)[abdelhamiderrahmouni](/maintainers/abdelhamiderrahmouni) --- Top Contributors [![awcodes](https://avatars.githubusercontent.com/u/3596800?v=4)](https://github.com/awcodes "awcodes (63 commits)")[![abdelhamiderrahmouni](https://avatars.githubusercontent.com/u/26693672?v=4)](https://github.com/abdelhamiderrahmouni "abdelhamiderrahmouni (30 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (26 commits)")[![zepfietje](https://avatars.githubusercontent.com/u/44533235?v=4)](https://github.com/zepfietje "zepfietje (22 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (20 commits)")[![ryangjchandler](https://avatars.githubusercontent.com/u/41837763?v=4)](https://github.com/ryangjchandler "ryangjchandler (7 commits)")[![saade](https://avatars.githubusercontent.com/u/14329460?v=4)](https://github.com/saade "saade (4 commits)")[![maartenpaauw](https://avatars.githubusercontent.com/u/4550875?v=4)](https://github.com/maartenpaauw "maartenpaauw (3 commits)")[![emmadesilva](https://avatars.githubusercontent.com/u/95144705?v=4)](https://github.com/emmadesilva "emmadesilva (2 commits)")[![AlexisSerneels](https://avatars.githubusercontent.com/u/287688?v=4)](https://github.com/AlexisSerneels "AlexisSerneels (2 commits)")[![199ocero](https://avatars.githubusercontent.com/u/57591686?v=4)](https://github.com/199ocero "199ocero (1 commits)")[![lucasgiovanny](https://avatars.githubusercontent.com/u/4853801?v=4)](https://github.com/lucasgiovanny "lucasgiovanny (1 commits)")[![darmshot](https://avatars.githubusercontent.com/u/29179227?v=4)](https://github.com/darmshot "darmshot (1 commits)")[![cheesegrits](https://avatars.githubusercontent.com/u/934456?v=4)](https://github.com/cheesegrits "cheesegrits (1 commits)")[![atmonshi](https://avatars.githubusercontent.com/u/1952412?v=4)](https://github.com/atmonshi "atmonshi (1 commits)")[![StyleCIBot](https://avatars.githubusercontent.com/u/11048387?v=4)](https://github.com/StyleCIBot "StyleCIBot (1 commits)")[![Z3d0X](https://avatars.githubusercontent.com/u/75579178?v=4)](https://github.com/Z3d0X "Z3d0X (1 commits)")[![ArielMejiaDev](https://avatars.githubusercontent.com/u/31971074?v=4)](https://github.com/ArielMejiaDev "ArielMejiaDev (1 commits)") --- Tags filament-pluginfilamentphplaravelphplaravelcode editorfilamentphpMonacoAbdelhamid Errahmounifilament monaco code editorfilament monaco editormonaco editor ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/abdelhamiderrahmouni-filament-monaco-editor/health.svg) ``` [![Health](https://phpackages.com/badges/abdelhamiderrahmouni-filament-monaco-editor/health.svg)](https://phpackages.com/packages/abdelhamiderrahmouni-filament-monaco-editor) ``` ### Alternatives [dotswan/filament-map-picker Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications. 124139.3k2](/packages/dotswan-filament-map-picker)[defstudio/filament-searchable-input A searchable autocomplete input for Filament forms 3212.4k](/packages/defstudio-filament-searchable-input)[jibaymcs/filament-tour Bring the power of DriverJs to your Filament panels and start a tour ! 12247.8k](/packages/jibaymcs-filament-tour)[asosick/filament-layout-manager Allow users to create & customize their own FilamentPHP pages composed of Livewire components 5718.8k2](/packages/asosick-filament-layout-manager)[tapp/filament-google-autocomplete-field Filament plugin that provides a Google Autocomplete field 3098.1k](/packages/tapp-filament-google-autocomplete-field)[jiten14/jitone-ai jitone-ai is a powerful FilamentPHP plugin that integrates AI-powered features directly into your Filament forms. 213.1k](/packages/jiten14-jitone-ai) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)