> 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**.
Then choose **My Component** from the list of projects and open in a **Basic** sandbox.
## Edit the Structure
Expand the my-component folder on the workspace and you will see the folder structure of the template project.
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.
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.
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.
Update the folders and file names.
## 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**.
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**.
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.
{% 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
```
```
and
```
```
Change the color of **pass-button** in the **styles.scss** from **`#67b231`** to **blue** or any other you like.
## Edit component.html
Let's change the properties of components for Apps Builder.
### Main Definitions
In the first **``** block change some definitions that are registered with the editor.
* 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**.
* At last, add the line **`paletteLabel: 'lowercase',`** (after the **`icon`** line, for example) **(5):**
{% 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**.
### 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 **``** 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.
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)**.
Update **lowercase.html**:
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 `
` blocks from the second **``** part of **pass-button.html** just for fun.
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.
{% 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 **``** block update the description of the component function and the block name. Our component lowers the characters.
The result will be:
{% 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**.
Now you are able to test the components in the workspace and UI previewer.
## 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.
Click **Quick Release (1)**, choose the project, and release it. After that open **Quick Release Status (2)** and wait till the status become **Completed**.
{% 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.
{% endhint %}
### Create an App Project
To use the components open o create a new application project. Choose AOS Cloud Runtime and Dashboard type.
Open this project and click **Install Component**.
Choose the **Project to install** and the **Release version**, then click **Install**.
Reload the page and new components will appear on the palette.
## 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 %}