PHPackages                             swissup/module-codemirror - 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. swissup/module-codemirror

ActiveMagento2-module

swissup/module-codemirror
=========================

Versatile text editor implemented in JavaScript for the browser.

1.1.20(5mo ago)9407.7k—2.7%21MITJavaScript

Since Nov 19Pushed 5mo ago6 watchersCompare

[ Source](https://github.com/swissup/module-codemirror)[ Packagist](https://packagist.org/packages/swissup/module-codemirror)[ RSS](/packages/swissup-module-codemirror/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (24)Used By (1)

CodeMirror
==========

[](#codemirror)

CodeMirror - is a Magento 2 module that integrates [CodeMirror - in-browser code editor](https://codemirror.net/) into Magento 2.

Current version of module has implementations for Magento Admin only:

- form element for UI components;
- frontend models for Magento System Config.

### Installation

[](#installation)

```
composer require swissup/module-codemirror
bin/magento setup:upgrade
```

### Usage

[](#usage)

#### UI Component

[](#ui-component)

Example:

```

    ...

        ...

                    string
                    Template Content
                    textarea
                    Swissup_Codemirror/js/form/element/editor

                        htmlmixed

                        true

                    string
                    Template Styles
                    textarea
                    Swissup_Codemirror/js/form/element/editor

                        css

```

Use option `editorConfig` to pass additional paramenets to editor. `mode` can be either string or an object. Check [CodeMirror Modes](https://codemirror.net/mode/) itself to find out more.

#### System Config

[](#system-config)

Example:

```

            ...

                General
                ...

                    CSS
                    Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Css

                    LESS
                    Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Less

                    SCSS
                    Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Scss

                    JS
                    Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Javascript

                    YAML
                    Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Yaml

                    YAML Frontmatter
                    Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Yamlfrontmatter

                    Label Text
                    Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Htmlmixed

                    Label Inline Styles
                    Swissup\Codemirror\Block\Adminhtml\System\Config\Form\Field\Inlinecss

```

There are 9 frontend models for system config:

- Swissup\\Codemirror\\Block\\Adminhtml\\System\\Config\\Form\\Field\\**Css**
- Swissup\\Codemirror\\Block\\Adminhtml\\System\\Config\\Form\\Field\\**Less**
- Swissup\\Codemirror\\Block\\Adminhtml\\System\\Config\\Form\\Field\\**Scss**
- Swissup\\Codemirror\\Block\\Adminhtml\\System\\Config\\Form\\Field\\**Javascript**
- Swissup\\Codemirror\\Block\\Adminhtml\\System\\Config\\Form\\Field\\**Htmlmixed**
- Swissup\\Codemirror\\Block\\Adminhtml\\System\\Config\\Form\\Field\\**Inlinecss**
- Swissup\\Codemirror\\Block\\Adminhtml\\System\\Config\\Form\\Field\\**Json**
- Swissup\\Codemirror\\Block\\Adminhtml\\System\\Config\\Form\\Field\\**Yaml**
- Swissup\\Codemirror\\Block\\Adminhtml\\System\\Config\\Form\\Field\\**Yamlfrontmatter**

###  Health Score

54

—

FairBetter than 97% of packages

Maintenance73

Regular maintenance activity

Popularity42

Moderate usage in the ecosystem

Community20

Small or concentrated contributor base

Maturity67

Established project with proven stability

 Bus Factor2

2 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 ~100 days

Recently: every ~219 days

Total

23

Last Release

152d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/33aea824c2948821ee367ad65fab9d355c71d86ce4ff021a40882a410f14ef94?d=identicon)[swissup](/maintainers/swissup)

![](https://www.gravatar.com/avatar/c180fc4c597c2307192d11e8b5ccac942d6b74fa079798a0e82b9eaf23584372?d=identicon)[Vitaliy Dmytruk](/maintainers/Vitaliy%20Dmytruk)

---

Top Contributors

[![vovayatsyuk](https://avatars.githubusercontent.com/u/306080?v=4)](https://github.com/vovayatsyuk "vovayatsyuk (46 commits)")[![tangar76](https://avatars.githubusercontent.com/u/13131588?v=4)](https://github.com/tangar76 "tangar76 (32 commits)")[![ci-swissuplabs](https://avatars.githubusercontent.com/u/40459861?v=4)](https://github.com/ci-swissuplabs "ci-swissuplabs (22 commits)")[![roma84](https://avatars.githubusercontent.com/u/2668851?v=4)](https://github.com/roma84 "roma84 (3 commits)")[![forfin](https://avatars.githubusercontent.com/u/7200907?v=4)](https://github.com/forfin "forfin (1 commits)")

---

Tags

codemirror-editormagento2

### Embed Badge

![Health badge](/badges/swissup-module-codemirror/health.svg)

```
[![Health](https://phpackages.com/badges/swissup-module-codemirror/health.svg)](https://phpackages.com/packages/swissup-module-codemirror)
```

PHPackages © 2026

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