Skip to main content

Code-Editor

📘 Developer Guide

With the Code-Editor Brick, you can add an IDE with Intellisense and several other Features,features, depending on the chosen language.

🔁 Example

Designer

Screenshot From 2025-10-10 11-04-24.pngScreenshot from 2025-10-10 11-04-24

Runtime

Screenshot From 2025-10-10 11-04-46.pngScreenshot from 2025-10-10 11-04-46

⚙️ Configuration Properties

config
Key Label Description Default Value
editorOptions * An object containing editor Optionsoptions See config.editorOptions for more information

CodeEditorOptions		 { language: 'json', height: '100%', width: '100%', automaticLayout: true }
formatOnStart * Formats the provided Codecode on Startupstartup Accepts either true or false

boolean		 true
required Specifies if editor input is required Accepts either true or false

boolean		 false
disabled Specifies if the editor is disabled Accepts either true or false

boolean		 false
changeMode Specifies the kindSaving of saving the code to the brickbehavior The saving behavior depends on the choosen option.
always: saves the code on every change
debounced takes the debounceTime time, which delays the saving of the codesaves on repeated strokesdelay
onBlur saves thewhen codeeditor after the user leaves the editors windowloses focus 

always | debounced | onBlur		 debounced
debounceTime Specifies the debounceDebounce time in ms Accepts a number in milliseconds (ms)

number		 300
languageDiagnosticOptions Language Language-specific diagnostic optionsdiagnostics See config.languageDiagnosticOptions for more information
 fyzMonacoLanguageDiagnosticOptions		 -
editorOptions (config.editorOptions)
Key Label Description Default Value
theme Defines the EditorsEditor Theme Accepts a theming option as string
hc stands for Hight Contrast
vs | vs-dark | hc-black | hc-light. hc stands for High Contrast		 Either vs-dark or vs
Depends (depends on the browser color schemaschema)
language TheEditor Language on which the Editor runs AcceptsAccepts: a language option as string
json | javascript | typescript | html | css | scss | xml | yaml | markdown | plaintext		 json
height The heightHeight of the Editor Accepts a string, e.g. 100% or 500px

string		 100%
width The widthWidth of the Editor Accepts a string, e.g. 100% or 500px

string		 100%
automaticLayout Toggles the automaticAuto Layout of the Editor TheEditor Layoutgrows willor growshrinks and shrink in size, dependingbased on available space. 
Accepts either true or false
boolean		 trueboolean
lineNumbers Defines the rowRow numbering on the left hand side Accepts a line number option as string
on | off | relative | interval		 -
lineNumbersMinChars ControlsMinimum the minimum spacewidth for line numbersnums TheWidth line numbers will reserve a specific width, depending on the number provided,reserved, e.g. 5 leadsequals toat a width of atleastleast 5 numbers

number		 -
minimap An object containing minimapMinimap options See config.editorOptions.minimap for more informationinfo

CodeEditorMinimapOptions		 -
minimapOptions (config.editorOptions.minimapOptions)
will
Key Label Description Default Value
autohide Enables the autohide feature of theAutohide minimap When enabled, theHides minimap will hide while scrolling or hovering over ithovering.
Accepts either true or false
boolean		 -
enabled Toggles theEnable minimap Accepts either true or false -
maxColumn Defines the maximumMax rendered columns of the minimap Will set the maximum rendered columns of the minimap. E.g. 150 will notWon't render code that is longer than 150X characterschars inper a lineline.

number		 -
renderCharacters DefinesShow ifchars the minimap renders characters or(not just colored blockscolors) Accepts either true or false

boolean		 -
scale Defines theCharacter scale of characters in the minimap A valueValue over 1 will= renderbigger characters bigger, a valuechars, under 1 = smaller

number		 -
sectionHeaderFontSize Defines the fontFont size of section headlines You can define theCustom font size of the headers customly

number		 -
showMarkSectionHeaders Toggles the display of MARK:-Comments in the MinimapIf your code containsShow // MARK, thein minimap Display displaylocations its location as marked.
Accepts eitherof true// MARK or falsecomments.

boolean		 -
showMarkSectionHeaders Toggles the display ofShow #region in the Minimapminimap IfDisplay yourlocations code contains #region ABC, the minimap will thatof region in the minimap.markers.
Accepts either true or false
boolean		 -
showSlider Changes the displayingScrollbar behavior of the Scroll-Bar Depending on the chosen option, the scrollbar will display differently
always | mouseover		 -
side ChangesSide the side at which theof minimap is displayed right | left -
size Changes theMinimap size of the minimap The scaling behavior depends on the chosen option, propotional (scales with the editor, fill fills the available space, fit reserves space, that the whole content is visible
propotionaleditor) | fill (fills space) | fit (everything visible)		 -
languageDiagnosticOptions (config.languageDiagnosticOptions)

(Currently only supports JSON and Typescript)

JSON (config.languageDiagnosticOptions.json)
Key Label Description Default Value
validate Enable Validation If set, theEnables validator will be enabled and performfor syntax and schema basedvalidation.

validation, unless schemaValidation is ignore
boolean		 -
allowComments Allow Comments If set,true, comments are allowed, if false, syntax errors are emitted for comments.allowed.
Either accepts true or false
boolean		 -
schemas JSON Schemas A listList of known schemas and/orwith associations of schemas toURI, file names. Each schema has URI, optional fileMatchmatch patterns, and schema contentschema.

{ uri:uri, stringfileMatch, }, fileMatch: string[], schema: anyschema }		 -
enableSchemaRequest Enable Schema Requests If set, theLoads schema service will load schema content on-demand usingvia ‘fetch’fetch.

if available
boolean		 -
schemaValidation Schema Validation Severity The severitySeverity of problems from schema validation. ‘ignore’ disables schema validation
 problems: error | warning | ignore		 warning
schemaRequest Schema Request Severity Severity ofon issuesschema inloading: resolving/loading schemas. ‘ignore’ disables reporting
error | warning | ignore		 warning
trailingCommas Trailing Commas Severity Severity of reported trailing commas. Not set means errors

error | warning | ignore		 error
comments Comments Severity Severity of reported comments.comments, Ifelse notas set, controlled byper allowComments.

error | warning | ignore		 -
Typescript (config.languageDiagnosticOptions.typescript)
Key Label Description Default Value
noSemanticValidation Disable Semantic Validation Disables semantic validation, which checksvalidation for meaningful code correctness beyond syntax, such as type checking and symbol resolutionresolution.
Accepts either true or false
boolean		 -
noSyntaxValidation Disable Syntax Validation Disables syntax validation, which checksvalidation for basic code structuresyntax errors such as missing punctuation, unmatched(structure, brackets, or invalid tokenstokens).
Accepts either true or false
boolean		 -
noSuggestionDiagnostics Disable Suggestion Diagnostics Disables diagnostics for suggestions likeon code style improvements,and unused variables, or potential refactors provided by the language servicevars.
Accepts either true or false
boolean		 -
onlyVisible Limit to Visible FilesLimits diagnostic computationdiagnostics to only visible filesRuns diagnostics only for visible files.
Accepts either true or false
boolean		 false
diagnosticCodesToIgnore Ignored Diagnostic Codes List of diagnosticDiagnostic codes that should be ignored during validationvalidation.

number[]		 -

🛠️ Usage

Designer

(Use the build built-in configuration Inputsinputs in the right Side-Nav)side navigation)

Screenshot From 2025-10-10 11-04-32.pngDesigner configuration

Config

(Edit the whole configuration of the Button to your liking)

Screenshot From 2025-10-10 11-05-13.pngConfig screenshot

Back to top