> For the complete documentation index, see [llms.txt](https://docs.meeds.io/meeds-guides/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.meeds.io/meeds-guides/admin-guide/managing-sites-and-pages/managing-portlets/creating-gadgets.md).

# Creating Gadgets

Meeds lets you enhance your pages with Gadgets, which are blocks made of custom HTML, CSS, and JavaScript.

{% hint style="info" %}
This page applies to the **Business** and **Enterprise** plans.  [👉 Compare all plans](https://www.meeds.io/pricing)
{% endhint %}

They give you full flexibility to integrate interactive elements such as **animated marquees, token price widgets, third-party scripts, and dynamic user interactions**. These blocks can be **created, edited, and managed** directly within the platform, enabling a seamless customization experience.\
\
Check this quick video intro 👇

{% embed url="<https://youtu.be/6Hx3TMwjRQ8>" %}

### Creating a Gadget

<figure><img src="https://3823946396-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1i2FMkbhfl9LXQQfUyES%2Fuploads%2FrN3W9aRTnsdEMDrJenFG%2Fadd-gadget.png?alt=media&amp;token=361ecd89-ae89-4fef-898b-1d5bf54483f3" alt="" width="375"><figcaption></figcaption></figure>

To create a new **Gadget** in Meeds, follow these steps:

1. Open the **Admin Interface**.
2. Navigate to **Development → Portlet**.
3. Pick any category and click on the **Add** button.
4. Provide a **name** and a **description**.
5. Select **New Portlet** as the type.
6. Select the permissions and **Save**

👉 The [code editor](#the-code-editor) opens in a new tab

### The Code Editor

When you create or edit a Gadget, the Gadget Editor opens, which consists of three main sections:

* **HTML** : Enter the structure of your block.
* **CSS** : Define styles for your block.
* **JS**: Add Javascript code for interactivity and dynamic behavior.

The panels all  have **syntax highlighting,** **line numbers** for better readability and includecan **expand icon** that allows you to enlarge the editor for a more comfortable coding experience.

<figure><img src="https://3823946396-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1i2FMkbhfl9LXQQfUyES%2Fuploads%2Fmfj01Q20aryN6fMZroFL%2Fpreview-widget.png?alt=media&amp;token=f5c57107-e6f4-43ee-a09b-e84564145b1c" alt=""><figcaption></figcaption></figure>

#### Running & Previewing

* **Run button** : Executes the HTML, CSS, and JavaScript, allowing you to preview the result instantly.
* **Mobile & Desktop icon**: You can switch between different views to test responsiveness.
* **View/Edit toggle** : Allows you to see the gadget in the middle of the page, simulating its final appearance.

#### Saving & Applying Changes

* **Save Button**: Becomes active when changes are made and saves updates across all pages using the block.

💡 Once saved, the editor tab closes, and the changes are immediately applied where the block is used. If further modifications are needed, reopen the editor and manually update the content.

### Editing a Gadget

Gadgets can be edited in two ways:

#### Editing from the Admin Interface

<figure><img src="https://3823946396-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1i2FMkbhfl9LXQQfUyES%2Fuploads%2FLIBjtzZ2iDVC0c0V61Ss%2Fedit-gadget-admin.png?alt=media&amp;token=d678cc68-425d-49a5-a20a-bc1d29a6546f" alt=""><figcaption></figcaption></figure>

* All created gadgets can be found in **Administration → Development → Portlets**.
* To edit an existing gadget, browse in the category or search for it in the list and select **Edit Instance** to open the code editor.

💡 Changes made at the admin level are **reflected globally** across all pages using the gadget.

#### Editing from the Page Layout

Once a Gadget is added to a page, it can be edited **directly from the page layout**:

1. **Enable Edit Mode**

   * Navigate to the page where the block is used and click **Edit Navigation icon** ![](https://3823946396-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1i2FMkbhfl9LXQQfUyES%2Fuploads%2FjqzCdBr55scEnoalPzKh%2Fsite-navigation-icon.png?alt=media\&token=426424a8-0c9a-4293-a75a-cb70d08f8fb6)
   * In the page tree, on the current page, click on **Edit Layout**&#x20;
   * **Hover** over the block you want to edit, then click the Edit application

   <figure><img src="https://3823946396-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1i2FMkbhfl9LXQQfUyES%2Fuploads%2FW7Rga2g06KJTdr7JOQRl%2Fedit-drawer.png?alt=media&amp;token=61f00de5-57b9-4f1c-92dc-3e0b65ac1c2b" alt="" width="312"><figcaption></figcaption></figure>

   * In the drawer, click the Edit icon in the header 👉 a new tab will open with the gadget loaded in the  [code editor](#the-code-editor)&#x20;
   * Make necessary changes and **preview** instantly.
   * Once satisfied, save your changes.

💡 Updates are applied **instantly across all pages** where the block is used.

***

This feature allows you to **design and integrate custom components** easily, giving you greater control over your Meeds-powered pages. Start experimenting and bring your pages to life with dynamic content!