diff --git a/docs/nodes/widgets/ui-template.md b/docs/nodes/widgets/ui-template.md
index 77857a147..ac7c06f66 100644
--- a/docs/nodes/widgets/ui-template.md
+++ b/docs/nodes/widgets/ui-template.md
@@ -5,6 +5,10 @@ props:
     Scope: "Template nodes can be used  for 3 purposes/scopes: <ul><li><b>Widget (Group-Scoped):</b>A standard HTML/Vue widget rendered in a group in the Dashboard.</li><li><b>Widget (Page-Scoped):</b>A HTML/Vue widget that will render on a page, outside of any existing groups. Note that these widgets will render after any Groups. An example use case for this would be if you wanted to have a fixed footer on a given page.</li><li><b>Widget (UI-Scoped):</b>A HTML/Vue widget rendered on every page of the Dashboard. Most commonly used in conjunction with <a href=\"#teleports\">Teleports</a></li><li><b>CSS (All Pages):</b>Define custom CSS classes/styling that applies to the entire Dashboard.</li><li><b>CSS (Single Page):</b>Define custom CSS classes/styling that applies just a single page of your Dashboard.</li></ul>"
     Class: Appends CSS classes to the widget
     Template: The content of the widget or CSS &lt;style&gt;. If using this for CSS, you do not need to include any &lt;style&gt; tags, as these will be automatically added.
+dynamic:
+    Format:
+        payload: msg.ui_update.format
+        structure: ["String"]
 ---
 
 <script setup>
@@ -30,6 +34,10 @@ Provide custom JS and HTML (including any [Vuetify components](https://vuetifyjs
 
 <PropsTable/>
 
+## Dynamic Properties
+
+<DynamicPropsTable/>
+
 ## Writing Custom Widgets
 
 UI Template will parse different tags and render them into Dashboard. The available tags are:
@@ -476,3 +484,4 @@ Some example widgets that you may find useful are:
 ### Articles & Tutorials
 
 - [Building a Custom Video Player with UI Template](https://flowfuse.com/blog/2023/12/dashboard-0-10-0/)
+
diff --git a/nodes/widgets/locales/en-US/ui_template.html b/nodes/widgets/locales/en-US/ui_template.html
index 713e853ad..73774e464 100644
--- a/nodes/widgets/locales/en-US/ui_template.html
+++ b/nodes/widgets/locales/en-US/ui_template.html
@@ -1,4 +1,3 @@
-
 <script type="text/markdown" data-help-name="ui-template">
 (see [full docs](https://dashboard.flowfuse.com/nodes/widgets/ui-template.html))
 
@@ -150,4 +149,4 @@
 }
 ```
 
-</script>  
\ No newline at end of file
+</script>  
diff --git a/nodes/widgets/ui_template.js b/nodes/widgets/ui_template.js
index 3090fbdaf..e8dc0df69 100644
--- a/nodes/widgets/ui_template.js
+++ b/nodes/widgets/ui_template.js
@@ -1,3 +1,5 @@
+const statestore = require('../store/state.js')
+
 module.exports = function (RED) {
     function TemplateNode (config) {
         const node = this
@@ -5,10 +7,6 @@ module.exports = function (RED) {
         // create node in Node-RED
         RED.nodes.createNode(this, config)
 
-        const evts = {
-            onAction: true // TODO: think we need an onSend event for template nodes that matches up with a `widget-send` message
-        }
-
         if (config.templateScope === 'local') {
             config.page = ''
             config.ui = ''
@@ -31,18 +29,37 @@ module.exports = function (RED) {
             config.passthru = true
         }
 
-        // which group are we rendering this widget
+        // determine which group/page/ui are we rendering this widget
+        let group, page, ui
         if (config.group) {
-            const group = RED.nodes.getNode(config.group)
-            // inform the dashboard UI that we are adding this node
-            group.register(node, config, evts)
+            group = RED.nodes.getNode(config.group)
         } else if (config.page) {
-            const page = RED.nodes.getNode(config.page)
-            // inform the dashboard UI that we are adding this node
-            page.register(null, node, config, evts)
+            page = RED.nodes.getNode(config.page)
         } else if (config.ui) {
-            const ui = RED.nodes.getNode(config.ui)
-            // inform the dashboard UI that we are adding this node
+            ui = RED.nodes.getNode(config.ui)
+        }
+
+        const evts = {
+            onAction: true, // TODO: think we need an onSend event for template nodes that matches up with a `widget-send` message
+            beforeSend: function (msg) {
+                if (msg.ui_update) {
+                    const update = msg.ui_update
+                    if (typeof update.format !== 'undefined') {
+                        // dynamically set "format" property
+                        const parent = group || page || ui
+                        statestore.set(parent.getBase(), node, msg, 'format', update.format)
+                    }
+                }
+                return msg
+            }
+        }
+
+        // inform the dashboard group/page/ui that we are adding this node
+        if (group) {
+            group.register(node, config, evts)
+        } else if (page) {
+            page.register(null, node, config, evts)
+        } else if (ui) {
             ui.register(null, null, node, config, evts)
         }
     }
diff --git a/ui/src/widgets/ui-template/UITemplate.vue b/ui/src/widgets/ui-template/UITemplate.vue
index 4b479fdb4..540f12415 100644
--- a/ui/src/widgets/ui-template/UITemplate.vue
+++ b/ui/src/widgets/ui-template/UITemplate.vue
@@ -11,189 +11,25 @@ export default {
     inject: ['$socket', '$dataTracker'],
     props: {
         id: { type: String, required: true },
-        props: { type: Object, default: () => ({}) }
+        props: { type: Object, default: () => ({}) },
+        state: { type: Object, default: () => ({}) }
     },
-    setup (props) {
-        const parser = new DOMParser()
-        const htmlDoc = parser.parseFromString(props.props.format, 'text/html')
-
-        // check whether we have a fully defined Vue component, or _just_ HTML
-        const templates = htmlDoc.getElementsByTagName('template')
-        const template = templates.length ? templates[0] : props.props.format
-
-        let head
-
-        /* Check for any CSS <style> tags */
-        const styles = htmlDoc.getElementsByTagName('style')
-
-        if (styles.length) {
-            // parse the CSS and add to the head
-            for (let s = 0; s < styles.length; s++) {
-                const style = styles[s]
-                head = head || []
-                head.push({
-                    type: 'style',
-                    data: {
-                        innerHTML: style.innerHTML
-                    }
-                })
-            }
-        }
-
-        /* Check for any <script> elements */
-        const scripts = htmlDoc.getElementsByTagName('script')
-        let component
-
-        if (scripts.length) {
-            // parse the Vue component, which is mostly stringified
-            for (let s = 0; s < scripts.length; s++) {
-                const script = scripts[s]
-                // check we're loading of a script file or if it's raw JS/Vue, or a
-                if (script.getAttribute('src')) {
-                    head = head || []
-                    head.push({
-                        type: 'script',
-                        data: {
-                            src: script.getAttribute('src'),
-                            defer: script.getAttribute('defer'),
-                            async: script.getAttribute('async')
-                        }
-                    })
-                } else {
-                    const parsed = VueParser.parse(script.innerHTML)
-                    if (parsed.js) {
-                        component = {
-                            ...component,
-                            js: parsed.js
-                        }
-                    } else {
-                        component = {
-                            ...component,
-                            ...parsed
-                        }
-                    }
-                }
-            }
-        }
-
-        // here we inject the UI Template Vue Template code into our own, in order to extend base functionality
-        return () => h({
-            props: ['id', 'props'],
-            inject: ['$socket', '$dataTracker'],
-            errorCaptured: (err, vm, info) => {
-                console.error('errorCaptured', err, vm, info)
-                return false
-            },
-            head () {
-                let _props = this.props || props
-                if (_props.props) { _props = _props.props }
-
-                const setup = {}
-
-                if (!_props || ['local', 'widget:page', 'widget:ui'].includes(_props.templateScope)) {
-                    if (!head) {
-                        return {}
-                    } else if (Array.isArray(head) && head.length > 0) {
-                        // loop through the head items and add them to the setup config
-                        head.forEach((item) => {
-                            // check that we have a data object defining the properties of the tag
-                            if (item.data) {
-                                // types supported by @unhead/vue:
-                                //      script, link, meta, style
-                                setup[item.type] = setup[item.type] || []
-
-                                // add meta data for debugging and auditing
-                                item.data['data-template-name'] = _props.name
-                                item.data['data-template-scope'] = _props.templateScope
-                                item.data['data-template-id'] = this.id
-                                if (_props.innerHTML) {
-                                    item.data.innerHTML = _props.innerHTML
-                                }
-
-                                setup[item.type].push(item.data)
-                            }
-                        })
-                    }
-                }
-                if (_props.format && (_props.templateScope === 'page:style' || _props.templateScope === 'site:style')) {
-                    setup.style = [
-                        {
-                            innerHTML: _props.format,
-                            'data-template-name': _props.name,
-                            'data-template-scope': _props.templateScope,
-                            'data-template-id': this.id
-                        }
-                    ]
-                }
-                return setup
-            },
-            template: ['local', 'widget:page', 'widget:ui'].includes(props.props.templateScope) ? template : undefined,
-            watch: {
-                ...component?.watch
-            },
-            computed: {
-                ...mapState('data', ['messages']),
-                ...mapState('setup', ['setup']),
-                msg () {
-                    return this.messages[this.id] || {}
-                },
-                value: {
-                    get () {
-                        return this.messages[this.id]?.payload
-                    },
-                    set (val) {
-                        if (this.value === val) {
-                            return // no change
-                        }
-                        const msg = this.messages[this.id] || {}
-                        msg.payload = val
-                        this.messages[this.id] = msg
-                    }
-                },
-                ...component?.computed
-            },
-            methods: {
-                send (msg) {
-                    if (msg) {
-                        this.$parent.send(this, msg)
-                    }
-                },
-                submit ($evt) {
-                    this.$parent.submit(this, $evt)
-                },
-                ...component?.methods
-            },
-            created () {
-                this.$dataTracker(props.id)
-            },
-            mounted () {
-                if (component?.js) {
-                    // run any generic JS code user has defined outside of a VueJS component
-                    // eslint-disable-next-line no-eval
-                    eval(component.js)
-                }
-                if (component?.mounted) {
-                    component.mounted.call(this)
-                }
-            },
-            unmounted () {
-                // eslint-disable-next-line no-eval
-                this.$socket.off(`msg-input:${this.id}`)
-                if (component?.unmounted) {
-                    component.unmounted.call(this)
-                }
-            },
-            data: component ? component.data : null
-        }, {
-            id: props.id,
-            props: props.props
-        })
+    created () {
+        this.$dataTracker(this.id, null, null, this.onDynamicProperties)
     },
     errorCaptured: (err, vm, info) => {
         console.error('errorCaptured', err, vm, info)
         return false
     },
     methods: {
+        onDynamicProperties (msg) {
+            const updates = msg.ui_update
+            if (!updates) {
+                return
+            }
+            // Updating the format will automatically trigger the rerendering (see render hook below)
+            this.updateDynamicProperty('format', updates.format)
+        },
         send (component, msg) {
             if (typeof (msg) !== 'object') {
                 msg = { payload: msg }
@@ -216,7 +52,195 @@ export default {
             msg._dashboard.sourceId = component.id
             msg._dashboard.templateId = this.id
             this.$socket.emit('widget-action', this.id, msg) // TODO: should we have a widget-send emitter to differentiate from action?
+        },
+        parseCustomTemplate () {
+            const parser = new DOMParser()
+            const htmlDoc = parser.parseFromString(this.getProperty('format'), 'text/html')
+
+            // Check whether the user has specified a fully defined Vue component, or _just_ raw HTML
+            const templates = htmlDoc.getElementsByTagName('template')
+            const template = templates.length ? templates[0] : this.getProperty('format')
+
+            const head = []
+
+            // Check whether the user has specifed any CSS <style> tags
+            const styles = htmlDoc.getElementsByTagName('style')
+
+            if (styles.length) {
+                // parse the CSS and add to the head
+                for (let s = 0; s < styles.length; s++) {
+                    const style = styles[s]
+                    head.push({
+                        type: 'style',
+                        data: {
+                            innerHTML: style.innerHTML
+                        }
+                    })
+                }
+            }
+
+            let component = {}
+
+            // Check whether the user has specifed any javascript <script> tags
+            const scripts = htmlDoc.getElementsByTagName('script')
+
+            if (scripts.length) {
+                // parse the Vue component, which is mostly stringified
+                for (let s = 0; s < scripts.length; s++) {
+                    const script = scripts[s]
+                    if (script.getAttribute('src')) {
+                        head.push({
+                            type: 'script',
+                            data: {
+                                src: script.getAttribute('src'),
+                                defer: script.getAttribute('defer'),
+                                async: script.getAttribute('async')
+                            }
+                        })
+                    } else {
+                        const parsed = VueParser.parse(script.innerHTML)
+                        if (parsed.js) {
+                            component = {
+                                ...component,
+                                js: parsed.js
+                            }
+                        } else {
+                            component = {
+                                ...component,
+                                ...parsed
+                            }
+                        }
+                    }
+                }
+            }
+
+            return { head, component, template }
+        },
+        createVNode (head, component, template, parent) {
+            // Return a (VueJs VNode directly to create a virtual DOM.
+            // A VueJs template will created here, even when the user specified raw HTML.
+            return h({
+                props: ['id', 'props'],
+                inject: ['$socket', '$dataTracker'],
+                errorCaptured: (err, vm, info) => {
+                    console.error('errorCaptured', err, vm, info)
+                    return false
+                },
+                head () {
+                    let _props = this.props || parent.props
+                    if (_props.props) { _props = _props.props }
+
+                    const setup = {}
+
+                    if (!_props || ['local', 'widget:page', 'widget:ui'].includes(_props.templateScope)) {
+                        if (!head) {
+                            return {}
+                        } else if (Array.isArray(head) && head.length > 0) {
+                            // loop through the head items and add them to the setup config
+                            head.forEach((item) => {
+                                // check that we have a data object defining the properties of the tag
+                                if (item.data) {
+                                    // types supported by @unhead/vue:
+                                    //      script, link, meta, style
+                                    setup[item.type] = setup[item.type] || []
+
+                                    // add meta data for debugging and auditing
+                                    item.data['data-template-name'] = _props.name
+                                    item.data['data-template-scope'] = _props.templateScope
+                                    item.data['data-template-id'] = this.id
+                                    if (_props.innerHTML) {
+                                        item.data.innerHTML = _props.innerHTML
+                                    }
+                                    setup[item.type].push(item.data)
+                                }
+                            })
+                        }
+                    }
+                    if (_props.format && (_props.templateScope === 'page:style' || _props.templateScope === 'site:style')) {
+                        setup.style = [
+                            {
+                                innerHTML: _props.format,
+                                'data-template-name': _props.name,
+                                'data-template-scope': _props.templateScope,
+                                'data-template-id': this.id
+                            }
+                        ]
+                    }
+                    return setup
+                },
+                template: ['local', 'widget:page', 'widget:ui'].includes(parent.props.templateScope) ? template : undefined,
+                watch: {
+                    ...component?.watch
+                },
+                computed: {
+                    ...mapState('data', ['messages']),
+                    ...mapState('setup', ['setup']),
+                    msg () {
+                        return this.messages[this.id] || {}
+                    },
+                    value: {
+                        get () {
+                            return this.messages[this.id]?.payload
+                        },
+                        set (val) {
+                            if (this.value === val) {
+                                return // no change
+                            }
+                            const msg = this.messages[this.id] || {}
+                            msg.payload = val
+                            this.messages[this.id] = msg
+                        }
+                    },
+                    ...component?.computed
+                },
+                methods: {
+                    send (msg) {
+                        if (msg) {
+                            this.$parent.send(this, msg)
+                        }
+                    },
+                    submit ($evt) {
+                        this.$parent.submit(this, $evt)
+                    },
+                    ...component?.methods
+                },
+                created () {
+                    this.$dataTracker(parent.id, null, null, parent.onDynamicProperties)
+                },
+                mounted () {
+                    if (component?.js) {
+                        // run any generic JS code user has defined outside of a VueJS component
+                        // eslint-disable-next-line no-eval
+                        eval(component.js)
+                    }
+                    if (component?.mounted) {
+                        component.mounted.call(this)
+                    }
+                },
+                unmounted () {
+                    // eslint-disable-next-line no-eval
+                    this.$socket.off(`msg-input:${this.id}`)
+                    if (component?.unmounted) {
+                        component.unmounted.call(this)
+                    }
+                },
+                data: component ? component.data : null
+            }, {
+                id: parent.id,
+                props: parent.props
+            })
         }
+    },
+    render () {
+        // Call the method to parse the input (template or raw HTML) specified by the user
+        const { head, component, template } = this.parseCustomTemplate()
+
+        // Create a virtual node which can be loaded by VueJs in the virtual DOM.
+        // VueJs will detect automatically all changes to the previous virtual DOM,
+        // and only do the necessary updates (avoiding a slow full refresh that way).
+        // The custom Vue template will be injected in the core ui-template, in
+        // in order to extend base functionality.
+        return this.createVNode(head, component, template, this)
     }
 }
 </script>