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

# Naming Layers

> How to name layers in Moda for better semantic output from the MCP server.

The Moda MCP server's transformer uses layer names to determine what each element represents. Well-named layers produce better semantic tags, which leads to better generated code.

## How it works

When a layer has a descriptive name, the transformer matches it against a keyword list and assigns the appropriate semantic tag. Layer names take priority over visual heuristics.

For example:

* A rectangle named `cta-button` becomes `<Button>` instead of `<Box>`
* A group named `nav-bar` becomes `<Nav>` instead of `<Section>`
* An image named `user-avatar` becomes `<Avatar>` instead of `<Image>`

## Keyword reference

These keywords in layer names trigger specific semantic tags. Keywords are case-insensitive and can appear anywhere in the name (e.g., `hero-section`, `main-hero`, `my_hero`).

### Interactive elements

| Keywords                                    | Semantic tag | Example layer names                             |
| ------------------------------------------- | ------------ | ----------------------------------------------- |
| `button`, `btn`, `cta`                      | `Button`     | `submit-btn`, `cta-button`, `primary-cta`       |
| `input`, `field`, `textfield`, `text-input` | `TextInput`  | `email-input`, `search-field`, `name-textfield` |
| `link`                                      | `Link`       | `nav-link`, `footer-link`                       |
| `checkbox`, `check`                         | `Checkbox`   | `agree-checkbox`, `terms-check`                 |
| `radio`                                     | `Radio`      | `plan-radio`, `option-radio`                    |
| `toggle`, `switch`                          | `Toggle`     | `dark-mode-toggle`, `notifications-switch`      |
| `dropdown`, `select`                        | `Select`     | `country-dropdown`, `role-select`               |

### Layout elements

| Keywords                      | Semantic tag | Example layer names                   |
| ----------------------------- | ------------ | ------------------------------------- |
| `card`                        | `Card`       | `product-card`, `testimonial-card`    |
| `section`                     | `Section`    | `hero-section`, `features-section`    |
| `header`                      | `Header`     | `page-header`, `card-header`          |
| `footer`                      | `Footer`     | `page-footer`, `card-footer`          |
| `nav`, `navbar`, `navigation` | `Nav`        | `main-nav`, `sidebar-nav`             |
| `sidebar`                     | `Sidebar`    | `left-sidebar`, `filter-sidebar`      |
| `modal`, `dialog`             | `Modal`      | `confirm-modal`, `settings-dialog`    |
| `hero`                        | `Hero`       | `homepage-hero`, `hero-banner`        |
| `banner`                      | `Banner`     | `promo-banner`, `notification-banner` |

### Content elements

| Keywords               | Semantic tag | Example layer names                  |
| ---------------------- | ------------ | ------------------------------------ |
| `avatar`               | `Avatar`     | `user-avatar`, `profile-avatar`      |
| `badge`                | `Badge`      | `status-badge`, `notification-badge` |
| `tag`, `chip`          | `Tag`        | `category-tag`, `filter-chip`        |
| `icon`                 | `Icon`       | `search-icon`, `close-icon`          |
| `logo`                 | `Image`      | `company-logo`, `brand-logo`         |
| `divider`, `separator` | `Divider`    | `section-divider`, `menu-separator`  |
| `list`                 | `List`       | `feature-list`, `menu-list`          |
| `table`                | `Table`      | `pricing-table`, `data-table`        |

## Naming conventions

Any naming convention works — the transformer matches keywords regardless of format:

* `kebab-case`: `hero-section`, `cta-button`
* `camelCase`: `heroSection`, `ctaButton`
* `snake_case`: `hero_section`, `cta_button`
* `PascalCase`: `HeroSection`, `CtaButton`
* Space-separated: `Hero Section`, `CTA Button`

## What happens without names

When layers don't have descriptive names (e.g., `Rectangle 1`, `Group 3`), the transformer falls back to visual heuristics:

* Text with large font size → `Heading`
* Rectangle with text and dark fill → `Button`
* Rectangle with thin border and no text → `TextInput`
* Small circular image → `Avatar`
* Group with background → `Card`

These heuristics work well for common patterns, but explicit layer names produce more accurate results, especially for non-obvious elements.

## Tips

* **Name layers that aren't visually obvious** — A subtle text link or a custom checkbox benefits most from naming
* **Use semantic names, not visual descriptions** — `submit-button` is better than `blue-rectangle`
* **Name groups and sections** — Group-level names like `features-section` improve the structure of the generated code
* **Be consistent** — Pick a naming convention and stick with it across your canvas