Search by

nystudio107 / craft-code-editor

khalwat

Provides a code editor field with Twig & Craft API autocomplete

Package info

github.com/nystudio107/craft-code-editor

Documentation

Type:yii2-extension

pkg:composer/nystudio107/craft-code-editor

Security

Advisories: 0

Aikido package health analysis

Transparency log

Fund package maintenance!

khalwat

Statistics

Installs: 1 644 993

Dependents: 21

Suggesters: 1

Stars: 6

Open Issues: 1

1.0.30 2026-07-31 02:40 UTC

Requires

Requires (Dev)

Suggests

None

Provides

None

Conflicts

None

Replaces

None

MIT 98fc4544719595b5a5bbd21a8baa9c449e7d5ba9

twigjavascriptcsscmsmarkdowncodeeditorCraftcraftcmsMonaco

Published on Packagist.org on 2026-07-31 02:40 UTC

This package is auto-updated.

Last update: 2026-10-05 01:08:16 UTC

README

Scrutinizer Code Quality Code Coverage Build Status Code Intelligence Status

Code Editor for Craft CMS 3.x, 4.x & 5.0

Provides a code editor field with Twig & Craft API autocomplete

Demo

Requirements

Code Editor requires Craft CMS 3.x, 4.x or 5.x.

Installation

To install Code Editor, follow these steps:

  1. Open your terminal and go to your Craft project:

     cd /path/to/project

  2. Then tell Composer to require the package:

     composer require nystudio107/craft-code-editor

About Code Editor

Code Editor provides a full-featured code editor with syntax highlighting via the powerful Monaco Editor (the same editor that is the basis for VS Code).

It also can handle hundreds of other code languages, such as JavaScript, TypeScript, CSS, Markdown, and a whole lot more.

Code Editor provides full autocompletion for Twig filters/functions/tags, and the full Craft CMS API, including installed plugins:

Autocomplete

And it adds hover documentation when you hover the cursor over an expression:

Hovers

You can also add your own custom Autocompletes, and customize the behavior of the editor.

Code Editor also provides a Yii2 Validator for Twig templates and object templates.

If instead you need a Craft CMS field, use the Code Field plugin, which provides Code Editor wrapped in a field type.

Using Code Editor

Once you've added the nystudio107/craft-code-editor package to your plugin, module, or project, no further setup is needed. This is because it operates as an auto-bootstrapping Yii2 Module.

Code Editor is not a Craft CMS plugin, rather a package to be utilized by a plugin, module, or project.

It can be very easy to add to an existing project, as you can see from the Preparse field pull request that adds it the Preparse plugin.

In the Craft CP

Code Editor works just like the Craft CMS forms macros that should be familiar to plugin and module developers.

Import Macros

Simply import the macros:

{% import "codeeditor/codeEditor" as codeEditor %}

Multi-line Editor

Then to create a textarea multi-line editor, do the following:

{{ codeEditor.textarea({
    id: "myCodeEditor",
    name: "myCodeEditor",
    value: textAreaText,
}) }}

...where textAreaText is a variable containing the initial text that should be in the editor field. This will create the Twig editor.

To create a textareaField multi-line editor, do the following:

{{ codeEditor.textareaField({
    label: "Twig Editor"|t,
    instructions: "Enter any Twig code below, with full API autocompletion."|t,
    id: "myCodeEditor",
    name: "myCodeEditor",
    value: textAreaText,
}) }}

...where textAreaText is a variable containing the initial text that should be in the editor field. This will create the label and instructions, along with the Twig editor.

Single-line Editor

Then to create a text single-line editor, do the following:

{{ codeEditor.text({
    id: "myCodeEditor",
    name: "myCodeEditor",
    value: text,
}) }}

...where text is a variable containing the initial text that should be in the editor field. This will create the Twig editor that is restricted to a single line, for simple Twig expressions.

To create a textField single-line editor, do the following:

{{ codeEditor.textField({
    label: "Twig Editor"|t,
    instructions: "Enter any Twig code below, with full API autocompletion."|t,
    id: "myCodeEditor",
    name: "myCodeEditor",
    value: text,
}) }}

...where text is a variable containing the initial text that should be in the editor field. This will create the label and instructions, along with the Twig editor that is restricted to a single line, for simple Twig expressions.

Regardless of the macro used, an Asset Bundle containing the necessary CSS & JavaScript for the editor to function will be included, and the editor initialized.

In Frontend Templates

Code Editor also works in frontend templates, but you can disable it via the allowTemplateAccess config setting. This is enabled by default.

There is also a allowFrontendAccess which is disabled by default. This allows access to the codeeditor/autocomplete/index endpoint for Twig & Craft API autocompletes. This is disabled by default, so if you want these completions on the frontend, you'll need to specifically enable it.

Do so by copying the config.php file to the Craft CMS config/ directory, renaming the file to codeeditor.php in the process, then set the allowFrontendAccess setting to true:

return [
    // Whether to allow anonymous access be allowed to the codeeditor/autocomplete/index endpoint
    'allowFrontendAccess' => true,
    // Whether to allow frontend templates access to the `codeeditor/codeEditor.twig` Twig template
    'allowTemplateAccess' => true,
    // The default autocompletes to use for the default `CodeEditor` field type
    'defaultCodeEditorAutocompletes' => [
        CraftApiAutocomplete::class,
        TwigLanguageAutocomplete::class,
        SectionShorthandFieldsAutocomplete::class,
    ]
];

Then import the macros:

{% import "codeeditor/codeEditor" as codeEditor %}

Create your own