> 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/overview.md).

# New Component Guide Overview

For a one-time purpose, you may want to use the **function** component and combinations of other core components in the Apps Editor.

But it's a good idea to make some logic easily reusable and maybe earn decent money on selling components.

If you are familiar with JavaScript and TypeScript follow this tutorial to create a new component for the Applications Editor.

## Component Project Structure

When creating a new component project you get an **src** folder with three folders and two more **.json** files and **tsconfig.json** file in the root: 

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MX6cTyW4PnDvuCBEh3F%2F-MX6sNvlgPz5f5UV1wce%2Fnew%20project.png?alt=media\&token=af517420-ad0d-452a-8d20-6b8846c3d6b0)

* **tsconfig.json** - a configuration file as the project uses TypeScript.
* **components** - in this folder each component of the project has its subfolder. The template contains two example components: **example-uppercase** and **example-button**. 
* * [**component.js** ](/creators-studio/new-component-creation-tutorial/component.js.md)**-** a component logic file. In each component folder.
  * [**component.html**](/creators-studio/new-component-creation-tutorial/component.ht.md) - a component appearance settings file. In each component folder.
  * **icons** folder - for Apps Editor workspace appearance icons. In each component folder.
  * **UI** folder - with **.vue** and **styles.scss** files as Vue.js is used for UI components. In each UI component folder.
* [**Additional TypeScript modules**](/creators-studio/new-component-creation-tutorial/additional-ts.md) for composing UI components in Vue.js are in **shared** and **typings** folders. 
* [**config.json** ](/creators-studio/new-component-creation-tutorial/config-json.md)- a configuration file. Here the components are registered.

Plus the Apps Editor will add 

* [**app-component.json**](/creators-studio/new-component-creation-tutorial/app-component-json.md) **-** a file that allows you to test your component before releasing it.

If your project contains more than one component it should have a separate folder for each of them.  

![](https://3983587133-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LvAp4NFmv7Cj5kJvKjw%2F-MX72t9Wx_eS1mwx3JJe%2F-MX73GvQjiryFFVJen1y%2Fcomponents%20folders.png?alt=media\&token=057ccf0d-6e22-43d1-b87b-1c2a156fc4bc)

In each component\`s folder, there is a folder for an icon file. But you may have no need in the icon folder and file if you use Font Awesome pics (see [**Component Styling Guide**](/creators-studio/new-component-creation-tutorial/component-styling-guide.md)).

Before going deeper into the component project structure please, go through the [**Your First Component**](/creators-studio/new-component-creation-tutorial/your-first-component.md) guide.