---
url: "https://vueda.dev/v3/reference/theming/keys/WidgetJson.md"
title: "WidgetJson"
---

# WidgetJson

Source: `client/lib/theme/vueda-tailwind/widgets/index.js`

> Bordered control surface that mirrors textarea invalid and disabled states.

Vue component: [WidgetJson](/v3/reference/api/vue/WidgetJson.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/WidgetJson.md#theme-key-WidgetJson-root) | 5 classes | Bordered control surface that mirrors textarea invalid and disabled states. |
| [editor](/v3/reference/theming/keys/WidgetJson.md#theme-key-WidgetJson-editor) | `min-h-16 text-base md:text-sm` | The CodeMirror mount point. Only wrapper-level sizing and the base font size live here; the editor's internal selectors are styled by `widgetJsonCmTheme` below. |

<a id="theme-key-WidgetJson-root"></a>

## root

> Bordered control surface that mirrors textarea invalid and disabled states.

Default classes:

```text
overflow-hidden rounded-vueda-control hairline bg-transparent
transition-shadow
focus-within:hairline-ring focus-within:focus-ring-shadow
data-[invalid=true]:hairline-destructive data-[invalid=true]:focus-within:focus-ring-shadow-destructive
data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50
```

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetJson.theme.js:25`

<a id="theme-key-WidgetJson-editor"></a>

## editor

> The CodeMirror mount point. Only wrapper-level sizing and the base
font size live here; the editor's internal selectors are styled by
`widgetJsonCmTheme` below.

Default classes:

`min-h-16 text-base md:text-sm`

Source: `client/lib/theme/vueda-tailwind/widgets/WidgetJson.theme.js:39`