---
title: 'Grav Editor Plugin'
url: 'https://www.twelvetone.tv/docs/developer-tools/grav-plugins/grav-editor-plugin'
markdown: 'https://www.twelvetone.tv/docs/developer-tools/grav-plugins/grav-editor-plugin.md'
date: '2026-09-25'
description: 'Create and edit your Grav Twig, CSS, Javascript, and PHP files right from your browser. Featur'
taxonomy:
  category:
    - docs
  devtype:
    - mit
---

[](#)  [ Home ](https://www.twelvetone.tv/docs/)     [ Developer Tools ](https://www.twelvetone.tv/docs/developer-tools)     [ Grav Plugins ](https://www.twelvetone.tv/docs/developer-tools/grav-plugins)      Grav Editor Plugin    

# Grav Editor Plugin

This product is in active development and has been released under the [MIT license](https://opensource.org/licenses/MIT).

Create and edit your Grav Twig, CSS, Javascript, and PHP files right from your browser.

# Features

#### Table of Contents

- [Features](#features)
    - [User](#user)
    - [Developer](#developer)
- [Usage](#usage)
- [File Operations](#file-operations)
- [File List](#file-list)
- [Supported Languages](#supported-languages)
    - [Twig](#twig)
    - [PHP](#php)
    - [CSS/SCSS/SASS](#css-scss-sass)
    - [Javascript](#javascript)
    - [Markdown](#markdown)
    - [YAML](#yaml)
- [Plugin Options](#plugin-options)
- [TODO](#todo)

## User

- Edit any Twig, CSS, Javascript, Markdown, YAML, or PHP file.
- Secure. File access is restricted to plugins, themes and Grav system folders.
- Fullscreen mode.
- Syntax highlighting.
- Common file operations.

## Developer

- Extensible file actions architecture.
- Extensible file language architecture.

# Usage

Select a shortcut link from the admin sidebar *Edit* menu to view a filterable list of files for the selected file type.

![](https://www.twelvetone.tv/docs/user/pages/03.developer-tools/06.grav-plugins/03.grav-editor-plugin/edit%20menu.png)

The files must be located in the `user/themes`, `user/plugins` or `system` folders; They must have read/write access for your webserver's account.

Click on a file to open an editor.

![](https://www.twelvetone.tv/docs/user/pages/03.developer-tools/06.grav-plugins/03.grav-editor-plugin/editor%20list.png)

![](https://www.twelvetone.tv/docs/user/pages/03.developer-tools/06.grav-plugins/03.grav-editor-plugin/file%20editor.png)

# File Operations

- Move
- Delete
- Rename
- Save
- Copy
- Create
- Fullscreen

Any operation that modifies the file path will cause a page refresh to the new path. Deleting a file will return to the file list.

# File List

The editor will search *system*, *user/plugins*, and *user/themes* for files having an extension of the specified language type.

# Supported Languages

## Twig

## PHP

## CSS/SCSS/SASS

## Javascript

## Markdown

## YAML

# Plugin Options

Enabling a language will add items to the Navigation/Edit dropdown, publish the editing URL, and allow edits to be posted for the indicated file type. ![](https://www.twelvetone.tv/docs/user/pages/03.developer-tools/06.grav-plugins/03.grav-editor-plugin/plugin%20options.png)

# TODO

todo: Regenerate SASS, etc. 

todo: Invalidate caches. 

todo: Better security. 

todo: Change file permissions 

todo: File permissions for new items 

todo: Remove pages parent directory 

 [ ](https://www.twelvetone.tv/docs/developer-tools/grav-plugins/grav-admin-power-tools) [](https://www.twelvetone.tv/docs/developer-tools/grav-plugins/grav-quick-save-plugin)

---

## Navigation

- Parent: [Grav Plugins](https://www.twelvetone.tv/docs/developer-tools/grav-plugins.md)
- Previous: [Grav Admin Power Tools](https://www.twelvetone.tv/docs/developer-tools/grav-plugins/grav-admin-power-tools.md)
- Next: [Grav Quick-Save Plugin](https://www.twelvetone.tv/docs/developer-tools/grav-plugins/grav-quick-save-plugin.md)