# What is a Component?

A component is a self-contained, reusable building block that can be added to a page in the Elements app. It encapsulates its own layout (templates), configuration options (properties), and logic (hooks). Each component lives in its own folder within an Element Pack and follows a strictly defined structure.

### Folder Structure Overview

Each component is self-contained: all templates, assets, and logic should live within a single folder. You should use a reverse domain name (e.g., `com.companyname.componentname`) as the component directory name.

```
components/
├── com.companyname.slideshow/
│   ├── info.json
│   ├── properties.json
│   ├── properties.config.json
│   ├── hooks.js
│   ├── hooks.source.js
│   ├── icon.pdf
│   ├── icon-dark.pdf
│   ├── paletteIcon.pdf
│   ├── paletteIcon-dark.pdf
│   ├── collections/
│   │   └── *.json
│   ├── templates/
│   │   ├── index.html
│   │   ├── backend/
│   │   ├── pageStart/
│   │   ├── pageEnd/
│   │   ├── bodyStart/
│   │   ├── bodyEnd/
│   │   ├── includes/
│   │   ├── *.html
│   │   ├── *.php
│   │   ├── *.css
│   │   └── *.js
│   └── assets/
├── com.companyname.navbar/
│   └── ...
└── shared/
    ├── assets/
    └── templates/
```

### Component File Breakdown

Below is a detailed breakdown of the files that make up a component and how they function together.

#### [info.json](/elements-docs/elements-language/component/info-json.md) (required)

The "manifest" file that defines the component's metadata, such as its unique identifier, title, author, group, and icons. It tells Elements how to identify and display the component in the UI.

#### [properties.json](/elements-docs/elements-language/component/properties-json.md) (required)

Defines the configurable options (controls) that users see in the inspector when using the component. This file maps user settings to values that can be used in templates and hooks.

#### [properties.config.json](/elements-docs/elements-language/dev-resources/build-tools.md#controls-in-propertiesconfigjson) (optional)

Used in conjunction with [Build Tools](/elements-docs/elements-language/dev-resources/build-tools.md) to simplify property definitions. It allows you to use `globalControl` references to include standardized UI controls (like spacing, sizing, or background) without redefining them in every component.

#### [hooks.js](/elements-docs/elements-language/component/hooks.js.md)

A JavaScript file where you can define logic, data handling, or custom behavior for the component. It runs during the build process and can manipulate data before it's passed to the templates.

#### [hooks.source.js](/elements-docs/elements-language/dev-resources/build-tools.md#shared-hooks-in-hookssourcejs) (optional)

The source JavaScript file used by [Build Tools](/elements-docs/elements-language/dev-resources/build-tools.md) to generate the final `hooks.js`. This is often used when you want to use modern JavaScript features or shared utility functions.

#### [icon.pdf, icon-dark.pdf, paletteIcon.pdf, paletteIcon-dark.pdf](/elements-docs/elements-language/component/icons.md)

The visual representation of the component. `icon.pdf` is the main icon, while `paletteIcon.pdf` is used specifically in the component palette. Dark mode versions are provided for better visibility in different UI themes.

#### [collections/](/elements-docs/elements-language/component/collections.md)

Contains JSON files that define structured data groups or sub-items for the component. For example, an accordion component might have a collection of items, each with its own title and content.

#### [templates/](/elements-docs/elements-language/component/language.md)

Contains the files that define how the component is rendered. All files in this folder are processed using the [Elements Template Language](/elements-docs/elements-language/component/language.md).

* **index.html**: Usually the main entry point for the component's HTML output.
* **\*.html / \*.php**: The component's markup. Files are processed, concatenated, and added to the page.
* **\*.css**: All CSS files are processed, concatenated, and added to the page's stylesheet during publishing.
* **\*.js**: All JavaScript files are processed, concatenated, and added to the page's script file during publishing.
* [**includes/**](/elements-docs/elements-language/component/language/include.md): Sub-templates that can be reused across multiple templates using the `@include` directive.
* [**headStart/, headEnd/, bodyStart/, bodyEnd/, pageStart/, pageEnd/**](/elements-docs/elements-language/component/templates.md): Templates in these folders are automatically injected into specific regions of the final HTML document.
* [**backend/**](/elements-docs/elements-language/component/templates/backend.md): Files that should be deployed to the server but are not directly included in the page (e.g., PHP processing scripts).

#### [assets/](/elements-docs/elements-language/component/assets.md)

Contains supporting files like images, raw CSS, or static JavaScript that should **not** be processed by the Elements template language. These files are copied as-is to the exported project.


---

# 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.realmacsoftware.com/elements-docs/elements-language/component/components.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.