PHPackages                             timo-de-winter/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. timo-de-winter/filament-monaco-editor

ActiveLibrary[Utility & Helpers](/categories/utility)

timo-de-winter/filament-monaco-editor
=====================================

A package to implement the monaco editor into a filament project

v2.0.1(8mo ago)1351[4 issues](https://github.com/timo-de-winter/filament-monaco-editor/issues)[4 PRs](https://github.com/timo-de-winter/filament-monaco-editor/pulls)MITPHPPHP ^8.3CI passing

Since May 21Pushed 3d ago1 watchersCompare

[ Source](https://github.com/timo-de-winter/filament-monaco-editor)[ Packagist](https://packagist.org/packages/timo-de-winter/filament-monaco-editor)[ Docs](https://github.com/timo-de-winter/filament-monaco-editor)[ GitHub Sponsors](https://github.com/timo-de-winter)[ RSS](/packages/timo-de-winter-filament-monaco-editor/feed)WikiDiscussions v2.x Synced 3w ago

READMEChangelog (10)Dependencies (15)Versions (22)Used By (0)

Filament Monaco Editor
======================

[](#filament-monaco-editor)

[![Latest Version on Packagist](https://camo.githubusercontent.com/5724dea70fcd326b4c16902a6ef04cab3c559620e2e1a9930b4cf6ffa74462ff/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f74696d6f2d64652d77696e7465722f66696c616d656e742d6d6f6e61636f2d656469746f722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/timo-de-winter/filament-monaco-editor)[![GitHub Tests Action Status](https://camo.githubusercontent.com/ff4920669fbbd3fe2ec35991efaafcf1aae533c473e5ed7393c5ce0d68f63fc5/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f74696d6f2d64652d77696e7465722f66696c616d656e742d6d6f6e61636f2d656469746f722f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/timo-de-winter/filament-monaco-editor/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/04fe03b7aae07f6ee8e68f0c281783272842ab61e3f3650100ed19292588367c/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f74696d6f2d64652d77696e7465722f66696c616d656e742d6d6f6e61636f2d656469746f722f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/timo-de-winter/filament-monaco-editor/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/a1e2ea6a16ebf2917eeb3defac5b8c2320d1d18a3cf9840a5515594f22451266/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f74696d6f2d64652d77696e7465722f66696c616d656e742d6d6f6e61636f2d656469746f722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/timo-de-winter/filament-monaco-editor)

A package to implement the monaco editor into a filament project. Including a morphable model to relate code to any model. Obviously, you can use only the editor without publishing and running the migrations for the morphable model.

Installation
------------

[](#installation)

You can install the package via composer:

```
composer require timo-de-winter/filament-monaco-editor
```

You can publish and run the migrations with:

```
php artisan vendor:publish --tag="filament-monaco-editor-migrations"
php artisan migrate
```

You can publish the config file with:

```
php artisan vendor:publish --tag="filament-monaco-editor-config"
```

This is the contents of the published config file:

```
return [
    'table' => 'editor_codes',
];
```

Optionally, you can publish the views using

```
php artisan vendor:publish --tag="filament-monaco-editor-views"
```

Usage
-----

[](#usage)

You can use the monaco editor directly in a form.

```
public static function form(Form $form): Form
{
    return $form->schema([
        \TimoDeWinter\FilamentMonacoEditor\Filament\Forms\Components\MonacoEditor::make('code')
            ->language('php')
            ->height('500px'),
    ]);
}
```

### Code compilation

[](#code-compilation)

This package also comes with features to compile code. At this moment we support compilation of the following:

- SCSS -> CSS

```
\TimoDeWinter\FilamentMonacoEditor\Facades\FilamentMonacoEditor::compileScssToCss('your-css');
```

### Use as action

[](#use-as-action)

The package also comes with an action that you can add to your resources or pages.

In order to do this you should first add the following interface and trait to the model you want to use this on.

```
class YourModel extends Model implements \TimoDeWinter\FilamentMonacoEditor\Contracts\HasMonacoEditor
{
    use \TimoDeWinter\FilamentMonacoEditor\Concerns\InteractsWithMonacoEditor;
}
```

After doing that you can use an action to open the editor.

```
protected function getHeaderActions(): array
{
    return [
        \TimoDeWinter\FilamentMonacoEditor\Filament\Actions\MonacoAction::make()
            ->language('php'),
    ];
}

// Table action
->actions([
    MonacoAction::make()
        ->language('php'),
])
```

By default, the code will be stored in the database under a specific collection. When not explicitly setting a collection we fall back to the language you use for the editor. However, you can explicitly set the collection as well (for example when you want to add the same language twice on the same model):

```
protected function getHeaderActions(): array
{
    return [
        \TimoDeWinter\FilamentMonacoEditor\Filament\Actions\MonacoAction::make()
            ->collection('client-side-code')
            ->label('Client side code')
            ->language('javascript'),
        \TimoDeWinter\FilamentMonacoEditor\Filament\Actions\MonacoAction::make()
            ->collection('server-side-code')
            ->label('Server side code')
            ->language('php'),
    ];
}
```

#### Using a grid within the actions

[](#using-a-grid-within-the-actions)

It is possible to use a (codepen like) grid in your actions by defining the collection as an array where key=collection and value=language.

```
protected function getHeaderActions(): array
{
    return [
        \TimoDeWinter\FilamentMonacoEditor\Filament\Actions\MonacoAction::make()
            ->collection([
                'client-side-code' => 'javascript',
                'server-side-code' => 'php',
            ]),
    ];
}
```

If you want to set a default state for the different collections in the grid-style action you can do so like this:

```
protected function getHeaderActions(): array
{
    return [
        \TimoDeWinter\FilamentMonacoEditor\Filament\Actions\MonacoAction::make()
            ->collection([
                'client-side-code' => 'javascript',
                'server-side-code' => 'php',
            ])
            ->default([
                'client-side-code' => 'Very cool code',
                'server-side-code' => 'Cool PHP code',
            ]),
    ];
}
```

Testing
-------

[](#testing)

```
composer test
```

Credits
-------

[](#credits)

- [Timo de Winter](https://github.com/timo-de-winter)
- [All Contributors](../../contributors)

License
-------

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

###  Health Score

40

—

FairBetter than 86% of packages

Maintenance63

Regular maintenance activity

Popularity14

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity61

Established project with proven stability

 Bus Factor1

Top contributor holds 84.4% 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 ~14 days

Recently: every ~21 days

Total

17

Last Release

172d ago

Major Versions

v1.x-dev → v2.0.02025-10-23

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/77292763?v=4)[timodw-nl](/maintainers/timodw-nl)[@timodw-nl](https://github.com/timodw-nl)

---

Top Contributors

[![timo-de-winter](https://avatars.githubusercontent.com/u/52080998?v=4)](https://github.com/timo-de-winter "timo-de-winter (38 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (5 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (2 commits)")

---

Tags

filamentfilamentphplaravelmonaco-editorlaravelfilament monaco editorTimoDeWinter

###  Code Quality

TestsPest

Static AnalysisPHPStan

Code StyleLaravel Pint

### Embed Badge

![Health badge](/badges/timo-de-winter-filament-monaco-editor/health.svg)

```
[![Health](https://phpackages.com/badges/timo-de-winter-filament-monaco-editor/health.svg)](https://phpackages.com/packages/timo-de-winter-filament-monaco-editor)
```

###  Alternatives

[rawilk/profile-filament-plugin

Profile & MFA starter kit for filament.

3913.7k](/packages/rawilk-profile-filament-plugin)[dotswan/filament-map-picker

Easily pick and retrieve geo-coordinates using a map-based interface in your Filament applications.

128173.7k3](/packages/dotswan-filament-map-picker)[stephenjude/filament-jetstream

A Laravel starter kit built with Filament inspired by Jetstream.

17758.9k2](/packages/stephenjude-filament-jetstream)[stephenjude/filament-debugger

About

104150.5k2](/packages/stephenjude-filament-debugger)[creagia/filament-code-field

A Filamentphp input field to edit or view code data.

57301.3k3](/packages/creagia-filament-code-field)[hydrat/filament-table-layout-toggle

Filament plugin adding a toggle button to tables, allowing user to switch between Grid and Table layouts.

63105.4k2](/packages/hydrat-filament-table-layout-toggle)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)