diff --git a/docs/guides/xml.md b/docs/guides/xml.md
index 6762641..6fc9c5d 100644
--- a/docs/guides/xml.md
+++ b/docs/guides/xml.md
@@ -2,14 +2,14 @@ XML (eXtensible Markup Language) is a popular and widely-used markup language fo
## Loading an XML File in Basalt
-To load an XML file in Basalt, you'll need to use the `frame:loadLayout` function. This function reads an XML file and returns a table containing the parsed XML data.
+To load an XML file in Basalt, you'll need to use the `container:loadLayout` function. This function reads an XML file and runs any scripts or adds any objects within.
Here's an example of how to load an XML file:
```lua
local basalt = require("basalt")
-local main = basalt.createFrame():loadLayout("path/to/your/layout.xml")
+basalt.createFrame():loadLayout("path/to/your/layout.xml")
```
Make sure that the specified XML file is accessible and located within your project's file system.
@@ -21,108 +21,172 @@ Basalt uses XML to define UI elements and their properties. By using XML, you ca
Here's an example of an XML file that defines a simple UI layout for Basalt:
```xml
-
-
+
+
```
In this example, we define a `Label` and a `Button` with their respective properties, such as `id`, `text`, `x`, and `y`.
-To use the loaded XML data to create the UI elements in Basalt, you can use `main:getXMLElements()`:
+## Props
+
+Properties, or props for short, allow the layout or object to take parameters as input which can be used in the layout. There are 2 types of props: hard-coded string props and computed props.
+
+Hard-coded string props use the `prop="some text"` syntax. The above example demonstrated this, but by using the computed `prop={some Lua expression}` syntax, these props can be used in a much more powerful way. Anything between the curly braces is evaluated as a Lua expression. For example:
+
+```xml
+
+```
+
+You can pass props to a layout in the form of a table to the `loadLayout` function:
```lua
local basalt = require("basalt")
-local main = basalt.createFrame():loadLayout("path/to/your/layout.xml")
-
-local uiElements = main:getXMLElements()
-
-local titleLabel = uiElements["titleLabel"]
-
-titleLabel:setText("New Title")
+basalt.createFrame():loadLayout("path/to/your/layout.xml", { buttonText = "Click me!", onClick = function() basalt.log("Testing") end })
```
-## Using Lua Code in XML
+Props can then be consumed within the layout in the form of the `props` global variable, accessible anywhere within the layout including within computed props.
-In addition to defining UI elements, you can also include Lua code within your XML files for Basalt. This allows you to perform more complex operations or customize your UI elements based on conditions or data.
+```xml
+
+```
-To include Lua code in your XML file, you can use the `
+
+
```
-To share variables or data between multiple `
-
-
-
-```
-
-In this example, we first store a value in the shared table in one `
+
+
+
+```
+
+This layout can be passed props like any other object in the layout, as seen in the example above.
+
+## Reactivity (BETA)
+
+Reacting to user input is easier than ever with Basalt XML's concept of reactive values and observers for said values. This powerful feature allows for properties to be derived automatically from reactive values, without needing the programmer to manually call functions to update the object.
+
+To create a reactive value, simply use the `basalt.reactive(initialValue)` function, which returns getter and setter functions. For example:
+
+```xml
+
```
+
+You could then hook up this reactive value to a property.
+
+```xml
+
+
+
+```
+
+This subscribes the button text to the value of times clicked. If this value is updated via the setter function, the button text will automatically update as well. So let's add an onClick event to do this!
+
+```xml
+
+
+
+```
+
+Voila. You now have a button that displays the number of times it's been clicked.
+
+# Effects
+
+In addition to reactive values, there are effects that are triggered by them. You can think about it like this: reactive values produce updates, while effects detect them and do something in response.
+
+Effects are created using the `basalt.effect(function)` function. Any reactive values that are accessed during the effect's execution are automatically subscribed to, and the effect will re-run in response to updates to these values.
+
+For example, you could create an effect that writes a message to the logs whenever the times clicked updates:
+
+```xml
+
+
+
+```
+
+In fact, props are internally implemented using effects! Effects that set the corresponding property in the object to the new reactive value.
+
+# Derived values
+
+If reactive values are the source of truth, derived values can be thought of as a dependency that uses them and transforms them. Similarly to effects, they also update whenever the reactive values they observe update.
+
+To create a derived value, use the `basalt.derived(function)` function, which returns a getter function for the value. Any effect observing this derived value will update if the derived value updates, which itself updates in response to a source reactive value updating, in a chain reaction.
+
+The above button example could be rewritten as:
+
+```xml
+
+
+
+```
+
+# Untracked reactive value access
+
+Sometimes you might want to use a reactive value in an unreactive way. Perhaps you would like a property to be computed based on it only once, never updating afterwards. This can be accomplished using the `basalt.untracked(function)` function:
+
+```xml
+
+
+