What is a Code input?

Last modified: July 3rd, 2025

A Code input is an editing interface for code or mono-spaced plain text. You can use this input in the Data Editor, Content Editor, or Visual Editor to edit structured data in data files or front matter.

There is only one type of Code input:

  • Code

Code input types#

Code#

The Code input provides an editing interface for code or mono-spaced plain text content.

You can edit the value of a Code input by typing in the code area.

Code input appearance and behavior#

You can customize the label, comment, documentation link, and context box for all inputs regardless of type.

A screenshot of the Code Input in the Data Editor with a Context Box underneath the code area.

Depending on how your developer configured the input, your Code input may have a different height for the code area, tab size, theme color, gutter visibility, or syntax highlighting.

A screenshot of the Code Input when configured to show a single line of text.

Input validation#

Your Code input may have input validation, which requires the input value to meet predefined criteria before you can save your changes. CloudCannon will warn you if your input value is invalid and provide directions on how to fix it.

CloudCannon will show a red * next to the name of your Code input if a value is required.

A screenshot of the Code input in the Data Editor shows that no value is causing an input validation error.

If you enter a value under the minimum or over the maximum character count, CloudCannon will display an error message in red text under the input field.

If your developer has configured a pattern for your input value, CloudCannon will warn you when the value does not match the pattern. CloudCannon will show any error messages underneath the code area in red.

For more information on configuration options, valid input values, and unconfigured input behavior, please read our developer documentation on configuring a Code input .

Misconfigured Code inputs#

You will see an orange warning box if your Code input is misconfigured.

A screenshot of a misconfigured Code input in the Data Editor shows an orange warning box.

Code inputs are misconfigured if:

  • The value is not a string.

For more information on how to fix a misconfigured Code input, please read our developer documentation on configuring a Code input.

Open in a new tab