---
title: Use the Code Editor
description: Use the Telegraf Controller Code Editor to upload, write, or edit raw Telegraf configuration TOML.
url: https://docs.influxdata.com/telegraf/controller/configs/ui/code-editor/
estimated_tokens: 1029
publisher: InfluxData
canonical: https://docs.influxdata.com/telegraf/controller/configs/ui/code-editor/
date: '2026-08-25T08:20:28-06:00'
lastmod: '2026-08-25T08:20:28-06:00'
---

Use the Telegraf Controller **Code Editor** to upload, write, or edit raw
Telegraf configuration TOML.

<img width="948" src="/img/telegraf/controller-code-editor.png" alt="Telegraf Controller Code Editor">

The Code Editor is the default view when managing a configuration. If it is not
displayed, click the **Code Editor** tab.

To expand the editor to fill your browser window while you work, use[focus mode](/telegraf/controller/configs/ui/#focus-mode).

> [!Important]
> #### Switching from the Code Editor to the Telegraf Builder
>
> Switching from the Code Editor to the Telegraf Builder will reformat the TOML.
> When reformatting, Telegraf Builder does **not** preserve the following:
>
> * Comments
> * Indentation
> * Plugin Order

## Upload TOML

To upload a Telegraf configuration file to Telegraf Controller, click**Upload files** to open a file selection dialogue box or drag and drop your
configuration file into the Code Editor.

Telegraf Controller supports TOML-formatted files with the following extensions:

* `.toml`
* `.conf`
* `.txt`

> [!Important]
> Uploaded configuration files fully replace any existing configuration TOML.

## Manually write or edit TOML

The Code Editor is a feature-rich, browser-based editor that lets you write
code using keyboard shortcuts similar to those in popular editors and IDEs.

### Keymaps

The Code Editor uses CodeMirror’s default keymaps.
The following bindings come from the reference keymaps.

* `ArrowLeft`: Move left one character (Shift selects)
* `ArrowRight`: Move right one character (Shift selects)
* `ArrowUp`: Move up one line (Shift selects)
* `ArrowDown`: Move down one line (Shift selects)
* `Ctrl+ArrowLeft`: Move left by word group (Shift selects)
* `Ctrl+ArrowRight`: Move right by word group (Shift selects)
* `Alt+ArrowLeft`: Move left by syntax unit (Shift selects)
* `Alt+ArrowRight`: Move right by syntax unit (Shift selects)
* `⌘←` (macOS only): Move to line start (Shift selects)
* `⌘→` (macOS only): Move to line end (Shift selects)
* `Alt+ArrowUp`: Move line up
* `Alt+ArrowDown`: Move line down
* `Shift+Alt+ArrowUp`: Copy line up
* `Shift+Alt+ArrowDown`: Copy line down
* `Ctrl+Alt+ArrowUp`: Add cursor above
* `Ctrl+Alt+ArrowDown`: Add cursor below
* `⌘↑` (macOS only) or `Ctrl+Home`: Move to document start (Shift selects)
* `⌘↓` (macOS only) or `Ctrl+End`: Move to document end (Shift selects)
* `⌃↑` (macOS only) or `PageUp`: Page up (Shift selects)
* `⌃↓` (macOS only) or `PageDown`: Page down (Shift selects)
* `Home`: Move to line boundary backward (Shift selects)
* `End`: Move to line boundary forward (Shift selects)
* `Enter` and `Shift+Enter`: Insert newline and indent
* `Ctrl+Enter`: Insert blank line
* `Ctrl+A`: Select all
* `Alt+L`: Select line
* `Ctrl+I`: Select parent syntax
* `Esc`: Simplify selection
* `Ctrl+[`: Indent less
* `Ctrl+]`: Indent more
* `Shift+Ctrl+K`: Delete line
* `Shift+Ctrl+&bsol;`: Jump to matching bracket
* `Ctrl+/`: Toggle line comment
* `Shift+Alt+A`: Toggle block comment
* `Backspace`: Delete character backward
* `Delete`: Delete character forward
* `Ctrl+Backspace`: Delete word group backward
* `Ctrl+Delete`: Delete word group forward
* `⌘⌫` (macOS only): Delete to line start
* `⌘ fn⌫` (macOS only): Delete to line end

### Value substitution syntax highlighting

The Telegraf Controller Code Editor automatically applies special syntax
highlighting to substituted values (parameters, constants, environment
variables, and secrets) in your configuration TOML to make them more visible.

For [global constants](/telegraf/controller/configs/constants/), the editor
also provides autocomplete: type `::{` and the editor suggests defined
constant names. References to constants that are not defined are flagged
while you edit.

For more information about substituting values, see[Substitute values in configurations](/telegraf/controller/configs/substitute-values/).

#### Related

* [Substitute values in configurations](/telegraf/controller/configs/substitute-values/)
* [Manage global constants](/telegraf/controller/configs/constants/)