# Extension declaration

Learn more about the Extension Declaration, which is an object describing the extension, its capabilities and configuration options.

The Extension Declaration is an object describing the extension, its capabilities and configuration options.

When registering a new extension, Hygraph will load and validate this declaration and use it to build the configurations forms.

## General declaration properties

All extension declarations share the following properties:

| Key             | Type                                            | Description                                                               |
| --------------- | ----------------------------------------------- | ------------------------------------------------------------------------- |
| `extensionType` | Enum(`field`, `formSidebar`) (required)         | The type of extension. Currently only `field` is supported                |
| `name`          | `String` (required)                             | Display name for the Extension.                                           |
| `description`   | `String`                                        | Optional description.                                                     |
| `config`        | [`ConfigOptionsDefinition`](#config-properties) | Optional definition of _global_ configuration options for this extension. |

**Note:**

Additional declaration properties are available for each extension type. For
field extension declaration properties in particular, see
[Field extension](https://hygraph.com/classic-docs/ui-extensions/field-extension/declaration).

In the example below, we initiate a declaration for a field extension:

```js
const declaration = {
  extensionType: 'field',
  name: 'Store item ID',
  description: 'Reference an item from our shop',

  // Field extension specific properties
  fieldType: 'STRING',
  features: ['FieldRenderer'],
};
```

## Config properties

You can use config properties to prompt the user when installing the plugin for additional settings that are made available to your UI extension.

| Key            | Type                                          |
| -------------- | --------------------------------------------- |
| `type`         | Enum(`string`, `number`,`boolean`) (required) |
| `displayName`  | `String`                                      |
| `description`  | `String`                                      |
| `required`     | `Boolean`                                     |
| `defaultValue` | `any`                                         |

In the example below we'll declare configuration for a `STORE_ID` and `ACCESS_TOKEN`.

```js
const declaration = {
  /*
    ... rest of the declaration
  */
  config: {
    STORE_ID: {
      type: 'string',
      displayName: 'Store ID',
      required: true,
    },
    ACCESS_TOKEN: {
      type: 'string',
      displayName: 'Store Access Token',
      description: 'API access token for this UI extension',
      required: true,
    },
    // ... rest of declaration props here
  },
};
```

When installing the above with the configuration, it would look something like:

![UI Extension Configuration](https://hygraph.com/images/classic-docs/ui-extensions/react-sdk/install-extension-with-config.png)

## Applying declaration changes

When changing your extension declaration, you need to refresh your extension settings in Hygraph and save the changes.

![Applying declaration changes](https://hygraph.com/images/classic-docs/ui-extensions/getting-started/declaration-changes.png)