Low Code Ui Component Design

Low code UI component design is the practice of building reusable, composable, and performant visual elements within a low code platform, tailored to specific user interactions and data flows. It matters when developers and citizen developers need to rapidly prototype, deploy, and maintain user interfaces that balance flexibility and consistency across applications—especially when components must be shared across multiple workflows, environments, and teams.

Defining a UI Component in the Platform

A UI component in a low code platform is a self-contained unit of visual and behavioral logic, typically composed of:

A template (HTML or declarative layout)
Styling (CSS or theme variables)
Event handlers (click, change, load, etc.)
Input and output properties (props and events)
Internal state and logic (via built-in scripting or embedded code)

Components are declared via a component definition file, usually in component.json at the root of a component directory:

{
  "name": "DataTable",
  "version": "1.2.0",
  "displayName": "Data Table",
  "description": "Sortable, paginated table with filtering and row actions.",
  "icon": "table.svg",
  "inputs": [
    {
      "name": "data",
      "type": "array",
      "schema": {
        "type": "object",
        "properties": {
          "id": { "type": "string" },
          "name": { "type": "string" },
          "status": { "type": "string", "enum": ["active", "inactive", "pending"] }
        }
      },
      "required": true
    },
    {
      "name": "columns",
      "type": "array",
      "schema": {
        "type": "object",
        "properties": {
          "field": { "type": "string" },
          "label": { "type": "string" },
          "sortable": { "type": "boolean", "default": true }
        }
      }
    }
  ],
  "outputs": [
    {
      "name": "rowSelected",
      "type": "object",
      "description": "Emitted when a row is clicked."
    },
    {
      "name": "pageChanged",
      "type": "number",
      "description": "Emitted when pagination changes."
    }
  ],
  "template": "template.html",
  "style": "styles.css",
  "script": "script.js",
  "dependencies": [
    "[email protected]",
    "[email protected]"
  ]
}

This configuration enables the component to appear in the palette, accept inputs, expose outputs, and integrate with the platform’s event system.

Component Template Syntax

The template language varies by platform, but the most common is Mustache-like syntax with inline expressions. For example:

<div class="data-table">
  <header>
    <input
      type="text"
      placeholder="Filter..."
      [value]="filterText"
      (input)="onFilterChange($event)"
    />
    <button (click)="refreshData()">↻</button>
  </header>

  <table>
    <thead>
      <tr>
        {{#columns}}
          <th class="{{#sortable}}sortable{{/sortable}}" (click)="sort(field)">
            {{label}}
            {{#sortable}} <span class="sort-indicator">▲</span> {{/sortable}}
          </th>
        {{/columns}}
      </tr>
    </thead>
    <tbody>
      {{#data}}
        <tr class="{{status}}" (click)="selectRow(this)">
          <td>{{id}}</td>
          <td>{{name}}</td>
          <td>{{status}}</td>
          <td>
            <button (click)="editRow(this)">Edit</button>
            <button (click)="deleteRow(this)">Delete</button>
          </td>
        </tr>
      {{/data}}
    </tbody>
  </table>

  <footer>
    <span>Page {{currentPage}} of {{totalPages}}</span>
    <button (click)="prevPage()">◀</button>
    <button (click)="nextPage()">▶</button>
  </footer>
</div>

Key behaviors:

{{field}} interpolates a property.
(event)="handler($event)" binds an event.
{{#block}} ... {{/block}} renders a list.
$event is automatically available in event handlers.

Styling and Theming

Styling is applied via a styles.css file, which supports:

CSS custom properties (CSS variables)
Scoped styles (via :scope or data-component="DataTable")
Dynamic class binding via class="active {{isActive}}"

.data-table {
  font-family: var(--font-family, 'Inter', sans-serif);
  font-size: var(--font-size, 14px);
  background: var(--bg-color, #ffffff);
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: var(--border-radius, 8px);
}

.data-table th {
  background: var(--header-bg, #f3f4f6);
  font-weight: var(--header-weight, 600);
  padding: 0.5rem 1rem;
}

.data-table .sortable {
  cursor: pointer;
  user-select: none;
}

.data-table .sortable:hover {
  background: var(--hover-bg, #f9fafb);
}

.data-table .sort-indicator {
  font-size: 0.75em;
  margin-left: 0.25em;
  color: var(--sort-color, #6b7280);
}

Theming occurs via theme variables defined in a theme.json file, which are merged at runtime:

{
  "colors": {
    "primary": "#3b82f6",
    "secondary": "#10b981",
    "accent": "#8b5cf6"
  },
  "typography": {
    "fontFamily": "Inter, sans-serif",
    "fontSize": "16px"
  },
  "components": {
    "DataTable": {
      "headerBg": "#e0f2fe",
      "borderRadius": "12px"
    }
  }
}

When a component is used, the theme variables are merged, and the component adapts without requiring recompilation.

Building and Reusing Components

To create a new component, run:

lc create-component --name=Card --type=layout --output=components/Card

This generates:

components/Card/component.json
components/Card/template.html
components/Card/styles.css
components/Card/script.js

The component is then available in the platform’s component palette.

To use a component in a page:

Drag the Card component onto the canvas.
In the Properties panel, set:

title: "User Profile"
content: "John Doe is a software engineer."
background: "blue"

In the Events panel, connect:

onLoad → call function: loadUserData()
onCardClick → navigate to: /user/123

Common Pitfalls and Silent Failures

Mismatched input types

If the data input expects an array of objects, but the caller passes an array of strings, the component renders undefined for all fields. Silent failure: no error logged, but UI shows blank rows.

Event propagation issues

When a child component emits an event, the parent may not receive it unless the event is explicitly emitted via emit('eventName', payload).

   // script.js
   function onRowClick(row) {
     emit('rowSelected', row);
   }

If emit is missing, the event is dispatched internally but not exposed to the parent.

State persistence across re-renders

The platform re-renders components on every data change, but state is not preserved unless explicitly declared.

   // In script.js
   let currentPage = 1;
   let filterText = '';

   function init() {
     currentPage = 1;
     filterText = '';
   }

   function onFilterChange(event) {
     filterText = event.target.value;
     // currentPage is not updated across renders
   }

   // Without `persistState: true`, currentPage resets on each render.

To fix: add persistState: true in component.json.

Incorrect event binding syntax

Using (click)="handler" is correct, but on-click (hyphenated) is ignored.

   <!-- This works: -->
   <button (click)="onSubmit()">Submit</button>

   <!-- This does not: -->
   <button on-click="onSubmit()">Submit</button>

Missing default values for optional inputs

If columns input is optional but no default is specified, the component expects an array, but if the input is missing or null, the loop {{#columns}} fails silently.

   "inputs": [
     {
       "name": "columns",
       "type": "array",
       "schema": { ... },
       "default": []
     }
   ]

Type coercion failure

When a boolean input is passed as "true" (string), the platform does not convert it to true unless explicitly configured.

   "inputs": [
     {
       "name": "showHeader",
       "type": "boolean",
       "default": true
     }
   ]

If the caller sets showHeader: "yes", the component treats it as true only if typeCoercion: "strict" is enabled.

Advanced Component Patterns

Nested Components

A Form component can contain Input, Select, and Button components, each with their own inputs and outputs.

<!-- Form.component.html -->
<form (submit)="onSubmit($event)">
  <div class="form-group">
    <label>{{label}}</label>
    <input
      [value]="value"
      (input)="onChange($event)"
      (blur)="onBlur()"
    />
    <span class="error">{{errorMessage}}</span>
  </div>
</form>

The parent form can now use:

<Form
  label="Email"
  value="[email protected]"
  (change)="handleEmailChange($event)"
  (blur)="validateEmail()"
/>

Dynamic Component Loading

Components can be loaded dynamically based on data:

<component
  [type]="componentType"
  [data]="componentData"
  (loaded)="onComponentReady($event)"
/>

The platform resolves componentType to a component definition and renders it at runtime.

Component Libraries

Multiple components are grouped into a library, declared in library.json:

{
  "name": "ui-kit",
  "version": "2.1.0",
  "components": [
    "Card",
    "DataTable",
    "Modal",
    "Button"
  ],
  "exports": [
    "Card",
    "DataTable",
    "Modal"
  ],
  "dependencies": [
    "lodash",
    "moment"
  ]
}

When a project imports ui-kit, all components are available in the palette, and they can be versioned and shared across applications.

Debugging and Development

Use the Component Inspector in the platform:

View live values of inputs, outputs, and state.
Trigger events manually.
Step through script.js in a debugger.

Common error messages:

Component 'DataTable' not found: missing component.json or incorrect path.
Cannot read property 'data' of undefined: data input not provided or malformed.
Event 'rowSelected' not defined: emit('rowSelected', ...) called, but outputs list missing the event.

To debug a component:

Open the Console tab.
Add console.log('Component loaded') in script.js.
Check the Component Logs pane for runtime messages.

Final Notes

Always declare persistState: true on components with internal state.
Use default values for all optional inputs.
Validate inputs in script.js using assert or if guards.
Name events and outputs consistently (rowSelected, onRowSelected, rowSelected).
Avoid inline scripts—use script.js for complex logic.
Test components in isolation before embedding them in pages.

A well-designed component is not just a visual block—it is a first-class citizen in the platform, with clear contracts, predictable behavior, and deep integration with the rest of the system.

This page was rewritten on 10 October 2026. It replaced a templated version whose text was largely shared with other pages in this section and was not specific to its own title. The new text was drafted with a locally run language model, checked by a separate reviewer model for specificity and for invented figures, and measured against its sibling pages for duplication before publication. If anything here is wrong, tell us at [email protected] and we will correct it.