Skip to main content

Code Editor

This component is an interactive text box that allows you to edit and test code. It can be used to let users validate JSON or work with code in languages such as Ruby, HTML, Markdown, and more.

Code-Editor Properties

Component Properties

Code Editor PropertyDescription
Content
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
Appearance
Label styleChanges the style (font, size, color, etc.) of the code editor's label text. Configure styles in the Typography settings
Line wrappingWhether code editor should scroll or wrap for long lines, values are a boolean
Line numbersWhether code editor should number each line
Loading animationWhether code editor should show loading animation when a dependent API is running, values are a boolean
Layout
WidthControls the width of the component
HeightControls the height of the component
VisibleControls the visibility of the component, values are a boolean
Collapse when invisibleControls what happens when the component is invisible. When true, other components shift to fill its space; when false, it leaves a blank space. This has no effect in edit mode.
Interaction
Newline CharacterDetermines the newline character used in the code editor and its output
DisabledPrevents editing, values are a boolean
RequiredMakes input to the component mandatory, values are a boolean
ValidationCustom rule that must evaluate to a boolean

Settable Properties

Property Via Form / Via RunJSTypeExample Value
Current Value / valuestring,null"const count = 3;"

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:

PropertyDescription
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

Events

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

PropertyDescription
onChangeTriggers an action when the code block is changed

Example Usage:

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):

{{/(\!)(\[(?:.*)?\])(\(.*(\.(jpg|png|gif|tiff|bmp))(?:(\s\"|\')(\w|\W|\d)+(\"|\'))?))/gm.test(CodeEditor1.stringValue)}}

Validate markdown images using the code editor