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. [Utility & Helpers](/categories/utility) 4. / 5. swissup/module-codemirror ActiveMagento2-module[Utility & Helpers](/categories/utility) swissup/module-codemirror ========================= Versatile text editor implemented in JavaScript for the browser. 1.1.21(1mo ago)9438.0k↓37%21MITJavaScript Since Nov 19Pushed 1mo 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 2d ago READMEChangelogDependenciesVersions (25)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 59 — FairBetter than 98% of packages Maintenance90 Actively maintained with recent releases Popularity43 Moderate usage in the ecosystem Community22 Small or concentrated contributor base Maturity68 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 ~103 days Recently: every ~92 days Total 24 Last Release 46d 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 (35 commits)")[![ci-swissuplabs](https://avatars.githubusercontent.com/u/40459861?v=4)](https://github.com/ci-swissuplabs "ci-swissuplabs (23 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) ``` ### Alternatives [defstudio/filament-column-length-limiter Limit Filament columns length showing a tooltip when text exceeds 127.9k](/packages/defstudio-filament-column-length-limiter)[apeisa/process-redirects 151.1k](/packages/apeisa-process-redirects) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)