PHPackages chrisreedio/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. chrisreedio/filament-monaco-editor ActiveLibrary[Utility & Helpers](/categories/utility) chrisreedio/filament-monaco-editor ================================== This is my package filament-monaco-editor 5.x-dev(3mo ago)027[1 PRs](https://github.com/chrisreedio/filament-monaco-editor/pulls)MITPHPPHP ^8.2CI passing Since Apr 16Pushed 1mo agoCompare [ Source](https://github.com/chrisreedio/filament-monaco-editor)[ Packagist](https://packagist.org/packages/chrisreedio/filament-monaco-editor)[ Docs](https://github.com/chrisreedio/filament-monaco-editor)[ GitHub Sponsors](https://github.com/chrisreedio)[ RSS](/packages/chrisreedio-filament-monaco-editor/feed)WikiDiscussions 5.x Synced 1w ago READMEChangelog (1)Dependencies (12)Versions (3)Used By (0) Filament Monaco Code Editor =========================== [](#filament-monaco-code-editor) Filament v5 form field integration for [Monaco Editor](https://github.com/microsoft/monaco-editor), including dedicated Blade syntax highlighting. [![Latest Version on Packagist](https://camo.githubusercontent.com/9a68972a389f582c5b5405a9e5a24e79fd00681b9e21c87ee538bb6ffc192bda/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f636872697372656564696f2f66696c616d656e742d6d6f6e61636f2d656469746f722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/chrisreedio/filament-monaco-editor)[![GitHub Tests Action Status](https://camo.githubusercontent.com/b698106e1aa8c7073c93544dfc466c80d72d200bd6dca3e55091f3d4574645bf/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f636872697372656564696f2f66696c616d656e742d6d6f6e61636f2d656469746f722f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/chrisreedio/filament-monaco-editor/actions?query=workflow%3Arun-tests+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/83cac6ef90527850f16d5d18d6467f48fca5f3059b4bad8caeb945e2c124d192/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f636872697372656564696f2f66696c616d656e742d6d6f6e61636f2d656469746f722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/chrisreedio/filament-monaco-editor) Compatibility ------------- [](#compatibility) - PHP ^8.2 - Filament 5.x Installation ------------ [](#installation) ``` composer require chrisreedio/filament-monaco-editor ``` Run the package build to generate frontend assets: ``` cd vendor/chrisreedio/filament-monaco-editor npm install npm run build ``` Publish package config and views (optional): ``` php artisan vendor:publish --tag="filament-monaco-editor-config" php artisan vendor:publish --tag="filament-monaco-editor-views" php artisan filament:assets ``` Usage ----- [](#usage) Use the field directly in your form schema: ``` use ChrisReedIO\MonacoEditor\Forms\Components\MonacoCodeEditor; MonacoCodeEditor::make('template') ->language('blade') ->theme('vs-dark') ->height('24rem') ->options([ 'tabSize' => 2, 'insertSpaces' => true, ]); ``` Blade, PHP, and custom heights: ``` MonacoCodeEditor::make('blade_view') ->language('blade') ->theme('vs-dark'); MonacoCodeEditor::make('php_code') ->language('php') ->theme('vs-light') ->minHeight(320) ->readonly(); ``` You can also use the package entrypoint facade for concise creation: ``` use MonacoEditor; MonacoEditor::blade('blade_view')->height('20rem'); MonacoEditor::php('php_payload')->readonly(); ``` ### Fluent API [](#fluent-api) - `language(string $language)` - `theme(string $theme)` - `minHeight(string|int $height)` / `height(string|int $height)` - `readonly(bool $condition = true)` - `options(array $options)` (merged into the final Monaco options) - `getConfig()` / `getMonacoConfig()` for Alpine payload Configuration ------------- [](#configuration) Publish and customize `config/monaco-editor.php`: ``` return [ 'default_language' => 'blade', 'default_theme' => 'vs-dark', 'default_min_height' => '16rem', 'defaults' => [ 'fontSize' => 14, 'lineNumbers' => 'on', 'scrollBeyondLastLine' => false, 'minimap' => ['enabled' => false], ], 'blade' => [ 'keywords' => [ 'if', 'elseif', 'else', 'endif', 'foreach', 'endforeach', 'for', 'endfor', 'while', 'endwhile', 'php', 'endphp', 'csrf', 'method', 'can', 'endcan', 'auth', 'guest', 'unless', 'endunless', ], 'directives' => [ 'if', 'elseif', 'else', 'endif', 'foreach', 'endforeach', 'section', 'endsection', ], 'patterns' => [ ['/\$[A-Za-z_][A-Za-z0-9_]*/', 'variable'], ], 'delimiters' => [ 'output' => ['{{', '}}'], 'raw' => ['{!!', '!!}'], 'comment' => ['{{--', '--}}'], ], ], ]; ``` Blade highlighting ------------------ [](#blade-highlighting) - `blade` language is registered only when `language('blade')` is used. - Tokens include output/raw/comment delimiters and directives (`@if`, `@foreach`, etc.). - You can add custom syntax patterns via `blade.patterns`. Build artifacts consumed by Filament ------------------------------------ [](#build-artifacts-consumed-by-filament) - `resources/dist/components/monaco-code-editor.js` - `resources/dist/monaco-code-editor.css` The package service provider wires these assets through Filament `Asset` registration and script data. Development ----------- [](#development) ``` npm run build composer test ``` Credits ------- [](#credits) - [Chris Reed](https://github.com/chrisreedio) - Inspired by the broader Monaco ecosystem License ------- [](#license) This package is released under the [MIT license](LICENSE.md). ### Health Score 36 — LowBetter than 79% of packages Maintenance88 Actively maintained with recent releases Popularity10 Limited adoption so far Community9 Small or concentrated contributor base Maturity33 Early-stage or recently created project Bus Factor1 Top contributor holds 83.3% of commits — single point of failure 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 ~6 days Total 2 Last Release 92d ago Major Versions v1.0.0-beta.1 → 5.x-dev2026-04-23 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/77644584?v=4)[Chris Reed](/maintainers/chrisreedio)[@chrisreedio](https://github.com/chrisreedio) --- Top Contributors [![chrisreedio](https://avatars.githubusercontent.com/u/77644584?v=4)](https://github.com/chrisreedio "chrisreedio (20 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (3 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (1 commits)") --- Tags laravelfilamentfilament-pluginfilamentphpchrisreediofilament monaco editor ### Code Quality TestsPest Static AnalysisPHPStan, Rector Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/chrisreedio-filament-monaco-editor/health.svg) ``` [![Health](https://phpackages.com/badges/chrisreedio-filament-monaco-editor/health.svg)](https://phpackages.com/packages/chrisreedio-filament-monaco-editor) ``` ### Alternatives [rawilk/profile-filament-plugin Profile & MFA starter kit for filament. 3914.8k](/packages/rawilk-profile-filament-plugin)[backstage/mails View logged mails and events in a beautiful Filament UI. 16121.5k](/packages/backstage-mails)[marcelweidum/filament-passkeys Use passkeys in your filamentphp app 6649.5k2](/packages/marcelweidum-filament-passkeys)[jibaymcs/filament-tour Bring the power of DriverJs to your Filament panels and start a tour ! 12453.6k](/packages/jibaymcs-filament-tour)[wsmallnews/filament-nestedset Filament nestedset tree builder powered by kalnoy/nestedset with Filament v4 and v5 support 197.8k19](/packages/wsmallnews-filament-nestedset)[tapp/filament-form-builder User facing form builder using Filament components 132.4k5](/packages/tapp-filament-form-builder) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)