> For the complete documentation index, see [llms.txt](https://docs.aitheon.com/creators-studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aitheon.com/creators-studio/new-component-creation-tutorial/your-first-component.md).

# Your First Component

Make a simple component to get acquainted with the flow. 

## Create a Project

Open Creators Studio and create a **New Project**. Give it a **name** and write a **summary**.  

![](/files/-MXGy8lP77WcUUc2ZKOX)

Then choose **My Component** from the list of projects and open in a **Basic** sandbox.  

![](/files/-MXGzJ1fYjICn0b8k1oH)

## Edit the Structure

Expand the my-component folder on the workspace and you will see the folder structure of the template project.   

![](/files/-MXH-sAbFrhK50r9NHHf)

We have two components here: a UI component (this is a simple **example-button** that sends input massage to output without changes) and a functional component (**example-uppercase** converts input string to uppercase).

Click **app-component.json** and you will see how these components look like and behave on the Apps Editor table and on UI preview.  

![](/files/-MXH0hP7dywMAoP-3LOW)

You see the flow: a UI **input-string** element that on the preview takes a string, then the UI **example-button** that sends this string to the **example-uppercase** (without UI), and the result goes to the UI **output**.

{% hint style="info" %}
Note: you can adjust the UI **Layouts** with the **EDIT WIDGECTS** button. Click **SAVE** after editing.
{% endhint %}

Rename the components' folders and files in subfolders to make the project clearer. Let it be **pass-button** and **lowercase** as far as we a going to save the button function (just to pass the message) and change the non-ui component function. Right-click on folders and files and rename them.  

![](/files/-MXH9MoUiUe-1nDjAOhI)

As you can see, we didn't change the icons file names. That's because we are going to replace them completely.

## Edit config.json

All the project structure is registered here.  

![](/files/-MXHAVgfbeqUSzlXFFOZ)

Update the folders and file names.  

![](/files/-MXHAaD2wPi-Gw6-z7p3)

## Edit component.js

The button will remain a **pass-button**, so we're not going to change its function in the **pass-button.js** file.

But we have to change the function of **example-uppercase** to make it **lowercase**.   

![](/files/-MXHC6KQOyyJOER7xmAx)

Change the **toUpperCase()** method to **toLowerCase()** first. Rename the **TemplateNode** function to **LowercaseComponent**. 

Then don't forget to change the name we use to register the project components in **config.js** from **example-uppercase** to **lowercase**.   

![](/files/-MXHCBC6VA4YjYYnPGUe)

And don't forget to update the **function** name, the **registerType** name, and the **name** value in the **control** object of **pass-button.js** as well.   

![](/files/-MXHDQdFJ3X-gUorCH3q)

{% hint style="info" %}
After updating the project's files you can test the result any time by pressing Apply Changes in the **app-component.json** file testing interface. Make sure you replaced obsolete **example-button** and **example-uppercase** on the workspace with updated components from the palette.
{% endhint %}

## Edit ui/component.vue and styles.scss

Apps Editor uses Vue.js to build UI components. 

We can change the behavior and appearance of **pass-button**'s UI in the **pass-button.vue** file.

The .vue file consists of three parts. We will not change 

```
<template> 
    <!-- all the markup structure and logic of the component -->
</template>    
```

and&#x20;

```
<script>
    // all of the non-display logic of the component
</script>
```

Change the color of **pass-button** in the **styles.scss** from **`#67b231`** to **blue** or any other you like.   &#x20;

![](/files/-MXHETEygCSa56Xum579)

## Edit component.html

Let's change the properties of components for Apps Builder.

### Main Definitions

In the first **`<script> </script>`** block change some definitions that are registered with the editor. &#x20;

![](/files/-MXHFW_uohi8EqYmzYqD)

* First, update the component registerType and label **(1)**. The label shows the component\`s name on the editor table.
* Change the component's category on the palette to **custom** (or any you want) **(2)**.
* Change the components color in the editor **(3)**. Since this is the function-like component, use the **#8c58e9** color for it.
* Change the icon **(4)** for the editor view. You can drag-and-drop your own icon file to the icon folder and use it. In this case, let's use [Font Awesome](https://fontawesome.com/v4.7.0/icons/) link for an icon. For example, **fa-arrow-down**.&#x20;
* At last, add the line **`paletteLabel: 'lowercase',`** (after the **`icon`** line, for example) **(5):** &#x20;

![](/files/-MXHGuPlydkAmyG0uXQ2)

{% hint style="info" %}
Open **app-component.json** and Apply Changes to check if everything is as expected.
{% endhint %}

And don't forget to make appropriate changes in **pass-button.html**.&#x20;

### Edit Template

When you double-click on a component on the workspace of Apps Editor you can change its properties. We can update this window's appearance in the second **`<script> </script>`** block.

Double-click on your lowercase component to view how it looks like in Apps Editor.  As we haven't updated the properties block yet (it's still referring to **example-uppercase**), here we see nothing.&#x20;

![](/files/-MXHKOorq-Rxmu5cudOG)

The entire properties appearance block must be named as the component **(4)**.

The first property is displayed with an icon **(2)**, property name **(3)**, and an input field with a placeholder **(4)**.&#x20;

Update **lowercase.html**:  &#x20;

![](/files/-MXHQxmSZH81SLwMO_Q4)

Update the name of the block **(1)** to match the registering name.

Change the icon **(2)** to **fa fa-check**, the property name **(3)** to **Label**, the placeholder **(4)** to **Type the Name here**. Then copy and past couple of `<div> </div>` blocks from the second **`<script> </script>`** part of **pass-button.html** just for fun.&#x20;

Don't forget to update the **data-template-name** value **(1)** in **pass-button.html** to match the registering name.

Apply changes. Check the **pass-button** component properties, then **lowercase** properties.

![](/files/-MXHTOdqbsxDkBaoGqnV)

{% hint style="info" %}
Note that the two new properties that we added are not functional. To make them functional you have to update the **Main Definitions** the **.js** file accordingly.
{% endhint %}

### Help Text

In the third **`<script> </script>`** block update the description of the component function and the block name. Our component lowers the characters.  &#x20;

![](/files/-MXHU1n-50K4Yn0E66pw)

The result will be:  &#x20;

![](/files/-MXHUpJm2zJ88Su387Aj)

{% hint style="info" %}
Don't forget about **pass-button** Help!
{% endhint %}

## Test the Component

A testing tool is embedded in the template. Click **app-component.json** to open the testing flow and UI previewer. After you changed the components' registering names the template components on the workspace are obsolete. Replace them with new **pass-button** and **lowercase** components (if you haven't done it yet), connect and set up them and click **Deploy**.&#x20;

Now you are able to test the components in the workspace and UI previewer.&#x20;

![](/files/-MVWxl-BXb-pAewjMWEc)

## Make a Release

### Make a Quick Release

When everything looks and works right we are ready to make a release and use the components in other projects. &#x20;

![](/files/-MXHX1DGkwYnRKCg2yPo)

Click **Quick Release (1)**, choose the project, and release it. After that open **Quick Release Status (2)** and wait till the status become **Completed**.&#x20;

{% hint style="info" %}
The Quick Release method gives the number and name to the release automatically. To do this manually make an ordinary **Release** with **Build** stage.&#x20;
{% endhint %}

### Create an App Project

To use the components open o create a new application project. Choose AOS Cloud Runtime and Dashboard type.&#x20;

![](/files/-MVX0QyHdXu7j2s45qx2)

Open this project and click **Install Component**.&#x20;

![](/files/-MVX1aemX9W8Wj_mUMlW)

Choose the **Project to install** and the **Release version**, then click **Install**. &#x20;

![](/files/-MXHY8Rzeja6stO_PNmf)

Reload the page and new components will appear on the palette.  &#x20;

![](/files/-MXHYlTZqA1g0RA0Y_sl)

## Put it to the Marketplace

The components are available for you to use in any app project. To share them with other organizations publish them on the Marketplace. View [**this tutorial**](/creators-studio/publish-an-app.md).

{% hint style="info" %}
But please don't publish this particular project on the Marketplace. Make a new valuable one first.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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.aitheon.com/creators-studio/new-component-creation-tutorial/your-first-component.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.