Skip to main content

Code Editor

An interactive text box to edit and test code.

Use the Code Editor to allow users to validate JSON or interact with code, such as Ruby, HTML, and Markdown.

Use Code Editor to Visualize Data

You can leverage the Code Editor component combined with a Chart component in order to have an interactive tool to visualize your data. In the Chart component, set the Chart Data to {{CodeEditor1.parsedValue}} and you'll be able to visualize the data as seen below:

Updating charts in realtime with code editor

Sample data in JSON

"city": "Toronto",
"population": 2930000,
"country": "Canada"
"city": "New York",
"population": 8419000,
"country": "USA"
"city": "Vancouver",
"population": 675218,
"country": "Canada"
"city": "San Francisco",
"population": 874961,
"country": "USA"

Displaying HTML Templates

You can leverage the Code Editor in combination with an iFrame Component to validate, edit, and display HTML code. Be sure to set the Source Doc parameter to the parsedValue of your Code Editor.

Using an iFrame to display HTML from a code editor

Displaying read only structured data

By setting a code editor to read only mode, you're able to view code, for example config files, and validate JSON.

Set code editor to read only

Use custom validation rules

Use the .test() method to evaluate an expression to detect the validity of a user's code. For example, the following regex pattern could be used to ensure that a markdown image is properly formatted (It is assumed that the Language Property of the Code Editor is set to Markdown):


Validate markdown images using the code editor

Code Editor Properties

Component Properties

Code Editor PropertyDescription
LabelSets a label text for the code editor
LanguageSelect from HJSON (human readable), JSON (strict), Ruby HTML Template (ERB), HTML, or Markdown
Default ValueValues to be shown in the code editor component by default
Newline CharacterDetermines the newline character used in the code editor and its output
Line WrappingWhether code editor should scroll or wrap for long lines, values are a boolean
Loading AnimationWhether code editor should show loading animation when a dependent API is running, values are a boolean
VisibleControls the visibility of the component, values are a boolean
Read onlyPrevents editing, values are a boolean
RequiredMakes input to the component mandatory, values are a boolean
Custom Validation RuleCustom rule that must evaluate to a boolean

Reference Properties

Properties can be accessed from other frontend components and backend APIs by adding the name of the Code Editor component, and dot referencing the property. For a Code Editor named CodeEditor1:

CodeEditor1.parsedValueAccess the parsed value of the code block as an array in the Code Editor
CodeEditor1.stringValueAccess the string value of the code block in the Code Editor
CodeEditor1.isValidValidates the code block, returns a boolean


The following events are triggered by user interactions with Code Editor components. Use event handlers to trigger actions in response to user events.

onChangeTriggers an action when the code block is changed