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

# WidgetPreviewableTemplate

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

> The root adds no chrome so the surrounding form section owns spacing.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/WidgetPreviewableTemplate.md#theme-key-WidgetPreviewableTemplate-root) |  | The root adds no chrome so the surrounding form section owns spacing. |
| [title](/v3/reference/theming/keys/WidgetPreviewableTemplate.md#theme-key-WidgetPreviewableTemplate-title) | `text-neutral-900 dark:text-white` | The title uses foreground text for the previewable template heading. |
| [inner](/v3/reference/theming/keys/WidgetPreviewableTemplate.md#theme-key-WidgetPreviewableTemplate-inner) | `grid lg:grid-cols-2 gap-2` | The inner grid places editor and preview side by side on wide screens. |
| [editorWrapper](/v3/reference/theming/keys/WidgetPreviewableTemplate.md#theme-key-WidgetPreviewableTemplate-editorWrapper) | `flex flex-col gap-2` | The editor wrapper stacks editing controls with a small gap. |
| [preview](/v3/reference/theming/keys/WidgetPreviewableTemplate.md#theme-key-WidgetPreviewableTemplate-preview) | `prose max-w-full flex flex-col row-start-2 row-end-3 col-start-1 col-end-3` | The preview pane uses prose defaults while spanning below the label row. |
| [label](/v3/reference/theming/keys/WidgetPreviewableTemplate.md#theme-key-WidgetPreviewableTemplate-label) | 2 classes | The preview label matches widget label color and line height for alignment. |
| [previewWrapper](/v3/reference/theming/keys/WidgetPreviewableTemplate.md#theme-key-WidgetPreviewableTemplate-previewWrapper) | `ml-2 mb-1 gap-1 grid grid-cols-[auto_1fr] justify-between` | The preview wrapper mirrors [WidgetLabel.root](/v3/reference/theming/keys/WidgetLabel.md#theme-key-WidgetLabel-root) for label and preview alignment. |

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

## root

> The root adds no chrome so the surrounding form section owns spacing.

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

<a id="theme-key-WidgetPreviewableTemplate-title"></a>

## title

> The title uses foreground text for the previewable template heading.

Default classes:

`text-neutral-900 dark:text-white`

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

<a id="theme-key-WidgetPreviewableTemplate-inner"></a>

## inner

> The inner grid places editor and preview side by side on wide screens.

Default classes:

`grid lg:grid-cols-2 gap-2`

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

<a id="theme-key-WidgetPreviewableTemplate-editorWrapper"></a>

## editorWrapper

> The editor wrapper stacks editing controls with a small gap.

Default classes:

`flex flex-col gap-2`

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

<a id="theme-key-WidgetPreviewableTemplate-preview"></a>

## preview

> The preview pane uses prose defaults while spanning below the label row.

Default classes:

`prose max-w-full flex flex-col row-start-2 row-end-3 col-start-1 col-end-3`

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

<a id="theme-key-WidgetPreviewableTemplate-label"></a>

## label

> The preview label matches widget label color and line height for alignment.

Default classes:

```text
row-start-1 row-end-2 col-start-1 leading-[2.3958125rem]
text-neutral-900/60 dark:text-white/60
```

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

<a id="theme-key-WidgetPreviewableTemplate-previewWrapper"></a>

## previewWrapper

> The preview wrapper mirrors [WidgetLabel.root](/v3/reference/theming/keys/WidgetLabel.md#theme-key-WidgetLabel-root) for label and preview alignment.

Default classes:

`ml-2 mb-1 gap-1 grid grid-cols-[auto_1fr] justify-between`

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