---
product: "AG Studio"
title: "Widgets Overview"
description: "Widgets are the building blocks of a report. AG Studio ships a set of widgets covering tables, charts, values, filters and static content, and offers three levels of control over them."
framework: vue
version: "3.0.0"
related:
    - title: "Configuring Widgets"
      url: "https://www.ag-grid.com/studio/vue/widget-configuration/"
    - title: "Custom Widgets"
      url: "https://www.ag-grid.com/studio/vue/custom-widgets/"
    - title: "Form Configuration"
      url: "https://www.ag-grid.com/studio/vue/custom-widgets-form/"
llms: "https://www.ag-grid.com/studio/llms.txt"
---

# Widgets Overview

Widgets are the building blocks of a report. AG Studio ships a set of widgets covering tables, charts, values, filters and static content, and offers three levels of control over them.

- **[Configuring Widgets](https://www.ag-grid.com/studio/vue/widget-configuration/)** - choose which widgets are available and how they are grouped in the widget selector, and change how an individual widget is labelled, configured, rendered and actioned.
- **[Custom Widgets](https://www.ag-grid.com/studio/vue/custom-widgets/)** - add a widget type of your own when the built-in widgets do not meet your requirements.

The form shown in the Edit Panel is configured the same way for built-in and custom widgets. See [Form Configuration](https://www.ag-grid.com/studio/vue/custom-widgets-form/) for the form items and helpers available.

## Widget Configuration API

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `widgets` | `AgWidgetsConfig<TRegistry> \| ((widgets: AgWidgetsConfig<AgDefaultRegistry>) => AgWidgetsConfig<TRegistry>)` |  | Configure widgets: - Add custom widgets - Override provided widgets - Change displayed widgets - Change default widget type when dragging fields |

Widget configuration is set using the `widgets` property. The easiest way to provide configuration is using the `createWidgets(params)` helper function, where `params` are of type `AgCreateWidgetsParams`:

Import `createWidgets` from `ag-studio-vue3` rather than `ag-studio`, so that the Vue-specific widget defaults are applied.

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| `menu` | `AgWidgetMenuGroup<TRegistry>[]` |  | Configures the widget menu that is displayed in the widgets tab in the edit panel, and the widget selection input. |
| `overrides` | `ExtractOverride<AgWidgetRegistry<TRegistry>>[]` |  | Overrides to the default widgets. |
| `defaultType` | `AgWidgetType<TRegistry>` |  | The default widget type created when dragging fields into the layout. |