> ## 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.

# Renderer frontend overview

> Understand the configuration and API environment of the LynxHub module frontend.

Modules define card visuals, launch configurations, and installer wizards. They run in the Chromium renderer process.

Unlike extensions (which allow you to write custom React views and styling), modules are purely configuration-driven. The host application manages all layout, visual styling, rendering, and global state (using its internal React, Tailwind, HeroUI, Redux, and Zustand architectures).

You do **not** write React components, handle styling, or interact with state stores directly. Instead, you declare card definitions, argument schemas, and lifecycle steps, and invoke host-provided APIs to coordinate wizard views or update settings.

***

## Entrypoint configuration

Your module frontend must build into `scripts/renderer.mjs` as an ES module. The host application imports it during startup using a custom local protocol.

Your entrypoint file must export a default array matching the `CardModules` structure:

```typescript theme={null}
import {CardModules} from '../../src/common/types/plugins/modules';

const rendererModules: CardModules = [
  // Page configuration and card definitions
];

export default rendererModules;
```

***

## Page routing placement

The default export array groups cards by their destination dashboard page route. Set `routePath` to one of the following available page IDs to specify where the card appears:

| Page ID (`routePath`) | Destination dashboard section |
| :-------------------- | :---------------------------- |
| `home_page`           | **Home** dashboard            |
| `imageGen_page`       | **Image Generation** category |
| `textGen_page`        | **Text Generation** category  |
| `audioGen_page`       | **Audio Generation** category |
| `tools_page`          | **Tools** category            |
| `games_page`          | **Games** category            |
| `agents_page`         | **Agents** category           |
| `others_page`         | **Others** category           |
| `dashboard_page`      | **Dashboard**                 |
| `plugins_page`        | **Plugins** management page   |
| `settings_page`       | **Settings** panel            |