diff --git a/vueui/docs/data.md b/vueui/docs/data.md
new file mode 100644
index 00000000000..05b35f9ae29
--- /dev/null
+++ b/vueui/docs/data.md
@@ -0,0 +1,70 @@
+# Different ways to provide data
+VueUI framework is flexible and reliable as long as you select one data flow or are aware of how combining them affects everything.
+## Direct data
+This solution might be the easiest but most dangerous. This involves directly editing UIs data object.
+### UI open code
+In this case we open ui with initial data.
+```DM
+/datum/mydatum/ui_interact(mob/user)
+    // Attempt to obtain existing UI object for user.
+    var/datum/vueui/ui = SSvueui.get_open_ui(user, src)
+
+    // We do not have open UI. So we make new one
+    if (!ui)
+        var/list/data = list("counter" = 0)
+        ui = new(user, src, "uiname", 300, 300, "Title of ui", data)
+
+    // Or we edit data variable directly.
+    // If we modify data variable after open() then it won't be sent to client.
+    ui.data["field"] = "value"
+
+    // We may also set metadata here to store some state in UI object itself, meta data is only present on server and it's not ever altered.
+    ui.metadata = list("other" = otherdatum)
+    ui.open()
+```
+### Topic code
+```DM
+/datum/mydatum/Topic(href, href_list)
+    // We do not need to check for change in direct mode
+    . = FALSE
+    // We obtain our current UI that invoked this Topic call
+    var/datum/vueui/ui = href_list["vueui"]
+    if(!istype(ui))
+        return
+
+    if(href_list["action"] == "test")
+        // My action code
+        // ...
+
+        // If we want to modify data of only this UI that invoked
+        ui.data["field"] = "value"
+        // And we push changed data to client
+        ui.push_change(null)
+
+        // Or if we want to push and override whole data object
+        ui.push_change(list("counter" = 0))
+        // This line is same as
+        ui.data = list("counter" = 0)
+        ui.push_change(null)
+
+        // If we want to modify data to all UIs we have to iterate over them all.
+        for (var/U in get_open_uis(src))
+            var/datum/vueui/ui = U
+
+            // Here we must check if UI should receive change
+            if(ui.status <= STATUS_DISABLED)
+                continue
+            
+            // Do our ui change code here
+            ui.data["field"] = "value"
+		    ui.push_change(null)
+    return
+```
+### Data change code
+```DM
+/datum/mydatum/vueui_data_change(var/list/newdata, var/mob/user, var/datum/vueui/ui)
+    // We always return ui.data so we do not allow client UI to alter data.
+    return ui.data
+```
+### Explanation how it works.
+VueUI main server side data object is stored at `ui.data` and it is source from where client UI primary receives data when when `push_change()` is called. It may be altered from `push_change()` if it's being called with argument. Other source of it being altered is from `vueui_data_change` method, so we should override it and and make sure we always return `ui.data`.
\ No newline at end of file