> For the complete documentation index, see [llms.txt](https://docs.goril.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.goril.app/main-pages/custom-code/custom-widgets.md).
# Custom Widgets
## Creating a Custom Widget
In order to create a **Custom Widget** follow the next steps :
* Click on the **Add** button and select **Widgets** in the opened list
* Set the **Name** of your widget on the right properties panel
* Add a **Tag** to group your custom widgets
* Add any **Parameters** you need
* Write your code in the central editor
* Save by clicking on the top right button **Save**
Creation of a Custom Widget
## Use a Custom Widget
In order to use a **Custom Widget** :
* Select the last tab in the **Toolbox** section
* Drag and drop your **Widget** where you want in the **Explorer**
Example of use of a Custom Widget
{% hint style="info" %}
Custom Widget cannot be previewed but an insert with a different background color shows you the size and location of your widget
{% endhint %}
Example of Application Preview in Goril.App
{% hint style="info" %}
When you'll run your app in a real device or a simulator, you'll be able to see your widget in action !
{% endhint %}