Code Component

Introduction

Momen allows you to extend your applications by developing custom React components. These code components enable dynamic forms, data-driven charts, advanced animations, interactive maps, and more, greatly expanding the interactive capabilities of your projects.

September 8, 2025 Update: The CLI has been updated to version 0.4.16. All previous versions are now deprecated. Please reinstall the CLI and use the “momen update” command to upgrade any existing projects. For detailed update instructions, see CLI v0.4.16 Update Guide.

Prerequisites

If you are new to React, refer to:

• React Official Documentation 
• React Tutorial: From Basics to Project Practice 

Getting Started

If you have existing code component projects from earlier versions, please refer to this guide to upgrade to the latest code components. Node.js 18 or 20 is recommended. Node.js 22 is not supported.

1. Install the global CLI tool:

# Install globally
npm i -g momen-cli
# If you encounter slow network, you can switch sources and force reinstall:
# npm i -g momen-cli --registry=https://registry.npmmirror.com --force

2. Verify installation:

momen --version

3. After installation, run momen --help to see all commands and descriptions.

momen --help
 
zvm cli 0.4.16  
 
Usage: momen [options] [command]
 
Options:
  -h, --help                      display help for command
 
Commands:
  create [options] <project_name>  Initialize project. Creates an associated custom component project under the logged-in account and initializes a template project locally.
  publish [options]               Publish project.
  reinit [options]                Re-register project ID, republish the local project as a new project under your account.
  reset [options]                 Create template project. Reset a template project in the current directory.
  signin [options] <username/email> <password>  Sign in to Momen platform, currently only supports username/password or email/password login.
  signout [options]               Sign out and remove current login information.
  update [options]                Update project, users with CLI version 0.4.15 and earlier should use this command to upgrade their projects.
  help [command]                  display help for command

Common Commands:

• create <project_name>: Initialize project
• publish: Publish project
• reinit: Re-register project ID
• reset: Reset template project
• signin <username/email> <password>: Sign in to Momen platform
• update: Update project (for CLI versions 0.4.15 and earlier)

Development Workflow

Platform Login

Run the following command in your working directory.

momen signin your_email your_password

Wait for the command to complete.

momen signin your_email your_password
 
zvm cli 0.4.16
 
ℹ Signing in
✔ Login successful

Project Creation

1. Run the following command in any directory:

# create project_name
momen create test

2. Wait for the command to complete. This step creates a new folder test containing all project files and template components. Subsequent development only needs to be done in this folder.
3. This command also registers a code component project on the platform. A single code component project can contain multiple code components.

Note: No version is published at this stage.

momen create test
 
zvm cli 0.4.16
 
ℹ Project initialization
✔ Workspace preparation completed
✔ Latest template retrieval completed
✔ Project generation completed
✔ Platform project registration completed
✔ Remote project association completed
✔ Project initialization completed

Editing Code

Navigate to your code component project directory and install dependencies:

cd test
npm install

Project Structure

A typical code component library project has the following structure:

• codegen.ts
• index.html
• package-lock.json
• package.json
• public
• src
  • App.scss
  • App.tsx
  • components
    • AddCalculator
    • Bar3DChart
    • ConfirmModal
    • DataTable
    • DemoChart
    • index.ts
  • graphql
  • index.css
  • main.tsx
  • typings
  • vite-env.d.ts
• tree.txt
• tsconfig.json
• tsconfig.node.json
• vite.config.ts
• zvm-temp

Mandatory Conventions

Each custom component must comply with the following rules. Please strictly follow them. You can refer to the example code in the template project for development.

1. Directory Structure Standards

Components must have a directory under src/components:

• Directory name must be the component name
• Directory must contain at least index.ts and ComponentName.tsx
• index.ts is used to export the component
• ComponentName.tsx is used to write business logic

2. Type Declaration Standards

Components declared in src/components/ComponentName/ComponentName.tsx must export the following 4 interfaces:

Where State and EventHandler need to be imported from zvm-code-context.

Important Notes:

1. Component name must follow JavaScript naming conventions and cannot contain special characters
2. Component name must start with an uppercase letter
3. Component name must match the directory name, and directory name must match the component file name
4. Type names must be strictly ComponentNamePropData, ComponentNameStateData, ComponentNameEvent, ComponentNameProps, and all must be exported
5. Props type must be ComponentNameProps, and component function parameter type must also be ComponentNameProps
6. Cannot use import('zvm-code-context').EventHandler syntax, should directly use import { EventHandler } from 'zvm-code-context'
7. Must have export function ComponentName(props: ComponentNameProps) {}, cannot omit props type

Code Example:

import { ExclamationCircleFilled } from '@ant-design/icons'
import { Button, Modal } from 'antd'
import { EventHandler } from 'zvm-code-context'
 
// Component property data, configured in right sidebar, passed from outside to inside
export interface ConfirmModalPropData {
  buttonTitle: string
  modalTitle: string
  modalContent?: string
}
 
// Component state, configured in right sidebar, passed from inside to outside, can be bound by other components in host project
export interface ConfirmModalStateData {}
 
// Component events available for binding, type is currently fixed, can only be EventHandler
export interface ConfirmModalEvent {
  onConfirm?: EventHandler
  onCancel?: EventHandler
}
 
// Fixed syntax. At runtime, host project will pass in through the following three properties
export interface ConfirmModalProps {
  propData: ConfirmModalPropData
  propState: ConfirmModalStateData
  event: ConfirmModalEvent
}
 
// Component logic
export function ConfirmModal({ propData, event }: ConfirmModalProps) {
  const showConfirm = () => {
    Modal.confirm({
      title: propData.modalTitle || '',
      icon: <ExclamationCircleFilled />, 
      content: propData.modalContent || '',
      onOk() {
        event.onConfirm?.call(null)
      },
      onCancel() {
        event.onCancel?.call(null)
      },
    })
  }
 
  return (
    <Button type="primary" onClick={showConfirm}>
      {propData.buttonTitle || ''}
    </Button>
  )
}

3. Export Components

Expose newly edited components in src/components/index.ts.

export { ConfirmModal } from './ConfirmModal/ConfirmModal'

This allows the Momen platform to discover and use your component.

AI-assisted Component Development

1. Create a new code component project as described above.
2. Open the code editor’s built-in AI functionality, such as VS Code’s AI Copilot or Cursor.
3. Input prompts to generate code components. Make sure the AI generates code components in the test/src/components directory.

Recommended prompt:

Read "https://docs.momen.app/account_community/code-component/" and strictly follow the Momen platform conventions to write a React component.
The component name is ConfirmModal, and its function is to pop up a confirmation dialog. The component needs to support the following features:
1. Component properties include:
   - Button text
   - Modal title
   - Modal content
2. Component state includes:
   - Confirm event handler
   - Cancel event handler
3. The component needs to use Ant Design's Modal and Button components
4. The component needs to export the following types:
   - ConfirmModalPropData
   - ConfirmModalStateData
   - ConfirmModalEvent
   - ConfirmModalProps
Please write in TypeScript and ensure the component meets the Momen platform's code component specifications.

4. Follow the conventions above and ensure the code meets requirements through AI dialogue.

Local Debugging

Before local debugging, you need to import the component in App.tsx.

Direct Local Preview

Enter the following command:

npm run preview # Start a local static resource server to support http access for build artifacts. Default port 6326.

Combined with Momen Mirror

Combined with Momen real-time preview, interact with data and interactions with the host project for local debugging. This method requires the project to have been published and used in a Momen project.

Operation steps:

1. Follow the publishing process below to publish the code component —— if the project has been published in history, you can skip this step
2. Run the following commands:

npm run preview # Start a local static resource server to support http access for build artifacts. Default port 6326.
npm run watch:build  # Listen for changes in local source code, automatically run npm run build when editing and saving.
# Note: If you don't start the watch:build command, you can manually run npm run build after editing. The effect is the same.

3. Configure input parameters and behaviors
4. Open real-time preview, click “Debug” (wrench icon), select port
5. After modifying in the code editor, refresh real-time preview to see the latest effects.

Related APIs

zvm-code-context provides some APIs bound to the host project context for code components. Developers can implement required functionality more conveniently through related APIs.

// In some component
import { useAppContext } from 'zvm-code-context'
 
const { component, discover, query, navigate, globalData, pageData } =
  useAppContext()
 
// ...

1. component, contains all data information used by the host project to describe the current component instance.
2. discover(id: string): Component, used to get a specific component instance in the host project based on a component ID.
3. query is used to make a request to the backend of the host project. For details, refer to the DataTable component in the template project.
4. navigate is used to jump to a specific page in the host project. We recommend using this method for jumping to execute some specific jump logic.
5. globalData contains the global variables of the current host project.
6. pageData contains the page variables of the current running page of the current host project.

Modify Project Basic Information

1. Edit project information in package.json.

   • name: Component package name
   • description: Component package description
   • platforms: Platforms supported by the component, such as web, etc.
   • homepage: Homepage address for component package preview, mainly used for display after listing in the component market.
   • version: Component package version, needs to be modified for each update, strictly follow npm package version specifications.

2. Edit resource files in the resources directory. When creating new folders and resources, please strictly follow the following file naming conventions, do not modify file names, only support webp and svg formats.

   • /resources/icon.webp: Component package icon, size 24x24
   • /resources/ComponentName/icon.webp: Component icon, size 72x54
   • /resources/ComponentName/canvas.webp: Component canvas preview, size 300x200

3. Edit README.md files in the project root directory and component directories for displaying component help documentation externally.

Publishing the Project

When local debugging is all normal, run the following command to publish the project.

# Must be run in the project directory
momen publish
 
zvm cli 0.4.16
 
ℹ Publishing project
✔ Component information scanning completed
✔ Component parsing completed
✔ Project build completed
✔ Registering version information 0.0.2
ℹ Artifact upload started
ℹ   ConfirmModal-DkZp9JXU.js
ℹ   __federation_expose_Main-DxfqaaDF.js
ℹ   __federation_fn_import-lyDSGtOx.js
ℹ   __federation_shared_classnames-DNBU_3PZ.js
ℹ   __federation_shared_constate-BXZUjDp9.js
ℹ   __federation_shared_lodash-CMjxsLue.js
ℹ   __federation_shared_moment-CEY8C7XE.js
ℹ   __federation_shared_react-DO25RkNm.js
ℹ   __federation_shared_react-dom-ChyTJqHm.js
ℹ   __federation_shared_react-router-dom-BwChNopu.js
ℹ   __federation_shared_zvm-code-context-DJ2L4k_6.js
ℹ   _commonjsHelpers-BFTU3MAI.js
ℹ   index-BBIatVb0.js
ℹ   remoteEntry.js
ℹ   style-CLbg9otl.css
✔ Artifact upload completed
✔ Project publishing successful

If publishing fails, you can run momen publish --verbose to get more detailed information, ask AI or report errors in the community or user group.

After publishing, the new code component library will be available for configuration in any Momen project.

Using Code Components in Momen

1. Import code components in Momen project: Click the corresponding icon on the left sidebar - Add component, select the version and check to open.

2. Sync changes: After configuring or modifying a code component project, you must sync changes or publish to use it normally at runtime.

3. Use code component: Configure defined data and actions in the right sidebar.

4. Publish Momen project to see the effects.

CLI v0.4.16 Update Guide

To create a better code component development experience and prepare for the upcoming code component market, we updated CLI v0.4.16 on September 8, 2025, and deprecated all previous versions.

Update Content

1. Added standardized metadata support for component projects, including project descriptions, project demo addresses, etc.
2. Added resource file directory for customizing project and component icons and preview images
3. Added project and component-level README files for editing external project and component help documentation These are the foundation for you to publish, share, and discover high-quality components in the market in the future.

Developer Update Steps

Please all developers follow the steps below to complete the upgrade.

Step 1: Globally Update CLI Tool

All users need to perform this operation to ensure your CLI is the latest version. Please run the following command in Terminal:

npm i -g momen-cli

After executing the above command, execute the following command to ensure it has been updated to the latest version (0.4.16):

momen --help

Step 2: Upgrade Your Existing Projects

Based on your local development environment, please choose one of the following ways to upgrade your old projects:

Recommended Method (Git Installed)

If your computer has Git installed and the project code has been completely committed (no unsaved modifications), please execute:

1. Confirm through git status that local code is clean (no uncommitted modifications).
2. Execute command: In your project root directory, run the automatic upgrade command

momen update

3. Customize image resources and modify project metadata according to the format below

Manual Method (Git Not Installed)

If your computer does not have Git installed, or has uncommitted code changes, please follow these steps to manually upgrade:

1. Manually create a file named README.md in the project root directory.
2. Manually create a folder named resources in the project root directory. When creating new folders and resources, please strictly follow the following file naming conventions, do not modify file names, only support webp and svg formats.

- /resources/icon.webp: Component package icon, size 24x24
- /resources/ComponentName/icon.webp: Component icon, size 72x54
- /resources/ComponentName/canvas.webp: Component canvas preview, size 300x200

3. Open the package.json file and add the following fields:

{
"description": "Please fill in your project description here",
"homepage": "Please fill in your project preview address",
"category": "display",
"platforms": [
  "WEB"
]
}