> 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/architect/settings-panel.md).

# Settings Panel

Manage and customize all aspects of selected widgets or components from a centralized location. Adjust parameters such as layout, styling, interactions, and more to achieve your desired app aesthetics and functionality effortlessly. 

<figure><img src="/files/4oYOd0oeEO4PkMoAEqSP" alt="" width="375"><figcaption><p>Settings Panel</p></figcaption></figure>

The Settings Panel put to your disposal four key tools :&#x20;

* Basic parameters
* Generate children from variable
* Add Action
* Add Animation

## Basic Parameters

<figure><img src="/files/KwEZM8qmckJTQCmCtNGY" alt="" width="375"><figcaption><p>Basic Parameters</p></figcaption></figure>

It allows you to modify the parameters of you page or widget and see the result directly on the Application Preview.

## Generate Children From Variable

<figure><img src="/files/RujvfF7TkjoEKjLYccRB" alt="" width="375"><figcaption><p>Generate Children From Variable</p></figcaption></figure>

It allows you to generate children of a widget by taking in parameter a data source.

This data source can be anything such a a List of String, an observable ..

### ✨ Tips

There is two checkbox **List** and **Nullable** to fully customize the data source you want to use !

## Add Action

<figure><img src="/files/HHsJngrffBB4Hb0XjHZL" alt="" width="375"><figcaption><p>Add Action</p></figcaption></figure>

It allows you to add action to the concerned widget.

To fully understand the Action Flow Editor see [Action Flow Editor](/main-pages/action-flow-editor.md) page.

## Add Animation

<figure><img src="/files/4WwQK0ZBvAUmGRNd69sj" alt="" width="375"><figcaption><p>Add Animation</p></figcaption></figure>

It allows you to add animation to the concerned widget.

There is a large choice of animation you can choose when clicking on **Add Animation**.

<figure><img src="/files/lfmdTu82OjhS0Yr5qBDI" alt="" width="375"><figcaption><p>Animation choices</p></figcaption></figure>

<figure><img src="/files/9JGcSdHb0178TQZJb8Ms" alt="" width="375"><figcaption><p>Added Animation</p></figcaption></figure>

You can now click on the animation to deploy an inside settings panel to customize it.

<figure><img src="/files/KAD8L6hLNMIYcKxJ1zFl" alt="" width="375"><figcaption><p>Animation Settings</p></figcaption></figure>