What Is a Custom Code-Component?
A custom code-component is a component your developers write in code and register with the platform, so builders can drop it onto a page like any built-in block. It lives as its own versioned entity — separate from any single app — with a name, one in-progress test version, and any number of promoted production versions.
Once registered, the same component can be reused across every app in the project. This is the developer path; for composing existing no-code blocks into a reusable component without code, use template components instead.
The Two Halves
These are two distinct parts of the same feature:
| Part | What it is | Where |
| Custom code-component | The registered, versioned bundle of developer code. Created and versioned in the Custom Components manager. Does not appear on any page by itself. | Applications → Custom Components manager |
| Custom block | The on-canvas block that renders one of these components on a page. It picks a version of the component, feeds it the data you bind, and exposes its events to your page. | Page builder → block picker |
One component can back many Custom blocks across many apps and pages.
The Component Lifecycle
A custom code-component moves through four stages:
Register. A developer creates the component in the Custom Components manager and gives it a name. See Registering & Versioning.
Test. The component's in-progress work is served live from a manifest URL. Developers iterate and see changes without a formal release. See Registering & Versioning.
Promote. When ready, it is packaged, uploaded, and deployed as a numbered production version — optionally tagged with release notes. See Registering & Versioning.
Use. A builder adds a Custom block to a page, picks a version, and binds data and events. See Using in the Builder.
The Manifest
Both development and production versions rely on a manifest — a small manifest.json file the developer ships with the component. It tells the platform how to load and label the component:
| Field | Required | Description |
name | Required | Display name shown in the builder |
type | Required | Unique type identifier. Must be unique across the project — duplicate types cause one to silently not appear. |
main | Required | The component's main entry file |
style | Optional | The component's stylesheet |
icon | Optional | The component's icon shown in the picker |
keywords | Optional | Search keywords for the block picker |
A manifest looks roughly like this:
{ "name": "Gantt Chart", "type": "GanttChart", "main": "index.js", "style": "index.css", "icon": "icon.svg", "keywords": "gantt timeline schedule" }
Adding a Custom Component
From the Custom Components manager, click Add Component and choose a deployment mode:
| Mode | Description | Input required |
Development | Test and debug before sharing. Platform loads the component live from your local/dev URL. | Manifest URL — the URL of your local manifest file |
Production | Stable, optimized components ready for platform-wide use. | Upload a packaged .zip, with optional version tag and release notes |
When you upload a production build, the platform runs File Checks before saving — confirming the manifest file is present, the component type is defined, the UI code is included, and a component icon is available.
Pushing Data into a Custom Component
To push data into a custom component placed on a page, add an action (for example on a button's On Click), choose Trigger Component Method, pick the component, then choose a method. Two methods write data into the component:
Update State — writes to the component's own top-level state.
Update Data — writes into the component's data, one or more path-and-value pairs at a time. It merges rather than replaces, so setting a nested field leaves its siblings untouched.
The method list also shows general block methods, such as Export Block and Scroll Into View; they don't change the component's data. See Using Custom Components in the Builder.
When a Dev Component Is Blocked from Loading
If the canvas shows "Custom component blocked — The dev URL {host} isn't on this app's allowlist", the app's Content Security Policy doesn't allow your local or dev host. Use the Allow & reload action on that message. What it does is described in Using Custom Components in the Builder.
Project-Level Asset
A custom code-component is a project-level asset, not part of one app. Registering it once makes it available to every app in the project. A new production version becomes available everywhere the component is used — whether that's a good thing or requires careful versioning is up to you. Pin apps to a specific version if you need to isolate them from future promotions.
Related Pages
Registering & Versioning — creating, testing, and promoting versions
Using in the Builder — placing and wiring a custom component on a page
Template Components Overview — the no-code alternative to custom components