> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lynxhub.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Module quick start

> Build and run a basic LynxHub card module in minutes.

LynxHub card modules represent standalone features or tools shown as **cards** on the dashboard. Unlike extensions, modules run isolated CLI scripts, backend commands, and custom installation wizards.

Follow this guide to create and test a simple card module.

***

## Clone the starter template

To start developing quickly, first clone the host LynxHub application repository and navigate to its root folder. Then, clone the `source` branch of the official [LynxHub Module Template](https://github.com/KindaBrazy/LynxHub-Module-Template) directly into the `module` folder:

```bash theme={null}
# Clone the host application
git clone https://github.com/KindaBrazy/LynxHub
cd LynxHub

# Clone the card module template source branch into the /module directory
git clone -b source https://github.com/KindaBrazy/LynxHub-Module-Template module
```

This sets up the following folder structure:

```
module/
├── rollup.config.mjs  # Bundler configuration
├── tsconfig.json      # TypeScript compiler configuration
├── package.json       # Identity and Node.js module configuration
└── src/
    ├── main.ts        # Main process backend entrypoint
    ├── renderer.ts    # Renderer process UI entrypoint
    ├── Constants.ts   # Shared constants (such as card ID)
    ├── ComfyUI/       # ComfyUI-specific implementation (arguments, methods)
    └── Utils/         # Useful starter helper utilities
```

The template provides a fully working implementation of a **ComfyUI** card module. Under the `src/Utils/` folder, you will find starter utilities for process checks, Python/environment discovery, NPM package installation, and renderer installation/updating steppers.

***

## Define package configuration

Open the `package.json` file at the root of your `module` folder and customize your card module's name, author information, and repository links.

```json theme={null}
{
  "name": "lynxhub-module-template",
  "version": "1.0.0",
  "author": {
    "name": "Your Name",
    "url": "https://github.com/your-username"
  },
  "homepage": "https://github.com/your-username/lynxhub-module-template",
  "repository": "https://github.com/your-username/lynxhub-module-template",
  "type": "module",
  "dependencies": {
    "which": "^7.0.0"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^29.0.3",
    "@rollup/plugin-json": "^6.1.0",
    "@rollup/plugin-node-resolve": "^16.0.3",
    "@rollup/plugin-typescript": "^12.3.0",
    "@types/which": "^3.0.4",
    "rimraf": "^6.1.3",
    "rollup": "^4.62.2",
    "tslib": "^2.8.1"
  }
}
```

<Note>
  Card module metadata (`metadata.json`) and release version history (`versioning.json`) must be placed in a dedicated `metadata` branch of your repository. They are not
  stored in the `source` branch. For more details, see the [Module configuration](/plugins/modules/configuration) and [Publishing modules](/plugins/modules/publish)
  guides.
</Note>

***

## Implement the main process

Open the `src/main.ts` file. This file registers the backend lifecycle methods of your module. The template uses a helper module `Comfy_MM` to specify commands and checks.

```typescript theme={null}
import {MainModules, MainModuleUtils} from '../../src/common/types/plugins/modules';
import Comfy_MM from './ComfyUI/MainMethods';
import {COMFYUI_ID} from './Constants';

export default async function initialModule(utils: MainModuleUtils): Promise<MainModules[]> {
  return [{id: COMFYUI_ID, methods: () => Comfy_MM(utils)}];
}
```

***

## Implement the renderer process

Open the `src/renderer.ts` file. This file defines the metadata, settings, arguments, and installation wizards for the user interface.

```typescript theme={null}
import {CardModules} from '../../src/common/types/plugins/modules';
import comfyuiArguments from './ComfyUI/Arguments';
import COMFYUI_RM from './ComfyUI/RendererMethods';
import {COMFYUI_ID} from './Constants';

const rendererModules: CardModules = [
  {
    routePath: 'imageGen_page',
    cards: [
      {
        id: COMFYUI_ID,
        title: 'ComfyUI',
        description: 'This ui will let you design and execute advanced stable diffusion pipelines' + ' using a graph/nodes/flowchart based interface.',
        repoUrl: 'https://github.com/comfyanonymous/ComfyUI',
        type: 'image',
        supportCustomArguments: true,
        arguments: comfyuiArguments,
        methods: COMFYUI_RM,
        installationType: 'git',
      },
    ],
  },
];

export default rendererModules;
```

***

## Run and test locally

Start the LynxHub host application in development mode:

```bash theme={null}
npm run dev
```

The host application automatically detects the `/module` directory and imports your card definitions. In this template, the ComfyUI card is registered under the **Image Generation** category.

* Locate the **ComfyUI** card on the dashboard.
* Click the launch button to test execution.
* A terminal tab will boot up automatically and run your configured run commands.
* Run typecheck validation scripts to verify code health:
  ```bash theme={null}
  npm run typecheck
  ```