diff --git a/docs/nodes/widgets/ui-button-group.md b/docs/nodes/widgets/ui-button-group.md
index 7385a98e3..20042c6f8 100644
--- a/docs/nodes/widgets/ui-button-group.md
+++ b/docs/nodes/widgets/ui-button-group.md
@@ -31,10 +31,15 @@ dynamic:
+
+
# Button `ui-button-group`
+
+
Adds a set of buttons that act as a multi-state switch to your dashboard. When an individual button is clicked, it will become active and all other buttons in the group will become inactive, with the newly selected value being emitted from the node in Node-RED.
The selected option can be set by sending a `msg.payload` with the value of the button to be selected.
diff --git a/docs/nodes/widgets/ui-button.md b/docs/nodes/widgets/ui-button.md
index 48d78ed31..d2ac4b1e2 100644
--- a/docs/nodes/widgets/ui-button.md
+++ b/docs/nodes/widgets/ui-button.md
@@ -51,10 +51,16 @@ dynamic:
---
+
+
+
# Button `ui-button`
+
+
Adds a clickable button to your dashboard.
## Properties
diff --git a/docs/nodes/widgets/ui-dropdown.md b/docs/nodes/widgets/ui-dropdown.md
index b515f64fc..a3bef1e6f 100644
--- a/docs/nodes/widgets/ui-dropdown.md
+++ b/docs/nodes/widgets/ui-dropdown.md
@@ -36,10 +36,15 @@ dynamic:
---
+
+
# Dropdown `ui-dropdown`
+
+
Adds a dropdown to your dashboard that will emit values in Node-RED under `msg.payload` anytime it's value is changed.
## Programmatic Selections
diff --git a/docs/nodes/widgets/ui-file-input.md b/docs/nodes/widgets/ui-file-input.md
index eb78cdfd6..828b3cccf 100644
--- a/docs/nodes/widgets/ui-file-input.md
+++ b/docs/nodes/widgets/ui-file-input.md
@@ -15,10 +15,15 @@ props:
+
+
# File Upload
+
+
The File Upload widget allows users to upload files to Node-RED. The widget can be configured to accept specific file types and allow for multiple files.
## Properties
diff --git a/docs/nodes/widgets/ui-form.md b/docs/nodes/widgets/ui-form.md
index a1125f742..ade6d9485 100644
--- a/docs/nodes/widgets/ui-form.md
+++ b/docs/nodes/widgets/ui-form.md
@@ -32,10 +32,15 @@ dynamic:
---
+
+
# Form `ui-form`
+
+
Adds a form to user interface which helps to collect multiple value from the user on submit button click as an object in `msg.payload`.
## Properties
diff --git a/docs/nodes/widgets/ui-gauge.md b/docs/nodes/widgets/ui-gauge.md
index 104c2ef83..1417b73c9 100644
--- a/docs/nodes/widgets/ui-gauge.md
+++ b/docs/nodes/widgets/ui-gauge.md
@@ -21,10 +21,15 @@ props:
+
+
# Gauge `ui-gauge`
+
+
Adds a Gauge Chart to your Dashboard. This can be configured with custom types (half, 3/4), styles (rounded, needle) and segmentation with examples detailed [below](#examples).
![Screenshot showing each gauge type side-by-side](/images/node-examples/ui-gauge-types.png "Screenshot showing each gauge type side-by-side"){data-zoomable}
diff --git a/docs/nodes/widgets/ui-markdown.md b/docs/nodes/widgets/ui-markdown.md
index a08f3f3c4..e0d7e87fc 100644
--- a/docs/nodes/widgets/ui-markdown.md
+++ b/docs/nodes/widgets/ui-markdown.md
@@ -10,11 +10,17 @@ dynamic:
---
+
+
+
# Markdown Viewer `ui-markdown`
+
+
Allows for markdown to be defined within Node-RED editor and rendered into the UI. Can be used for rendering labels, headers or even full blog articles.
You can inject `msg` values into the markdown using:
diff --git a/docs/nodes/widgets/ui-notification.md b/docs/nodes/widgets/ui-notification.md
index 03884dd67..74e41216f 100644
--- a/docs/nodes/widgets/ui-notification.md
+++ b/docs/nodes/widgets/ui-notification.md
@@ -12,11 +12,14 @@ props:
---
# Notification `ui-notification`
+
+
Known in Dashboard 1.0 as a "Toast", this widget displays text/HTML in a small window that will appear on the screen for a defined duration of time (`timeout`) and at a defined location on the screen (`position`).
If you want to have the notification show indefinitely, you can set `timeout` to `0`. It will not be possible to close the notification manually unless you also set `allowDismiss` to `true`.
diff --git a/docs/nodes/widgets/ui-radio-group.md b/docs/nodes/widgets/ui-radio-group.md
index e79670c80..26a6f7ddd 100644
--- a/docs/nodes/widgets/ui-radio-group.md
+++ b/docs/nodes/widgets/ui-radio-group.md
@@ -16,10 +16,16 @@ dynamic:
---
+
+
+
# Radio Group `ui-radio-group`
+
+
Adds a Radio Group to your dashboard that will emit values in Node-RED under `msg.payload` anytime a value is selected.
## Programmatic Selections
diff --git a/docs/nodes/widgets/ui-slider.md b/docs/nodes/widgets/ui-slider.md
index b913a9a21..6ded24c40 100644
--- a/docs/nodes/widgets/ui-slider.md
+++ b/docs/nodes/widgets/ui-slider.md
@@ -62,10 +62,15 @@ dynamic:
---
+
+
# Slider `ui-slider`
+
+
Adds a slider to your dashboard that will emit values in Node-RED under `msg.payload` anytime it's value is changed.
## Properties
diff --git a/docs/nodes/widgets/ui-switch.md b/docs/nodes/widgets/ui-switch.md
index c07b73e74..f1f3b28c5 100644
--- a/docs/nodes/widgets/ui-switch.md
+++ b/docs/nodes/widgets/ui-switch.md
@@ -21,10 +21,16 @@ dynamic:
---
+
+
+
# Toggle Switch `ui-switch`
+
+
Adds a toggle switch to the user interface.
## Properties
diff --git a/docs/nodes/widgets/ui-table.md b/docs/nodes/widgets/ui-table.md
index 277646117..689079043 100644
--- a/docs/nodes/widgets/ui-table.md
+++ b/docs/nodes/widgets/ui-table.md
@@ -22,6 +22,7 @@ dynamic:
import FlowViewer from '../../components/FlowViewer.vue'
import AddedIn from '../../components/AddedIn.vue'
+ import TryDemo from "./../../components/TryDemo.vue";
const examples = ref({
'cellTypes': ExampleCellTypes
@@ -29,8 +30,12 @@ dynamic:
+
+
# Data Table `ui-table`
+
+
Renders a set of data in a tabular format. Expects an input (`msg.payload`) in the format of:
```json
diff --git a/docs/nodes/widgets/ui-template.md b/docs/nodes/widgets/ui-template.md
index 2fa01ee66..773abf833 100644
--- a/docs/nodes/widgets/ui-template.md
+++ b/docs/nodes/widgets/ui-template.md
@@ -9,9 +9,15 @@ props:
+
+
+
# Template `ui-template`
+
+
Provide custom JS and HTML (including any [Vuetify components](https://vuetifyjs.com/en/components/all/)) to render in the Dashboard.
diff --git a/docs/nodes/widgets/ui-text-input.md b/docs/nodes/widgets/ui-text-input.md
index 7875950a8..d186bef1b 100644
--- a/docs/nodes/widgets/ui-text-input.md
+++ b/docs/nodes/widgets/ui-text-input.md
@@ -27,10 +27,16 @@ dynamic:
---
+
+
+
# Text Input `ui-text-input`
+
+
Adds a single text input row to your dashboard, with a configurable "type" (text, password, etc).
## Properties
diff --git a/docs/nodes/widgets/ui-text.md b/docs/nodes/widgets/ui-text.md
index fda2e1f2b..1f39d6d4e 100644
--- a/docs/nodes/widgets/ui-text.md
+++ b/docs/nodes/widgets/ui-text.md
@@ -20,6 +20,7 @@ dynamic:
import FlowViewer from '../../components/FlowViewer.vue'
import ExampleSuffix from '../../examples/ui-text-suffix.json'
import ExampleHTMLInjection from '../../examples/ui-text-html-injection.json'
+ import TryDemo from "./../../components/TryDemo.vue"
const examples = ref({
'suffix': ExampleSuffix,
@@ -28,7 +29,11 @@ dynamic:
+
+
# Text `ui-text`
+
+
Displays a non-editable text field on the user interface. Each received `msg.payload` will update the value shown alongside the (optional) label.