# Modules

A **module** is a powerful tool that enables the creation of fully fledged applications that can be later reused across other applications within your workspace. It serves as a time-saving solution for complex blocks of logic that need to be reused in multiple applications. 

A module is created as a separate application, and it can seamlessly communicate with a parent application, sending and receiving events.

## Creating a module

You can create a module from the Workspace dashboard - scroll down to the *Library* section, click the **+ button** and select **Module**.

A new window will open where you should give your module a meaningful name that will be used further in development, and confirm the creation. The newly created module will be added to the *Library* which contains all your modules as well as custom components.

<figure><img src="/files/ByhG0prEhAdJgkUPpMjv" alt=""><figcaption></figcaption></figure>

From the Library, you can access the module's **settings** to modify the *name* or activate *Public* *mode*. Public mode makes the module available to unauthorised users, which is necessary if the module is used in a public app.

<figure><img src="/files/eryYWcggtgnHaHm3DS51" alt=""><figcaption></figcaption></figure>

## Working with a module

The Builder interface for modules differs from the one used for applications. Unlike applications, modules don’t have pages or render settings. Instead of the `body,` modules have a `moduleContainer`  component which acts as the host for module content. \
The module container's width is customizable. You can set a default width for all modules, which can then be adjusted individually for each instance.

<figure><img src="/files/iF2UZJlDIan9YhrLQ1ri" alt=""><figcaption></figcaption></figure>

You can drag components into the module container, define custom logic for your actions, and integrate third-party libraries as needed. \
Once you are done developing a module, you can [release your changes](/build-from-scratch/getting-started/deploy-your-application-and-invite-users.md#deploying-an-app) to Staging and/or Production, publish a [Draft release](/concepts/workspace-management/app-environments/release-management.md#creating-a-draft-release), as well as [revert to an older version](/concepts/workspace-management/app-environments/release-management.md#restoring-a-release-version) from the Release history.

{% hint style="info" %}
Users can access modules based on their permissions. You can assign permissions to modules just like for regular applications.
{% endhint %}

## Using a module inside an app

Once you've developed and released your module, you can use it inside any of your applications. To **add a module to an app**, follow these steps:

1. Open the app you need and navigate to the **Library** subtab (of the *Components* tab) in the left side panel.
2. Select the module you want to use and drag it into the working area.&#x20;

{% hint style="info" %}
You will notice that unlike regular components that are highlighted in <mark style="color:blue;">blue</mark>, the whole module is highlighted in <mark style="color:green;">green</mark>.
{% endhint %}

3. Click the **Edit module** button in the right side panel to make changes to the module. \
   You will be redirected to a new page where you can make the necessary changes, release them, and get back to the application.
4. Click the **Reload** button in the right side panel to refresh the changes in the module.

{% @arcade/embed flowId="gIp5DuAvlri9bIPWiURu" url="<https://app.arcade.software/share/gIp5DuAvlri9bIPWiURu>" %}

## Communicating with an app

In this section, we'll review two ways of communicating with an app via a module - sending data from the app to the module and vice versa.

### Sending data from an app to a module

You can send the data to a module by calling the `{{ui.module.setData({userId:1})}}` method. Alternatively, you can also set the module data in its **Data** field.

<figure><img src="/files/63LQbgiztkCe1yCeKlfn" alt=""><figcaption></figcaption></figure>

Then, in the module, you can also subscribe to the **On Data** trigger with the last received value accessible in the `{{module.data}}` variable.

<figure><img src="/files/sADwPCoas40WZkwRJayv" alt=""><figcaption></figcaption></figure>

### Sending data from a module to an app

To send the data from a module to an app, you can call the `{{module.triggerEvent({data:'from module'})}}` method from any module's code step.

<figure><img src="/files/cum9U65OSIb3tcyJoX4G" alt=""><figcaption></figcaption></figure>

Then, in the app, you can subscribe to the module's **On Event** trigger, with the last received value accessible in the `{{ui.module.value}}` variable.

<figure><img src="/files/9qaZEuB3oEOeuTnLy1WY" alt=""><figcaption></figcaption></figure>


---

# 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.uibakery.io/concepts/modules.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.