Markdown Input

Tips & examples

An interactive multiline text input text box topped by a comprehensive horizontal toolbar containing visual shortcuts for H1/H2/H3 headers, bold, italic, strikeout text, hyperlinks, quotes, code text blocks, and embedded images.

When to use

Allowing users to compose long-form prose with rich formatting tools (headers, lists, blockquotes, code blocks) inside forms.
Gathering detailed user document descriptions, policy inputs, or technical comments that require rich shorthand markdown representations.

What you need

Deactivated by default until a parent default_form is established on the page layer. Requires explicit mapping references linking Element ID and Field Path attributes.

Data Source section attributes stay locked until a valid default_form structure layer exists on the local active canvas workspace.

Examples

A software ticketing dashboard layout allowing engineers to write bug descriptions complete with markdown code fences and bullet points.
An internal knowledge management tool input box preloaded with markdown prose template defaults.

Avoid

Using for simple, flat text data entry where no custom formatting toolbar is needed, use the default text_input instead.
Compressing the layout below a 9x4 grid box boundary, which squishes the top utility menu bar and hides functional typography shortcut items.
Attempting to map page parameters or bind keys before dropping a default_form parent layer wrapper on the canvas design stack.

Use instead

Markdown Text — The markdown content layout is purely read-only informational visualization text and should not accept user updates or input keys.

Pairs well with

Form — Optional dataset coordinator. When actively linked, it intercepts state changes, pushes structural schema validations, and binds output payloads directly into the global form submission data model.

Properties

Editor properties

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

Data Source

Element IDrequiredNumber or TextInside `dataSource`: Another element on the page whose data backs this field.
Default: none
Field PathrequiredList of Text or NumberInside `dataSource`: Path into the source element’s data (property segments).
Default: none

Input

Default ValueoptionalNot set (null): The baseline text data preloaded into the editor workspace grid before direct user interaction steps begin.
Example Initial text containing **bold markers**.
Default: none
DisabledoptionalYes / no or Custom expression (yes/no): When true, the control cannot be edited.
Example false
Default: none
NullableoptionalYes / no or Custom expression (yes/no): Whether the field may be left empty.
Example false
Default: none

Sizing

Minimum size: 3 × 2 grid cells (width × height).
Default size when dropped on a page: 3 × 2.

Translatable labels

label — The localized plain text string header displayed directly above the markdown text box area frame limits.

Accessibility

The rich textbox layout exposes descriptive fields tracking formatting updates. Shortcut action keys map custom labels to safely broadcast focus transitions down toolbar layers.

Tab key navigates entry boundaries.
Enter key breaks prose onto new text rows tracks inside the main text box editor workspace.

Expressions

Values you can read in expressions

Other parts of your app can read live values from this element in custom expressions:

elements.myMarkdownInput.<property>

value string Current input value of this control. elements.myMarkdownInput.value

When The raw Markdown source as typed. Pair it with a Markdown Field elsewhere on the page to show a live rendered preview.

disabled boolean True while the control is locked and cannot be edited. elements.myMarkdownInput.disabled

To use one of these, open the property you want to drive on the other element, switch it to expression mode in the Expression Editor, and enter:

1
elements.myMarkdownInput.value

Replace myMarkdownInput with this element’s unique id. Select the element in Application Designer and copy the id chip at the top of the right-hand property panel.

Composition

Where you can place it

Drag this element into one of these containers:

Placement notes

Form — Can be nested directly inside or placed alongside form layouts. When a form is linked as a data source, it transitions behavior from local state management to form-bound schema state tracking.

Sample configuration

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{
  "config": {
    "dataSource": {
      "elementId": "myElement",
      "fieldPath": [
        "fieldPath"
      ]
    },
    "defaultValue": "defaultValue",
    "disabled": false,
    "nullable": false
  }
}

Ready-made setups

Spacious Knowledge Article Markdown Input ↕

Configures a wide 9x4 interactive text entry container inside a form workspace with custom placeholders, enabling full toolbar shortcuts usage.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
{
  "config": {
    "dataSource": {
      "elementId": "articleSubmissionForm",
      "fieldPath": [
        "bodyContentMarkdown"
      ]
    },
    "input": {
      "defaultValue": "# Document Title\nWrite your content description lines here...",
      "disabled": "@@expression: false",
      "nullable": false
    }
  }
}