Component library

Code Editor component

Last updated 2 November 2026

Defines a code editor.

Live demo

<ins-code-editor 
    label="Description Example"
    html-description
    description="This is a <strong>Description</strong> <i>Example</i>">
</ins-code-editor>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
label	string	""	any	Label shown for the field
value	string	""	any	Defines the field value
name	string	""	any	Defines the field name
readonly	boolean	false	true, false	Make the field readonly
has-error	boolean	false	true, false	Defines if the field is invalid / error
error-message	string	""	any	Message shown when field has error
theme	string	""	default, monokai, neat, the-matrix, material	Theme color of code editor
disable-line-numbers	boolean	false	true, false	Hide code editor line numbers
auto-height	boolean	false	true, false	Height adjusts based on the code editor content
mode	string	htmlmixed	css, htmlembedded, htmlmixed, liquid, javascript, markdown, python, vue, xml, yaml	Language mode of code editor (Syntax highlighting)
tooltip	string	""	-	Displays a tooltip beside the label. Supports HTML Content
html-description	boolean	false	true, false	Enables HTML tags in the description
description	string	""	any	Defines the description value
beautify-json	boolean	false	true, false	Enables formatting of value to readable JSON format

Examples

Complete Example

<ins-code-editor 
  label="Code Editor"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-code-editor>

Error State

<ins-code-editor 
  label="Error Field" 
  has-error 
  error-message="This is a required field">
</ins-code-editor>

Read-Only State

<ins-code-editor 
  label="Readonly Field" 
  value="<!-- You cannot edit this value --> <p>Readonly state and line numbers disabled</p>" 
  readonly disable-line-numbers>
</ins-code-editor>

Theme

<ins-code-editor 
  label="Code Editor" 
  theme="twilight" 
  value="<p>Theme: twilight</p>">
</ins-code-editor>

Direct Value Set

<ins-code-editor 
  id="directFieldEl">
</ins-code-editor>

<script>
  var label = "Change logs - Sample";
  var value = `<html>
  <body>
    <h1>Sample code</h1>
  </body>
</html>`;

  var directFieldEl = document.getElementById('directFieldEl');
  directFieldEl.addEventListener('didLoad', function (e){
    directFieldEl.label = label;
    directFieldEl.setValue(value);
  });
</script>

Get Code Editor Value

<ins-code-editor 
  label="Content" 
  id="myCodeEditorEl"
  value="<h1>Hello World!</h1>">
</ins-code-editor>

<ins-button 
  solid label="Get Value" 
  id="getValueBtn">
</ins-button>

<script>
  var button = document.getElementById('getValueBtn');
  var myCodeEditorEl = document.getElementById('myCodeEditorEl');
  myCodeEditorEl.addEventListener('didLoad', function (e){
    button.addEventListener('click', function() {
      console.log("Code Editor field value below:");
      console.log(myCodeEditorEl.val());
      alert('check console to see the value');
    });
  });
</script>

Language Mode

<ins-code-editor 
  id="codeEditorModeEl"
  beautify-json
  mode="javascript">
</ins-code-editor>

<script>
  var label = "Change logs - Sample";
  var value = `function sample(value) {
    return value;
  }

  sample("test");

  var field = document.getElementById('codeEditorModeEl');
  field.addEventListener('didLoad', function(e) {
    field.label = label;
    field.setValue(value);
  });
</script>