# Editor Mode

The **Editor Mode** is where you adjust what the AI generated. Use for specific changes in the **backend**. Also use to understand the **frontend scaffold**.

### Prerequisites

* You have edit permission on the project.
* Your app opens in the **Preview**.

{% hint style="info" %}
Use Editor Mode for “surgical” adjustments. For large generation, prefer Chat AI.
{% endhint %}

### Typical flow

{% stepper %}
{% step %}

### Adjust module and menus

* Review the module card on the Home.
* Review menus and URL Path.
  {% endstep %}

{% step %}

### Create/adjust components (entities)

* Set name, module and display name.
* Connect scripts to component events.
  {% endstep %}

{% step %}

### Model fields and relationships

* Create fields and constraints (required, unique).
* Configure 1-N and N-N.
  {% endstep %}

{% step %}

### (Optional) Create queries

* Save queries to reuse in lists and reports.
  {% endstep %}

{% step %}

### Create reports and dashboards

* Use the visual editor to build reports and dashboards.
  {% endstep %}
  {% endstepper %}

### Backend

#### Modules

You can **add, edit and remove** modules.

In the module registration, you configure:

* **Module Name**
* **Icon**
* **Description**
* **Display Name Translations** (display name per language)

The **Display Name** appears in the **Home** as a module card.

Common languages in translations:

* `en` (English)
* `de` (German)
* `es` (Spanish)
* `fr` (French)
* `it` (Italian)
* `zh` (Chinese)
* `ja` (Japanese)
* `pt-BR` (Portuguese Brazil)
* `pt-PT` (Portuguese Portugal)

**Module menus**

Inside the module, you can register menus. Each menu has:

* **Name**
* **URL Path**
* **Icon**
* **Display Name Translations**

{% hint style="warning" %}
Changing **URL Path** can break existing links. Test the flow in Preview.
{% endhint %}

#### Components (entities)

A **Component** in Madrix is an entity. It represents a **table in the database** and can have **scripts** associated.

You can **add, edit and remove** components. In the component registration, you configure:

* **Name** (use lowercase)
* **Description**
* **Module**
* **Display Name Translations**
* Scripts per event:
  * **Before Insert**
  * **After Insert**
  * **Before Update**
  * **After Update**
  * **Before Delete**
  * **After Delete**

When saving a component, the system may ask:

* **Create frontend files**
* **Create menu automatically**
* **Menu icon**

#### Database

**Fields**

You can **add, edit and remove** component fields.

Each field usually has:

* **Name**
* **Type**
* Flag **Required**
* **Width in grid** (runtime)
* Flag **Unique** (do not allow duplicates)
* **Display Name Translations**

Field types:

* `String`
* `Boolean`
* `Date` (sets format)
* `Datetime` (sets format)
* `Decimal` (decimal places; currency flag)
* `Integer`
* `Picklist` (list of options)
* `Component` (relationship with another component)
* `User`
* `Attachments`
* `Text`

Examples:

* `Picklist`: **Priority** = `High | Medium | Low`
* `Decimal` as currency: check **Currency** and set the decimal places

**Field `Component` (relationship)**

In the relationship, you configure:

* the **related component**
* if it is **1-N** or **N-N** (multiple values)
* which field of the related is the **Display Field**
* the flag **deleteCascade**

`deleteCascade` defines whether, when removing a “parent” record, the system removes relations in cascade.

Example:

* `ServiceOrder`
* `ServiceOrderItem` with a field `serviceOrder` (type `Component`)
* with `deleteCascade = true`, when deleting the SO, deletes the related items

{% hint style="danger" %}
Use `deleteCascade` be careful. It can delete data in bulk.
{% endhint %}

**Queries**

You can **add, edit and remove** queries on the component table. Use to standardize filters and reuse listings.

#### Scripts (Python)

You can **add, edit and remove** Python scripts. Use for backend business rules, tied to component events.

#### Dashboards and reports

You can **add, edit and remove** reports and dashboards in the visual editor.

<details>

<summary>Visual editor training</summary>

Video content (coming soon).

</details>

### Frontend (generated structure)

When you check **Create frontend files**, Madrix creates the base frontend structure. It works as a scaffold for screens, routes and theme.

<details>

<summary>Folder structure (summary)</summary>

* Public folder
  * `favicon.ico`
* Private folder
  * `components/`
    * `background/` (`background.tsx`, `classes.ts`, `index.ts`)
    * `forms/`
      * `{{component_name_form.tsx}}` (one form per component)
  * `layouts/`
  * `pages/`
    * `protected/`
      * `Home/`
      * `{module}/`
        * `components/` (create/edit/list screens)
        * `kanban-view/`
        * `reports/`
    * `public/`
      * `login/index.tsx`
  * `routes/`
  * `schemas/`
  * `settings/`
  * `theme/`
  * `app.tsx`
  * `global-config.ts`
  * `global.css`
  * `main.tsx`
  * `vite-env.d.ts`
  * `sads/`
* Files at the root
  * `bun.lock`
  * `index.html`
  * `vercel.json`
  * Files marked as **locked** (do not edit):
    * `bunfig.toml`
    * `package.json`
    * `tsconfig.json`
    * `tsconfig.node.json`
    * `vite.config.ts`

</details>

{% hint style="info" %}
File **locked** is managed by the platform.&#x20;
{% endhint %}

### Talk about Updating Madrix Core


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.madrix.dev/documentation/editor-mode.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.