# Adding a Widget

To start, right click on an empty area of the board, and select “widget”.

<figure><img src="/files/ViM7eBTT1PJ9y5TnqId2" alt=""><figcaption></figcaption></figure>

### Widget Editor Mode

Right click on the newly created widget, and choose the option for “Open Editor” This will switch to the Widget Editor mode where you can create your own widget

<figure><img src="/files/XifngeMctBAH4JBUN6ji" alt=""><figcaption></figcaption></figure>

When you have switched over to the Widget Editor mode, the top menu bar of the board window changes.&#x20;

<figure><img src="/files/fTIr5LBtqo3UrqiJspom" alt=""><figcaption></figcaption></figure>

It is possible to change the size of the overall widget.&#x20;

One of the method is by dragging the bottom right corner of the widget.&#x20;

<figure><img src="/files/TezB64jFqSgXqIkhZaT6" alt=""><figcaption></figcaption></figure>

The other method is to go into the inspector and directly enter the size under the `layout` container.

<figure><img src="/files/Eb5j7ifUggOIyMzcxtWK" alt=""><figcaption></figcaption></figure>

After defining the overall size of the widget, you can now create your own design by adding different interfaces into your widget.

Please go to the [Interface](/grid/widget-creation/creating-your-own-widgets/adding-interfaces.md) section to find out more about how to add interface and the different types of interfaces available.

After you have designed all of the interface elements of your widget, you can add [Data Sources](/grid/widget-creation/creating-your-own-widgets/adding-data-source/data-source.md) to connect the widget to a parameter or other parts of your project.&#x20;


---

# Agent Instructions: 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://stage-precision.gitbook.io/grid/widget-creation/creating-your-own-widgets/adding-a-widget.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.