Component library

Markdown Editor component

Last updated 2 November 2026

Defines a markdown editor.

Live demo

<ins-markdown-editor
  label="Description Example"
  html-description
  description="This is a <strong>Description</strong> <i>Example</i>">
</ins-markdown-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
disabled	boolean	false	true, false	Disables the field
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
required	boolean	false	true, false	Specifies that the input field must be filled out before submitting the form
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

Events

EVENT	OBJECT	DESCRIPTION
insValueChange	value	Emits the value on change

Examples

Complete Example

<ins-markdown-editor 
  label="Markdown Content"
  tooltip="This is a sample tooltip content. It also support html content.">
</ins-markdown-editor>

Error State

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

Read-Only State

<ins-markdown-editor 
  label="Readonly Field" 
  value="You cannot edit this value" 
  readonly>
</ins-markdown-editor>

Direct Value Set

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

<script>
  var label = "Change logs - Sample";
  var value = `# H1 heading
## H2 heading
### H3 heading`;

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

Get Markdown Value

<ins-markdown-editor 
  label="Content" 
  id="myMarkdownEl">
</ins-markdown-editor>

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

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