Skip to main content
Available starting with FlowX.AI 5.7.0Custom Components allow you to write React code directly in FlowX Designer and use it in your UI Flows. This is Phase 1 (browser-side bundling). Phase 2 (server-side bundling with dependency governance) is planned for a future release.

​
What are Custom Components?

Custom Components are developer-defined React components that you create in FlowX Designer and reference in UI Flows. Unlike Reusable UI Templates which use the visual component builder, Custom Components let you write actual React code to build complex, interactive UI elements.

Code-based

Write React TypeScript/JavaScript directly in the Designer code editor

Data-connected

Receive process data through input keys and trigger process actions

Reusable

Define once in Reusable Resources, use across multiple User Tasks

Import/Export

Export as ZIP and import into other projects

​
When to use Custom Components

Use caseRecommended approach
Standard forms, layouts, navigationBuilt-in components or Reusable UI Templates
Complex interactive widgets (charts, maps, custom inputs)Custom Components
Third-party library integrationCustom Components
Custom business logic in the UICustom Components + Reusable Functions
Reusable visual patterns without codeReusable UI Templates

​
Creating a Custom Component

Custom Components are managed under Reusable Resources in your project.
1

Navigate to Custom Components

In the Designer, open your project and go to Reusable Resources → Custom Components.
2

Create a new component

Click the + button to create a new Custom Component. Fill in the creation modal:
Create Custom Component modal
FieldDescription
NameDisplay name for the component
Unique IdentifierA unique string identifier used to reference the component in UI Flows
PlatformWeb or Mobile
DescriptionOptional description of the component’s purpose
3

Write your component code

The component editor has three panels:
  • Source Files (left) — a file tree with your component’s JSX, CSS, and package.json
  • Code editor (right) — edit the selected file
  • Dependencies (bottom-left) — lists available packages
Each component is scaffolded with:
  • identifier.jsx — your React component code
  • identifier.css — component styles
  • package.json — dependency declarations
Available dependencies:
PackageVersionPurpose
react18.3.1Core React library
react-dom18.3.1DOM rendering
@emotion/css11.13.5CSS-in-JS styling
lodash4.17.21Utility functions
axios1.13.2HTTP requests
date-fns2.30.0Date manipulation
4

Configure input keys

Define Input Keys to specify which process data paths the component receives. These map process data model attributes to the component’s data prop.For example, if your process data model has application.metrics.revenue, add it as an input key. The component receives it as data['application.metrics.revenue'].
5

Test and save

Use the Test button to preview your component with sample data. Click Save to persist your changes.You can also test end-to-end by starting a UI Flow that includes the component.

​
Using Custom Components in UI Flows

Once defined, Custom Components can be added to User Tasks in your UI Flows.
1

Add to a User Task

In the UI Designer, drag a Custom Component element from the component palette into your User Task layout.
2

Select the component

In the properties panel, select your Custom Component by its Identifier (e.g., MyCustomChart).
3

Map input keys

Configure which process data paths are passed to the component. Use data model paths like ${application.user.profile} to bind process data.
Custom Component parameters configuration
4

Connect UI actions

If your component triggers actions (e.g., button clicks), connect them to process actions defined on the User Task node.

​
Example: Onboarding checklist

A progress tracker that displays a list of onboarding steps with completion status, driven by process data.
Onboarding checklist custom component rendered output
import React from "react";

export default function OnboardingChecklist({ input }) {
  const steps = input?.data || [];
  const completed = steps.filter((s) => s.completed).length;
  const total = steps.length;
  const pct = total > 0 ? Math.round((completed / total) * 100) : 0;

  return (
    <div className="obc-root">
      <div className="obc-header">
        <span className="obc-title">Onboarding progress</span>
        <span className="obc-pct">{pct}%</span>
      </div>
      <div className="obc-bar-track">
        <div className="obc-bar-fill" style={{ width: `${pct}%` }} />
      </div>
      <ul className="obc-list">
        {steps.map((step, i) => (
          <li key={i} className={`obc-step ${step.completed ? "obc-done" : ""}`}>
            <span className="obc-icon">{step.completed ? "✓" : "○"}</span>
            <span>{step.label}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

​
Key patterns in this example

PatternHow it’s used
Guard against undefinedinput?.data || [] prevents errors before process data loads
Scoped CSSAll classes prefixed with obc- to avoid style conflicts
No CSS importThe CSS file is loaded automatically by the runtime
Derived stateProgress percentage calculated from the data, not stored separately
Minimal dependenciesOnly React — no additional packages needed
Generating components with AI: You can use the following prompt template to generate Custom Components with an AI assistant:“Create a simple react component as a widget that [description]. Rules: one jsx file + one css file, scoped CSS (no global styles), don’t import the CSS file, contain dimensions, keep it simple. The component receives an input prop with a data property (initial value is undefined, guard against it). The data value should [describe the shape]. Output a JSON dependencies list (ignoring react, @emotion/css, lodash, axios, date-fns).”

​
Component API reference

Custom Components receive the following props:
PropTypeDescription
dataRecord<string, any>Process data mapped through the configured input keys
actionsProcessAction[]List of available process actions
actionsFnRecord<string, () => Observable>Bound action functions keyed by action name
Custom Components run in the React SDK runtime. They have access to standard React APIs and a set of pre-defined packages (React, Emotion, Lodash, Axios, date-fns). Custom npm packages cannot be added in Phase 1.

​
Import and export

Custom Components support the standard FlowX import/export workflow:
  • Export: Select components and export as a ZIP file
  • Import: Import ZIP files into other projects
  • Conflict resolution: When importing, choose to Keep both, Replace, or Skip for each component

​
Permissions

Custom Components are controlled by the CUSTOM_COMPONENT resource type in the authorization system.
PermissionDescription
CUSTOM_COMPONENT readView custom components in a project
CUSTOM_COMPONENT writeCreate and edit custom components
CUSTOM_COMPONENT deleteDelete custom components
Import/ExportRequires standard resource import/export permissions
By default, the Project Owner role has full Custom Component permissions.

​
Limitations (Phase 1)

Phase 1 limitations — these will be addressed in future releases:
  • React only — Custom Components are not supported in Angular SDK
  • Pre-defined dependencies — A curated set of packages is available (React, Emotion, Lodash, Axios, date-fns). Custom npm packages cannot be added in Phase 1.
  • Browser-side bundling — Components are bundled in the browser, which limits complexity
  • No server-side rendering — Components render client-side only

Reusable UI Templates

Visual, no-code reusable UI patterns

Reusable Functions

Reusable business logic functions

UI Flows

Building user interfaces with FlowX

UI Actions

Configuring UI actions on components
Last modified on April 9, 2026