diff --git a/Cargo.lock b/Cargo.lock
index 7d5d46b..daa5a4f 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -3129,6 +3129,7 @@ dependencies = [
  "lazy_static",
  "neko_derive",
  "pretty_assertions",
+ "rand",
  "regex",
  "thiserror 2.0.17",
 ]
diff --git a/Cargo.toml b/Cargo.toml
index 8f48723..1f337a4 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -24,6 +24,7 @@ thiserror = "2"
 [dev-dependencies]
 bevy = { version = "0.17", default-features = true }
 pretty_assertions = "1.4"
+rand = "0.9.2"
 
 [features]
 default = ["hot-reload"]
diff --git a/assets/animated.neko_ui b/assets/animated.neko_ui
new file mode 100644
index 0000000..113ce4e
--- /dev/null
+++ b/assets/animated.neko_ui
@@ -0,0 +1,107 @@
+var random-color = #ffffff;
+var random-num = 20;
+
+var paddings = 5;
+
+style p {
+    color: #000000;
+}
+
+style p +bouncy-text {
+    font-size: $random-num;
+}
+
+style div +rainbow {
+    background-color: $random-color;
+}
+
+
+def inner {
+    layout div {
+        class rainbow;
+        padding: $paddings;
+        output;
+    }
+}
+
+def outer {
+    layout div {
+        padding: $paddings;
+        background-color: #cccccc;
+
+        with inner {
+            output;
+        }
+    }
+}
+
+
+def item {
+    layout outer {
+        with p {
+            class bouncy-text;
+            text: "Hi!";
+        }
+        output;
+    }
+}
+
+def row {
+    layout div {
+        flex-direction: row;
+        column-gap: 5;
+
+        with item {}
+        with item {}
+        with item {}
+        with item {}
+        with item {}
+        with item {}
+        with item {}
+        with item {}
+        with item {}
+        with item {}
+        with item {}
+        with item {}
+        with item {}
+        with item {}
+        with item {}
+        with item {}
+        with item {}
+        with item {}
+        with item {}
+        with item {}
+
+        output;
+    }
+}
+
+layout div {
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+
+    flex-direction: column;
+    row-gap: 5;
+
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+}
diff --git a/assets/board.neko_ui b/assets/board.neko_ui
new file mode 100644
index 0000000..afa6927
--- /dev/null
+++ b/assets/board.neko_ui
@@ -0,0 +1,133 @@
+var cell-size = 20;
+var gap = 1;
+
+style div +box {
+    background-color: #cccccc;
+}
+style div +box +hovered {
+    background-color: #999999;
+}
+style div +box +pressed {
+    background-color: #666666;
+}
+
+style div +box +active {
+    background-color: #181818ff;
+}
+style div +box +active +hovered {
+    background-color: #464646ff;
+}
+style div +box +active +pressed {
+    background-color: #5c5c5cff;
+}
+
+def cell {
+    layout div {
+        class interactable;
+        class box;
+        width: $cell-size;
+        height: $cell-size;
+
+        output;
+    }
+}
+
+def row {
+    layout div {
+        flex-direction: row;
+        column-gap: $gap;
+
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+        with cell {}
+
+        output;
+    }
+}
+
+layout div {
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+
+    flex-direction: column;
+    row-gap: $gap;
+
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+    with row {}
+}
diff --git a/assets/interactions.neko_ui b/assets/interactions.neko_ui
new file mode 100644
index 0000000..91caec1
--- /dev/null
+++ b/assets/interactions.neko_ui
@@ -0,0 +1,129 @@
+// global variables that are controlled dynamically.
+var width = 500;
+var color = #000000;
+
+var text-color = #614a31;
+
+style div +outer-menu {
+  background-color: #D5A96E;
+  border-color: #5B4A31;
+  border-thickness: 4px;
+  border-radius: 12px;
+}
+
+style div +inner-menu {
+  background-color: #d9ad72;
+  border-color: #c1935b;
+  border-thickness: 4px;
+  border-radius: 12px;
+}
+
+style p {
+  color: #000000;
+}
+
+style p +h1 {
+  font-size: 32;
+  color: $color;
+}
+
+def h1 {
+  var text = "Text";
+
+  layout div {
+    flex-direction: column;
+
+    with p {
+      class h1;
+      text: $text;
+    }
+
+    with div {
+      height: 2px;
+      width: 100%;
+
+      background-color: #614a31;
+      border-radius: 4px;
+    }
+
+    output;
+  }
+}
+
+
+style div +button {
+  background-color: #ab691fff;
+}
+
+style div +button +hovered {
+  background-color: #945710ff;
+}
+
+style div +button +pressed {
+  background-color: #8f7a65ff;
+}
+
+def button {
+  var text = "Click Me";
+
+  layout div {
+    class interactable;
+    class button;
+
+    padding: 10;
+    border-radius: 2;
+
+    with p {
+      text: $text;
+      color: #ffffff;
+    }
+
+    output;
+  }
+}
+
+
+layout div {
+  class outer-menu;
+
+  flex-direction: column;
+  align-items: center;
+
+  width: $width;
+  height: 250px;
+
+  margin: auto;
+  padding: 8px;
+  row-gap: 8px;
+
+  with h1 {
+    text: "Message";
+  }
+
+  with div {
+    class inner-menu;
+
+    flex-grow: 1;
+    flex-direction: column;
+    width: 100%;
+    padding: 8px;
+    justify-content: space-between;
+
+    with div {
+      flex-direction: column;
+
+      with p {
+        text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra malesuada tortor, sit amet consequat libero posuere ac.";
+      }
+    }
+
+    with div {
+      padding: 5;
+      column-gap: 10;
+      justify-content: end;
+
+      with button { text: "Yes"; }
+      with button { text: "No"; }
+    }
+  }
+}
diff --git a/assets/stress.neko_ui b/assets/stress.neko_ui
new file mode 100644
index 0000000..6e7d341
--- /dev/null
+++ b/assets/stress.neko_ui
@@ -0,0 +1,97 @@
+
+
+def item {
+    var color = #aaaaaa;
+    var value = "";
+
+    layout div {
+        padding: 10;
+        background-color: $color;
+        border-radius: 4;
+
+        with p {
+            text: $value;
+        }
+
+        output;
+    }
+}
+
+def row {
+    var c = #aaaaaa;
+
+    layout div {
+        flex-direction: row;
+        column-gap: 10;
+
+        with item { color: $c; value: "0"; }
+        with item { color: $c; value: "1"; }
+        with item { color: $c; value: "2"; }
+        with item { color: $c; value: "3"; }
+        with item { color: $c; value: "4"; }
+        with item { color: $c; value: "5"; }
+        with item { color: $c; value: "6"; }
+        with item { color: $c; value: "7"; }
+        with item { color: $c; value: "8"; }
+        with item { color: $c; value: "9"; }
+        with item { color: $c; value: "10"; }
+        with item { color: $c; value: "11"; }
+        with item { color: $c; value: "12"; }
+        with item { color: $c; value: "13"; }
+        with item { color: $c; value: "14"; }
+        with item { color: $c; value: "15"; }
+        with item { color: $c; value: "16"; }
+        with item { color: $c; value: "17"; }
+        with item { color: $c; value: "18"; }
+        with item { color: $c; value: "19"; }
+        with item { color: $c; value: "20"; }
+        with item { color: $c; value: "21"; }
+        with item { color: $c; value: "22"; }
+        with item { color: $c; value: "23"; }
+        with item { color: $c; value: "24"; }
+        with item { color: $c; value: "25"; }
+        with item { color: $c; value: "26"; }
+        with item { color: $c; value: "27"; }
+        with item { color: $c; value: "28"; }
+        with item { color: $c; value: "29"; }
+        with item { color: $c; value: "30"; }
+        with item { color: $c; value: "31"; }
+        with item { color: $c; value: "32"; }
+        with item { color: $c; value: "33"; }
+        with item { color: $c; value: "34"; }
+        with item { color: $c; value: "35"; }
+        with item { color: $c; value: "36"; }
+
+        output;
+    }
+}
+
+
+layout div {
+    justify-content: start;
+    align-items: start;
+    padding: 5;
+    flex-direction: column;
+    row-gap: 10;
+
+    with row { c: #ffaaaa; }
+    with row { c: #ffffaa; }
+    with row { c: #aaffaa; }
+    with row { c: #aaffff; }
+    with row { c: #aaaaff; }
+    with row { c: #ffaaff; }
+    with row { c: #ffaaaa; }
+    with row { c: #ffffaa; }
+    with row { c: #aaffaa; }
+    with row { c: #aaffff; }
+    with row { c: #aaaaff; }
+    with row { c: #ffaaff; }
+    with row { c: #ffaaaa; }
+    with row { c: #ffffaa; }
+    with row { c: #aaffaa; }
+    with row { c: #aaffff; }
+    with row { c: #aaaaff; }
+    with row { c: #ffaaff; }
+    with row { c: #ffaaaa; }
+    with row { c: #ffffaa; }
+}
\ No newline at end of file
diff --git a/assets/test.neko_ui b/assets/test.neko_ui
new file mode 100644
index 0000000..86be947
--- /dev/null
+++ b/assets/test.neko_ui
@@ -0,0 +1,52 @@
+var p = 20;
+var text-color = #000000;
+var text-size = 20;
+
+style p {
+    color: $text-color;
+    font-size: $text-size;
+}
+
+
+def inner {
+    var color = #aaaaaa;
+
+    layout div {
+        padding: $p;
+        background-color: $color;
+
+        output;
+    }
+}
+
+def outer {
+    var outer_color = #aaaaaa;
+    var inner_color = #aaaaaa;
+
+    var color = $outer_color;
+
+    layout div {
+        padding: $p;
+        background-color: $color;
+
+        with inner {
+            color: $inner_color;
+
+            output;
+        }
+    }
+}
+
+layout div {
+    align-items: start;
+    padding: $p;
+
+    with outer {
+        outer_color: #ffaaaa;
+        inner_color: #aaffaa;
+
+        with p {
+            text: "Hi!";
+        }
+    }
+}
\ No newline at end of file
diff --git a/examples/animated.rs b/examples/animated.rs
new file mode 100644
index 0000000..ed1c428
--- /dev/null
+++ b/examples/animated.rs
@@ -0,0 +1,184 @@
+use std::collections::VecDeque;
+
+use bevy::color::palettes::css::WHITE;
+use bevy::diagnostic::{DiagnosticsStore, FrameTimeDiagnosticsPlugin};
+use bevy::prelude::*;
+use neko_maid::components::NekoUITree;
+use neko_maid::parse::value::PropertyValue;
+
+#[derive(Resource, Clone)]
+pub struct FpsSettings {
+    pub startup_visibility: Visibility,
+}
+impl Default for FpsSettings {
+    fn default() -> Self {
+        Self {
+            startup_visibility: Visibility::Hidden,
+        }
+    }
+}
+
+/// Marker to find the container entity so we can show/hide the FPS counter
+#[derive(Component)]
+struct FpsRoot;
+
+/// Marker to find the text entity so we can update it
+#[derive(Component)]
+struct FpsText;
+
+#[derive(Resource, Default)]
+pub struct FpsHistory {
+    last_update: f64,
+    values: VecDeque<f64>,
+    sum: f64,
+}
+impl FpsHistory {
+    pub fn push(&mut self, value: f64) {
+        self.sum += value;
+        self.values.push_back(value);
+
+        while self.values.len() > 10 {
+            let Some(v) = self.values.pop_front() else {
+                break;
+            };
+            self.sum -= v;
+        }
+    }
+
+    pub fn mean(&self) -> Option<f64> {
+        if self.values.is_empty() {
+            return None;
+        }
+        Some(self.sum / self.values.len() as f64)
+    }
+}
+
+fn setup_fps_counter(settings: Res<FpsSettings>, mut commands: Commands) {
+    let font = TextFont {
+        font_size: 20.0,
+        ..Default::default()
+    };
+    let color = TextColor(WHITE.into());
+
+    commands.spawn((
+        FpsRoot,
+        Node {
+            position_type: PositionType::Absolute,
+            right: Val::Percent(1.),
+            top: Val::Percent(1.),
+            bottom: Val::Auto,
+            left: Val::Auto,
+            padding: UiRect::all(Val::Px(4.0)),
+            ..Default::default()
+        },
+        settings.startup_visibility,
+        ZIndex(i32::MAX),
+        BackgroundColor(Color::srgba(0.0, 0.0, 0.0, 0.25)),
+        children![
+            (Text("FPS:".to_string()), font.clone(), color.clone()),
+            (FpsText, Text("N/A".to_string()), font, color),
+        ],
+    ));
+}
+
+fn fps_text_update_system(
+    diagnostics: Res<DiagnosticsStore>,
+    time: Res<Time>,
+    mut history: ResMut<FpsHistory>,
+    mut query: Query<&mut Text, With<FpsText>>,
+) {
+    let t = time.elapsed_secs_f64();
+    if (t - history.last_update) < 0.1 {
+        return;
+    }
+    history.last_update = t;
+
+    let fps = diagnostics
+        .get(&FrameTimeDiagnosticsPlugin::FPS)
+        .and_then(|fps| fps.smoothed());
+
+    if let Some(value) = fps {
+        history.push(value);
+    }
+
+    let mean_fps = history.mean();
+
+    for mut text in &mut query {
+        if let Some(mean) = mean_fps {
+            text.0 = format!("{mean:>4.0}");
+        } else {
+            text.0 = "N/A".into();
+        }
+    }
+}
+
+fn fps_counter_showhide(
+    mut q: Query<&mut Visibility, With<FpsRoot>>,
+    kbd: Res<ButtonInput<KeyCode>>,
+) {
+    if kbd.just_pressed(KeyCode::F3) {
+        let Ok(mut vis) = q.single_mut() else { return };
+        *vis = match *vis {
+            Visibility::Hidden => Visibility::Visible,
+            _ => Visibility::Hidden,
+        };
+    }
+}
+
+#[derive(Default)]
+pub struct FpsCounter {
+    settings: FpsSettings,
+}
+impl FpsCounter {
+    pub fn set_visibility(mut self, visibility: Visibility) -> Self {
+        self.settings.startup_visibility = visibility;
+        self
+    }
+}
+impl Plugin for FpsCounter {
+    fn build(&self, app: &mut App) {
+        app.add_plugins(FrameTimeDiagnosticsPlugin::default())
+            .insert_resource(self.settings.clone())
+            .init_resource::<FpsHistory>()
+            .add_systems(Startup, setup_fps_counter)
+            .add_systems(Update, (fps_text_update_system, fps_counter_showhide));
+    }
+}
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .add_plugins(neko_maid::NekoMaidPlugin)
+        .add_plugins(FpsCounter::default().set_visibility(Visibility::Visible))
+        .add_systems(Startup, setup)
+        .add_systems(FixedUpdate, update_animation)
+        .run();
+}
+
+fn setup(asset_server: Res<AssetServer>, mut commands: Commands) {
+    commands.spawn(Camera2d);
+
+    let handle = asset_server.load("animated.neko_ui");
+    commands.spawn(NekoUITree::new(handle));
+}
+
+pub fn update_animation(
+    time: Res<Time>,
+    mouse: Res<ButtonInput<MouseButton>>,
+    mut q: Query<&mut NekoUITree>,
+) {
+    if mouse.pressed(MouseButton::Left) {
+        return;
+    }
+
+    let h = (time.elapsed_secs_f64() % 4.0) / 4.0 * 360.0;
+    let color = Color::hsl(h as f32, 0.5, 0.3);
+
+    let num = 20.0 + f64::sin(time.elapsed_secs_f64() * 5.0) * 5.0;
+    let num = (num * 20.0).round() / 20.0;
+
+    for mut root in &mut q {
+        root.set_variable("random-color", PropertyValue::Color(color));
+        root.set_variable("random-num", PropertyValue::Number(num));
+    }
+}
diff --git a/examples/animated_base.rs b/examples/animated_base.rs
new file mode 100644
index 0000000..9e41eac
--- /dev/null
+++ b/examples/animated_base.rs
@@ -0,0 +1,249 @@
+use std::collections::VecDeque;
+
+use bevy::color::palettes::css::WHITE;
+use bevy::diagnostic::{DiagnosticsStore, FrameTimeDiagnosticsPlugin};
+use bevy::prelude::*;
+
+#[derive(Resource, Clone)]
+pub struct FpsSettings {
+    pub startup_visibility: Visibility,
+}
+impl Default for FpsSettings {
+    fn default() -> Self {
+        Self {
+            startup_visibility: Visibility::Hidden,
+        }
+    }
+}
+
+/// Marker to find the container entity so we can show/hide the FPS counter
+#[derive(Component)]
+struct FpsRoot;
+
+/// Marker to find the text entity so we can update it
+#[derive(Component)]
+struct FpsText;
+
+#[derive(Resource, Default)]
+pub struct FpsHistory {
+    last_update: f64,
+    values: VecDeque<f64>,
+    sum: f64,
+}
+impl FpsHistory {
+    pub fn push(&mut self, value: f64) {
+        self.sum += value;
+        self.values.push_back(value);
+
+        while self.values.len() > 10 {
+            let Some(v) = self.values.pop_front() else {
+                break;
+            };
+            self.sum -= v;
+        }
+    }
+
+    pub fn mean(&self) -> Option<f64> {
+        if self.values.is_empty() {
+            return None;
+        }
+        Some(self.sum / self.values.len() as f64)
+    }
+}
+
+fn setup_fps_counter(settings: Res<FpsSettings>, mut commands: Commands) {
+    let font = TextFont {
+        font_size: 20.0,
+        ..Default::default()
+    };
+    let color = TextColor(WHITE.into());
+
+    commands.spawn((
+        FpsRoot,
+        Node {
+            position_type: PositionType::Absolute,
+            right: Val::Percent(1.),
+            top: Val::Percent(1.),
+            bottom: Val::Auto,
+            left: Val::Auto,
+            padding: UiRect::all(Val::Px(4.0)),
+            ..Default::default()
+        },
+        settings.startup_visibility,
+        ZIndex(i32::MAX),
+        BackgroundColor(Color::srgba(0.0, 0.0, 0.0, 0.25)),
+        children![
+            (Text("FPS:".to_string()), font.clone(), color.clone()),
+            (FpsText, Text("N/A".to_string()), font, color),
+        ],
+    ));
+}
+
+fn fps_text_update_system(
+    diagnostics: Res<DiagnosticsStore>,
+    time: Res<Time>,
+    mut history: ResMut<FpsHistory>,
+    mut query: Query<&mut Text, With<FpsText>>,
+) {
+    let t = time.elapsed_secs_f64();
+    if (t - history.last_update) < 0.1 {
+        return;
+    }
+    history.last_update = t;
+
+    let fps = diagnostics
+        .get(&FrameTimeDiagnosticsPlugin::FPS)
+        .and_then(|fps| fps.smoothed());
+
+    if let Some(value) = fps {
+        history.push(value);
+    }
+
+    let mean_fps = history.mean();
+
+    for mut text in &mut query {
+        if let Some(mean) = mean_fps {
+            text.0 = format!("{mean:>4.0}");
+        } else {
+            text.0 = "N/A".into();
+        }
+    }
+}
+
+fn fps_counter_showhide(
+    mut q: Query<&mut Visibility, With<FpsRoot>>,
+    kbd: Res<ButtonInput<KeyCode>>,
+) {
+    if kbd.just_pressed(KeyCode::F3) {
+        let Ok(mut vis) = q.single_mut() else { return };
+        *vis = match *vis {
+            Visibility::Hidden => Visibility::Visible,
+            _ => Visibility::Hidden,
+        };
+    }
+}
+
+#[derive(Default)]
+pub struct FpsCounter {
+    settings: FpsSettings,
+}
+impl FpsCounter {
+    pub fn set_visibility(mut self, visibility: Visibility) -> Self {
+        self.settings.startup_visibility = visibility;
+        self
+    }
+}
+impl Plugin for FpsCounter {
+    fn build(&self, app: &mut App) {
+        app.add_plugins(FrameTimeDiagnosticsPlugin::default())
+            .insert_resource(self.settings.clone())
+            .init_resource::<FpsHistory>()
+            .add_systems(Startup, setup_fps_counter)
+            .add_systems(Update, (fps_text_update_system, fps_counter_showhide));
+    }
+}
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .add_plugins(FpsCounter::default().set_visibility(Visibility::Visible))
+        .add_systems(Startup, (setup, spawn_ui))
+        .add_systems(FixedUpdate, update_animation)
+        .run();
+}
+
+fn setup(mut commands: Commands) {
+    commands.spawn(Camera2d);
+}
+
+pub fn spawn_ui(mut commands: Commands) {
+    commands
+        .spawn((Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            flex_direction: FlexDirection::Column,
+            align_items: AlignItems::Center,
+            justify_content: JustifyContent::Center,
+            row_gap: Val::Px(5.0),
+            ..default()
+        },))
+        .with_children(|root| {
+            for _j in 0 .. 20 {
+                // Row
+                root.spawn((Node {
+                    flex_direction: FlexDirection::Row,
+                    column_gap: Val::Px(5.0),
+                    ..default()
+                },))
+                    .with_children(|row| {
+                        for _i in 0 .. 20 {
+                            // Outer gray box
+                            row.spawn((
+                                Node {
+                                    padding: UiRect::all(Val::Px(5.0)),
+                                    ..default()
+                                },
+                                BackgroundColor(Color::linear_rgb(
+                                    13.0 / 16.0,
+                                    13.0 / 16.0,
+                                    13.0 / 16.0,
+                                )),
+                            ))
+                            .with_children(|outer| {
+                                // Inner colored box ($random-color)
+                                outer
+                                    .spawn((
+                                        Node {
+                                            padding: UiRect::all(Val::Px(5.0)),
+                                            ..default()
+                                        },
+                                        UpdateColor,
+                                        BackgroundColor(Color::WHITE),
+                                    ))
+                                    .with_children(|inner| {
+                                        // Text node
+                                        inner.spawn((
+                                            Text::new("Hi!"),
+                                            TextFont {
+                                                font_size: 20.0,
+                                                ..Default::default()
+                                            },
+                                            UpdateFontSize,
+                                            TextColor(Color::BLACK),
+                                        ));
+                                    });
+                            });
+                        }
+                    });
+            }
+        });
+}
+
+#[derive(Component)]
+pub struct UpdateColor;
+
+#[derive(Component)]
+pub struct UpdateFontSize;
+
+pub fn update_animation(
+    time: Res<Time>,
+    mouse: Res<ButtonInput<MouseButton>>,
+    bg_colors: Query<&mut BackgroundColor, With<UpdateColor>>,
+    fonts: Query<&mut TextFont, With<UpdateFontSize>>,
+) {
+    if mouse.pressed(MouseButton::Left) {
+        return;
+    }
+
+    let h = (time.elapsed_secs_f64() % 4.0) / 4.0 * 360.0;
+    let color = Color::hsl(h as f32, 0.5, 0.3);
+
+    for mut bg in bg_colors {
+        bg.0 = color;
+    }
+
+    let n = 20.0 + f64::sin(time.elapsed_secs_f64() * 5.0) * 5.0;
+    for mut font in fonts {
+        font.font_size = ( (n * 20.0).round() / 20.0 ) as f32;
+    }
+}
diff --git a/examples/board.rs b/examples/board.rs
new file mode 100644
index 0000000..a7c17f7
--- /dev/null
+++ b/examples/board.rs
@@ -0,0 +1,31 @@
+use bevy::prelude::*;
+use neko_maid::components::{NekoUINode, NekoUITree};
+use neko_maid::marker::{MarkerAppExt, NekoMarker};
+
+#[derive(Component, NekoMarker)]
+#[neko_marker("pressed")]
+pub struct Pressed;
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .add_plugins(neko_maid::NekoMaidPlugin)
+        .add_systems(Startup, setup)
+        .add_marker::<Pressed>()
+        .add_observer(toggle_cell)
+        .run();
+}
+
+fn setup(asset_server: Res<AssetServer>, mut commands: Commands) {
+    commands.spawn(Camera2d);
+
+    let handle = asset_server.load("board.neko_ui");
+    commands.spawn(NekoUITree::new(handle));
+}
+
+pub fn toggle_cell(event: On<Remove, Pressed>, mut nodes: Query<&mut NekoUINode, With<Pressed>>) {
+    let Ok(mut node) = nodes.get_mut(event.entity) else {
+        return;
+    };
+    node.toggle_class("active");
+}
diff --git a/examples/interactions.rs b/examples/interactions.rs
new file mode 100644
index 0000000..bf43d84
--- /dev/null
+++ b/examples/interactions.rs
@@ -0,0 +1,60 @@
+use bevy::prelude::*;
+use neko_maid::components::{NekoUINode, NekoUITree};
+use neko_maid::marker::{MarkerAppExt, NekoMarker};
+
+#[derive(Component, NekoMarker)]
+#[neko_marker("hovered")]
+pub struct Hovered;
+
+#[derive(Component, NekoMarker)]
+#[neko_marker("pressed")]
+pub struct Pressed;
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .add_plugins(neko_maid::NekoMaidPlugin)
+        .add_marker::<Pressed>()
+        .add_marker::<Hovered>()
+        .add_systems(Startup, setup)
+        .add_observer(hover_start)
+        .add_observer(hover_end)
+        .add_observer(pressed)
+        .add_observer(released)
+        .run();
+}
+
+fn setup(asset_server: Res<AssetServer>, mut commands: Commands) {
+    commands.spawn(Camera2d);
+
+    let handle = asset_server.load("interactions.neko_ui");
+    commands.spawn(NekoUITree::new(handle));
+}
+
+pub fn hover_start(event: On<Add, Hovered>, mut nodes: Query<&mut NekoUINode, With<Hovered>>) {
+    let Ok(_) = nodes.get_mut(event.entity) else {
+        return;
+    };
+    println!("node hovered");
+}
+
+pub fn hover_end(event: On<Remove, Hovered>, mut nodes: Query<&mut NekoUINode, With<Hovered>>) {
+    let Ok(_) = nodes.get_mut(event.entity) else {
+        return;
+    };
+    println!("node unhovered");
+}
+
+pub fn pressed(event: On<Add, Pressed>, mut nodes: Query<&mut NekoUINode, With<Pressed>>) {
+    let Ok(_) = nodes.get_mut(event.entity) else {
+        return;
+    };
+    println!("node pressed: ");
+}
+
+pub fn released(event: On<Remove, Pressed>, mut nodes: Query<&mut NekoUINode, With<Pressed>>) {
+    let Ok(_) = nodes.get_mut(event.entity) else {
+        return;
+    };
+    println!("node released");
+}
diff --git a/examples/marker.rs b/examples/marker.rs
index c4b6dae..1d2e3f5 100644
--- a/examples/marker.rs
+++ b/examples/marker.rs
@@ -1,6 +1,5 @@
 use bevy::color::palettes::css::RED;
 use bevy::prelude::*;
-use neko_derive::NekoMarker;
 use neko_maid::components::NekoUITree;
 use neko_maid::marker::{MarkerAppExt, NekoMarker};
 
diff --git a/examples/stress.rs b/examples/stress.rs
new file mode 100644
index 0000000..87ca0da
--- /dev/null
+++ b/examples/stress.rs
@@ -0,0 +1,24 @@
+use bevy::prelude::*;
+use neko_maid::components::NekoUITree;
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .add_plugins(neko_maid::NekoMaidPlugin)
+        .add_systems(Startup, setup)
+        .add_systems(FixedUpdate, update_tree)
+        .run();
+}
+
+fn setup(asset_server: Res<AssetServer>, mut commands: Commands) {
+    commands.spawn(Camera2d);
+
+    let handle = asset_server.load("stress.neko_ui");
+    commands.spawn(NekoUITree::new(handle));
+}
+
+pub fn update_tree(q: Query<&mut NekoUITree>) {
+    for mut root in q {
+        root.mark_dirty();
+    }
+}
diff --git a/examples/test.rs b/examples/test.rs
new file mode 100644
index 0000000..5c36d5c
--- /dev/null
+++ b/examples/test.rs
@@ -0,0 +1,17 @@
+use bevy::prelude::*;
+use neko_maid::components::NekoUITree;
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .add_plugins(neko_maid::NekoMaidPlugin)
+        .add_systems(Startup, setup)
+        .run();
+}
+
+fn setup(asset_server: Res<AssetServer>, mut commands: Commands) {
+    commands.spawn(Camera2d);
+
+    let handle = asset_server.load("test.neko_ui");
+    commands.spawn(NekoUITree::new(handle));
+}
diff --git a/src/components.rs b/src/components.rs
index b67c450..ad59bef 100644
--- a/src/components.rs
+++ b/src/components.rs
@@ -1,11 +1,50 @@
 //! Components used for the NekoMaid plugin.
 
-use bevy::platform::collections::HashMap;
+use bevy::platform::collections::{HashMap, HashSet};
 use bevy::prelude::*;
 
 use crate::asset::NekoMaidUI;
+use crate::parse::element::NekoElement;
+use crate::parse::scope::{ScopeId, ScopeName, ScopeNotificationMap, ScopeTree};
 use crate::parse::value::PropertyValue;
 
+/// A component representing a node of a NekoMaid UI tree.
+#[derive(Component)]
+pub struct NekoUINode {
+    /// The entity with the NekoUITree component.
+    pub(crate) root: Entity,
+    /// The element struct that this node renders.
+    pub(crate) element: NekoElement,
+    /// A list of properties that changed and need to be re-rendered.
+    pub(crate) updated_properties: Vec<String>,
+}
+
+impl NekoUINode {
+    /// Returns whether this element has the specified class.
+    pub fn has_class(&self, class: &str) -> bool {
+        self.element.classes().contains(class)
+    }
+
+    /// Adds the specified class to this element.
+    pub fn add_class(&mut self, class: String) {
+        self.element.add_class(class);
+    }
+
+    /// Removes the specified class from this element.
+    pub fn remove_class(&mut self, class: &str) {
+        self.element.remove_class(class);
+    }
+
+    /// Toggles the specified class in this element.
+    pub fn toggle_class(&mut self, class: &str) {
+        if self.has_class(class) {
+            self.element.remove_class(class);
+        } else {
+            self.element.add_class(class.to_owned());
+        }
+    }
+}
+
 /// A component representing the root of a NekoMaid UI tree.
 #[derive(Debug, Component)]
 #[require(Node)]
@@ -17,7 +56,16 @@ pub struct NekoUITree {
     dirty: bool,
 
     /// Variables that should be inserted into the global context.
-    variables: HashMap<String, PropertyValue>,
+    pub(crate) variables: HashMap<String, PropertyValue>,
+
+    /// The scope tree used to render elements from this tree.
+    pub(crate) scope: ScopeTree,
+
+    /// Scope names to update.
+    pub(crate) update_names: HashSet<ScopeName>,
+
+    /// A map to trigger node updates when a targetted scope changes.
+    pub(crate) scope_notification: ScopeNotificationMap,
 }
 
 impl NekoUITree {
@@ -27,6 +75,9 @@ impl NekoUITree {
             asset,
             variables: HashMap::new(),
             dirty: true,
+            scope: ScopeTree::default(),
+            update_names: HashSet::new(),
+            scope_notification: ScopeNotificationMap::default(),
         }
     }
 
@@ -42,15 +93,17 @@ impl NekoUITree {
 
     /// Extends the defined variables.
     pub fn with_variables(mut self, variables: HashMap<String, PropertyValue>) -> Self {
-        self.variables.extend(variables);
-        self.mark_dirty();
+        for (name, value) in variables {
+            self.set_variable(&name, value);
+        }
         self
     }
 
     /// Sets a variable to the specified value.
     pub fn set_variable(&mut self, name: &str, value: PropertyValue) {
         self.variables.insert(name.to_owned(), value);
-        self.mark_dirty();
+        self.update_names
+            .insert(ScopeName::Variable(name.to_owned(), ScopeId(0)));
     }
 
     /// Marks the tree as dirty, indicating that it needs to be re-spawned.
diff --git a/src/lib.rs b/src/lib.rs
index d8cb5bb..afe67b2 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -5,14 +5,15 @@
 use bevy::prelude::*;
 
 use crate::asset::{NekoMaidAssetLoader, NekoMaidUI};
-use crate::marker::MarkerRegistry;
+use crate::marker::{MarkerAppExt, MarkerRegistry};
+use crate::render::systems::{self, removed_interactable};
 
 pub mod asset;
 pub mod components;
 pub mod marker;
 pub mod native;
 pub mod parse;
-mod systems;
+pub mod render;
 
 /// A Bevy UI plugin: NekoMaid
 ///
@@ -24,10 +25,21 @@ impl Plugin for NekoMaidPlugin {
         app_.init_asset::<NekoMaidUI>()
             .init_asset_loader::<NekoMaidAssetLoader>()
             .init_resource::<MarkerRegistry>()
+            .add_marker::<Interaction>()
+            .add_observer(removed_interactable)
             .add_systems(
                 Update,
                 (
-                    systems::spawn_tree.in_set(NekoMaidSystems::UpdateTree),
+                    (
+                        systems::spawn_tree,
+                        systems::handle_interactions,
+                        systems::handle_class_changes,
+                        systems::update_styles,
+                        systems::update_scope,
+                        systems::update_nodes,
+                    )
+                        .chain()
+                        .in_set(NekoMaidSystems::UpdateTree),
                     systems::update_tree.in_set(NekoMaidSystems::AssetListener),
                     systems::asset_failure.in_set(NekoMaidSystems::AssetListener),
                 ),
diff --git a/src/marker.rs b/src/marker.rs
index e498d60..9605b1d 100644
--- a/src/marker.rs
+++ b/src/marker.rs
@@ -30,8 +30,8 @@ use bevy::ecs::bundle::Bundle;
 use bevy::ecs::resource::Resource;
 use bevy::ecs::system::EntityCommands;
 use bevy::platform::collections::HashMap;
-
-use crate::parse::element::NekoElement;
+use bevy::ui::Interaction;
+pub use neko_derive::NekoMarker;
 
 /// The marker trait. It can easily be implemented with derive.
 ///
@@ -52,23 +52,68 @@ pub trait NekoMarker: 'static {
         Self: Sized;
 }
 
-/// The marker factory.
-pub type MarkerFactory = Box<dyn Fn(&mut EntityCommands) + Send + Sync>;
+// Makes elements optionally interactable through the `interactable` class.
+impl NekoMarker for Interaction {
+    fn new() -> Self
+    where
+        Self: Sized,
+    {
+        Interaction::default()
+    }
+
+    fn id() -> &'static str
+    where
+        Self: Sized,
+    {
+        "interactable"
+    }
+}
+
+/// The marker insert/remove function.
+pub type MarkerFunction = Box<dyn Fn(&mut EntityCommands) + Send + Sync>;
 
 /// A resource for managing registered marker types.
 #[derive(Default, Resource)]
 pub struct MarkerRegistry {
-    /// Maps marker names to marker factories.
-    factories: HashMap<String, MarkerFactory>,
+    /// Maps marker names to marker inserters.
+    inserters: HashMap<String, Vec<MarkerFunction>>,
+    /// Maps marker names to marker removers.
+    removers: HashMap<String, Vec<MarkerFunction>>,
 }
 
 impl MarkerRegistry {
-    /// Inserts the marker component to an entity given its element.
-    pub fn insert(&self, mut entity: EntityCommands, element: &NekoElement) {
-        for class in element.classes() {
-            let Some(f) = self.factories.get(class) else {
-                continue;
-            };
+    /// Registers the specified marker component.
+    pub fn add_marker<T: NekoMarker + Bundle>(&mut self) {
+        self.inserters
+            .entry(T::id().to_owned())
+            .or_default()
+            .push(Box::new(|entity| {
+                entity.insert(T::new());
+            }));
+        self.removers
+            .entry(T::id().to_owned())
+            .or_default()
+            .push(Box::new(|entity| {
+                entity.remove::<T>();
+            }));
+    }
+
+    /// Inserts the associated class marker components to the node entity.
+    pub fn insert(&self, mut entity: EntityCommands, class: &str) {
+        let Some(inserters) = self.inserters.get(class) else {
+            return;
+        };
+        for f in inserters {
+            f(&mut entity);
+        }
+    }
+
+    /// Removes the associated class marker components from the node entity.
+    pub fn remove(&self, mut entity: EntityCommands, class: &str) {
+        let Some(removers) = self.removers.get(class) else {
+            return;
+        };
+        for f in removers {
             f(&mut entity);
         }
     }
@@ -89,14 +134,7 @@ impl MarkerAppExt for App {
         self.init_resource::<MarkerRegistry>()
             .world_mut()
             .resource_mut::<MarkerRegistry>()
-            .factories
-            .insert(
-                T::id().to_owned(),
-                Box::new(|entity| {
-                    entity.insert(T::new());
-                }),
-            );
-
+            .add_marker::<T>();
         self
     }
 }
diff --git a/src/native.rs b/src/native.rs
index 9e4f690..00ce324 100644
--- a/src/native.rs
+++ b/src/native.rs
@@ -1,519 +1,29 @@
-//! Defines the native widgets available in NekoMaid UI.
+//! A module that defines the native widgets.
 
-use std::sync::Arc;
-
-use bevy::platform::collections::HashMap;
 use bevy::prelude::*;
 use lazy_static::lazy_static;
 
-use crate::parse::element::NekoElement;
-use crate::parse::value::PropertyValue;
 use crate::parse::widget::NativeWidget;
+use crate::render::spawn::{spawn_div, spawn_img, spawn_p, spawn_span};
 
 lazy_static! {
     /// The list of native widgets available in NekoMaid UI.
     pub static ref NATIVE_WIDGETS: Vec<NativeWidget> = vec![
         NativeWidget {
             name: String::from("div"),
-            default_properties: {
-                let mut m = HashMap::new();
-                node_properties(&mut m);
-                background_color_properties(&mut m);
-                border_color_properties(&mut m);
-                border_radius_properties(&mut m);
-                Arc::new(m)
-            },
             spawn_func: spawn_div,
         },
         NativeWidget {
             name: String::from("img"),
-            default_properties: {
-                let mut m = HashMap::new();
-                node_properties(&mut m);
-                background_color_properties(&mut m);
-                border_color_properties(&mut m);
-                border_radius_properties(&mut m);
-                image_properties(&mut m);
-                Arc::new(m)
-            },
             spawn_func: spawn_img,
         },
         NativeWidget {
             name: String::from("p"),
-            default_properties: {
-                let mut m = HashMap::new();
-                node_properties(&mut m);
-                background_color_properties(&mut m);
-                border_color_properties(&mut m);
-                border_radius_properties(&mut m);
-                text_properties(&mut m);
-                Arc::new(m)
-            },
             spawn_func: spawn_p,
         },
         NativeWidget {
             name: String::from("span"),
-            default_properties: {
-                let mut m = HashMap::new();
-                node_properties(&mut m);
-                background_color_properties(&mut m);
-                border_color_properties(&mut m);
-                border_radius_properties(&mut m);
-                text_span_properties(&mut m);
-                Arc::new(m)
-            },
             spawn_func: spawn_span,
         }
     ];
 }
-
-/// Inserts the default properties for a [`Node`] into the given map.
-fn node_properties(m: &mut HashMap<String, PropertyValue>) {
-    m.insert("display".into(), "flex".into());
-    m.insert("box-sizing".into(), "border-box".into());
-    m.insert("position-type".into(), "relative".into());
-
-    m.insert("overflow-x".into(), "visible".into());
-    m.insert("overflow-y".into(), "visible".into());
-    m.insert("scrollbar-width".into(), 0.into());
-
-    m.insert("overflow-clip-margin-box".into(), "padding-box".into());
-    m.insert("overflow-clip-margin".into(), 0.into());
-
-    m.insert("left".into(), "auto".into());
-    m.insert("top".into(), "auto".into());
-    m.insert("right".into(), "auto".into());
-    m.insert("bottom".into(), "auto".into());
-
-    m.insert("width".into(), "auto".into());
-    m.insert("height".into(), "auto".into());
-    m.insert("min-width".into(), "auto".into());
-    m.insert("min-height".into(), "auto".into());
-    m.insert("max-width".into(), "auto".into());
-    m.insert("max-height".into(), "auto".into());
-    m.insert("aspect-ratio".into(), "none".into());
-
-    m.insert("align-items".into(), "default".into());
-    m.insert("justify-items".into(), "default".into());
-    m.insert("align-self".into(), "auto".into());
-    m.insert("justify-self".into(), "auto".into());
-    m.insert("align-content".into(), "default".into());
-    m.insert("justify-content".into(), "default".into());
-
-    m.insert("margin".into(), 0.into());
-    m.insert("margin-top".into(), 0.into());
-    m.insert("margin-left".into(), 0.into());
-    m.insert("margin-right".into(), 0.into());
-    m.insert("margin-bottom".into(), 0.into());
-
-    m.insert("padding".into(), 0.into());
-    m.insert("padding-top".into(), 0.into());
-    m.insert("padding-left".into(), 0.into());
-    m.insert("padding-right".into(), 0.into());
-    m.insert("padding-bottom".into(), 0.into());
-
-    m.insert("border-thickness".into(), 0.into());
-    m.insert("border-thickness-top".into(), 0.into());
-    m.insert("border-thickness-left".into(), 0.into());
-    m.insert("border-thickness-right".into(), 0.into());
-    m.insert("border-thickness-bottom".into(), 0.into());
-
-    m.insert("flex-direction".into(), "row".into());
-    m.insert("flex-wrap".into(), "nowrap".into());
-    m.insert("flex-grow".into(), 0.into());
-    m.insert("flex-shrink".into(), 1.into());
-    m.insert("flex-basis".into(), "auto".into());
-
-    m.insert("row-gap".into(), 0.into());
-    m.insert("column-gap".into(), 0.into());
-
-    m.insert("grid-auto-flow".into(), "row".into());
-    // m.insert("grid-template-rows".into(), "none".into());
-    // m.insert("grid-template-columns".into(), "none".into());
-    // m.insert("grid-auto-rows".into(), "auto".into());
-    // m.insert("grid-auto-columns".into(), "auto".into());
-    // m.insert("grid-row".into(), "auto".into());
-    // m.insert("grid-column".into(), "auto".into());
-}
-
-/// Inserts the default properties for a [`BackgroundColor`] into the given map.
-fn background_color_properties(m: &mut HashMap<String, PropertyValue>) {
-    m.insert("background-color".into(), Color::NONE.into());
-}
-
-/// Inserts the default properties for a [`BorderColor`] into the given map.
-fn border_color_properties(m: &mut HashMap<String, PropertyValue>) {
-    m.insert("border-color".into(), Color::NONE.into());
-    m.insert("border-color-top".into(), Color::NONE.into());
-    m.insert("border-color-left".into(), Color::NONE.into());
-    m.insert("border-color-right".into(), Color::NONE.into());
-    m.insert("border-color-bottom".into(), Color::NONE.into());
-}
-
-/// Inserts the default properties for a [`BorderRadius`] into the given map.
-fn border_radius_properties(m: &mut HashMap<String, PropertyValue>) {
-    m.insert("border-radius".into(), 0.into());
-    m.insert("border-radius-top-left".into(), 0.into());
-    m.insert("border-radius-top-right".into(), 0.into());
-    m.insert("border-radius-bottom-left".into(), 0.into());
-    m.insert("border-radius-bottom-right".into(), 0.into());
-}
-
-/// Inserts the default properties for an [`ImageNode`] into the given map.
-fn image_properties(m: &mut HashMap<String, PropertyValue>) {
-    m.insert("src".into(), "".into());
-    m.insert("tint".into(), Color::WHITE.into());
-    m.insert("flip-x".into(), false.into());
-    m.insert("flip-y".into(), false.into());
-    m.insert("mode".into(), "auto".into());
-
-    // slice mode properties
-    m.insert("slice-size".into(), 0.into());
-    m.insert("slice-size-top".into(), 0.into());
-    m.insert("slice-size-right".into(), 0.into());
-    m.insert("slice-size-bottom".into(), 0.into());
-    m.insert("slice-size-left".into(), 0.into());
-
-    m.insert("max-corner-scale".into(), 1.into());
-    m.insert("center-scale-mode".into(), "stretch".into());
-    m.insert("center-scale-stretch".into(), 1.into());
-    m.insert("sides-scale-mode".into(), "stretch".into());
-    m.insert("sides-scale-stretch".into(), 1.into());
-
-    // tile mode properties
-    m.insert("tile-x".into(), true.into());
-    m.insert("tile-y".into(), true.into());
-    m.insert("stretch-value".into(), 1.into());
-}
-
-/// Inserts the default properties for a [`Text`] bundle into the given map.
-fn text_properties(m: &mut HashMap<String, PropertyValue>) {
-    // Text
-    m.insert("text".into(), "".into());
-
-    // TextFont
-    m.insert("font".into(), "auto".into());
-    m.insert("font-size".into(), 16.into());
-    m.insert("line-height".into(), PropertyValue::Percent(120.0));
-    m.insert("font-smoothing".into(), "antialiased".into());
-
-    // TextLayout
-    m.insert("justify".into(), "left".into());
-    m.insert("line-break".into(), "word".into());
-
-    // TextColor
-    m.insert("color".into(), Color::WHITE.into());
-}
-
-/// Inserts the default properties for a [`TextSpan`] bundle into the given map.
-fn text_span_properties(m: &mut HashMap<String, PropertyValue>) {
-    // TextSpan
-    m.insert("text".into(), "".into());
-
-    // TextFont
-    m.insert("font".into(), "auto".into());
-    m.insert("font-size".into(), 16.into());
-    m.insert("line-height".into(), PropertyValue::Percent(120.0));
-    m.insert("font-smoothing".into(), "antialiased".into());
-
-    // TextColor
-    m.insert("color".into(), Color::WHITE.into());
-}
-
-/// Spawns a `div` native widget.
-fn spawn_div(
-    _: &Res<AssetServer>,
-    commands: &mut Commands,
-    element: &NekoElement,
-    parent: Entity,
-) -> Entity {
-    commands
-        .spawn((
-            ChildOf(parent),
-            node_bundle(element),
-            background_color_bundle(element),
-            border_color_bundle(element),
-            border_radius_bundle(element),
-        ))
-        .id()
-}
-
-/// Spawns an `img` native widget.
-fn spawn_img(
-    asset_server: &Res<AssetServer>,
-    commands: &mut Commands,
-    element: &NekoElement,
-    parent: Entity,
-) -> Entity {
-    commands
-        .spawn((
-            ChildOf(parent),
-            node_bundle(element),
-            background_color_bundle(element),
-            border_color_bundle(element),
-            border_radius_bundle(element),
-            image_node_bundle(asset_server, element),
-        ))
-        .id()
-}
-
-/// Spawns an `p` native widget.
-fn spawn_p(
-    asset_server: &Res<AssetServer>,
-    commands: &mut Commands,
-    element: &NekoElement,
-    parent: Entity,
-) -> Entity {
-    commands
-        .spawn((
-            ChildOf(parent),
-            node_bundle(element),
-            background_color_bundle(element),
-            border_color_bundle(element),
-            border_radius_bundle(element),
-            text_node_bundle(asset_server, element),
-        ))
-        .id()
-}
-
-/// Spawns an `span` native widget.
-fn spawn_span(
-    asset_server: &Res<AssetServer>,
-    commands: &mut Commands,
-    element: &NekoElement,
-    parent: Entity,
-) -> Entity {
-    commands
-        .spawn((
-            ChildOf(parent),
-            node_bundle(element),
-            background_color_bundle(element),
-            border_color_bundle(element),
-            border_radius_bundle(element),
-            span_node_bundle(asset_server, element),
-        ))
-        .id()
-}
-
-/// Build [`Node`] bundle
-fn node_bundle(element: &NekoElement) -> Node {
-    let border_thickness = element.get_as("border-thickness");
-    let margin = element.get_as("margin");
-    let padding = element.get_as("padding");
-
-    Node {
-        display: element.get_as("display"),
-        box_sizing: element.get_as("box-sizing"),
-        position_type: element.get_as("position-type"),
-
-        overflow: Overflow {
-            x: element.get_as("overflow-x"),
-            y: element.get_as("overflow-y"),
-        },
-        scrollbar_width: element.get_as("scrollbar-width"),
-        overflow_clip_margin: OverflowClipMargin {
-            visual_box: element.get_as("overflow-clip-margin-box"),
-            margin: element.get_as("overflow-clip-margin"),
-        },
-
-        left: element.get_as("left"),
-        top: element.get_as("top"),
-        right: element.get_as("right"),
-        bottom: element.get_as("bottom"),
-
-        width: element.get_as("width"),
-        height: element.get_as("height"),
-        min_width: element.get_as("min-width"),
-        min_height: element.get_as("min-height"),
-        max_width: element.get_as("max-width"),
-        max_height: element.get_as("max-height"),
-        aspect_ratio: element.get_as("aspect-ratio"),
-
-        align_items: element.get_as("align-items"),
-        justify_items: element.get_as("justify-items"),
-        align_self: element.get_as("align-self"),
-        justify_self: element.get_as("justify-self"),
-        align_content: element.get_as("align-content"),
-        justify_content: element.get_as("justify-content"),
-
-        margin: UiRect {
-            top: element.get_no_default("margin-top", margin),
-            left: element.get_no_default("margin-left", margin),
-            right: element.get_no_default("margin-right", margin),
-            bottom: element.get_no_default("margin-bottom", margin),
-        },
-
-        padding: UiRect {
-            top: element.get_no_default("padding-top", padding),
-            left: element.get_no_default("padding-left", padding),
-            right: element.get_no_default("padding-right", padding),
-            bottom: element.get_no_default("padding-bottom", padding),
-        },
-
-        border: UiRect {
-            top: element.get_no_default("border-thickness-top", border_thickness),
-            left: element.get_no_default("border-thickness-left", border_thickness),
-            right: element.get_no_default("border-thickness-right", border_thickness),
-            bottom: element.get_no_default("border-thickness-bottom", border_thickness),
-        },
-
-        flex_direction: element.get_as("flex-direction"),
-        flex_wrap: element.get_as("flex-wrap"),
-        flex_grow: element.get_as("flex-grow"),
-        flex_shrink: element.get_as("flex-shrink"),
-        flex_basis: element.get_as("flex-basis"),
-
-        row_gap: element.get_as("row-gap"),
-        column_gap: element.get_as("column-gap"),
-
-        grid_auto_flow: element.get_as("grid-auto-flow"),
-        // grid_template_rows: element.get_as("grid-template-rows"),
-        // grid_template_columns: element.get_as("grid-template-columns"),
-        // grid_auto_rows: element.get_as("grid-auto-rows"),
-        // grid_auto_columns: element.get_as("grid-auto-columns"),
-        // grid_row: element.get_as("grid-row"),
-        // grid_column: element.get_as("grid-column"),
-        ..default()
-    }
-}
-
-/// Build [`BorderColor`] bundle
-fn border_color_bundle(element: &NekoElement) -> BorderColor {
-    let border_color = element.get_as("border-color");
-
-    BorderColor {
-        top: element.get_no_default("border-color-top", border_color),
-        left: element.get_no_default("border-color-left", border_color),
-        right: element.get_no_default("border-color-right", border_color),
-        bottom: element.get_no_default("border-color-bottom", border_color),
-    }
-}
-
-/// Build [`BackgroundColor`] bundle
-fn background_color_bundle(element: &NekoElement) -> BackgroundColor {
-    BackgroundColor(element.get_as("background-color"))
-}
-
-/// Build [`BorderRadius`] bundle
-fn border_radius_bundle(element: &NekoElement) -> BorderRadius {
-    let border_radius = element.get_as("border-radius");
-
-    BorderRadius {
-        top_left: element.get_no_default("border-radius-top-left", border_radius),
-        top_right: element.get_no_default("border-radius-top-right", border_radius),
-        bottom_left: element.get_no_default("border-radius-bottom-left", border_radius),
-        bottom_right: element.get_no_default("border-radius-bottom-right", border_radius),
-    }
-}
-
-/// Build [`ImageNode`] bundle
-fn image_node_bundle(asset_server: &Res<AssetServer>, element: &NekoElement) -> ImageNode {
-    let src: String = element.get_as("src");
-    let slice_size = element.get_as("slice-size");
-
-    ImageNode {
-        color: element.get_as("tint"),
-        image: asset_server.load(src),
-        flip_x: element.get_as("flip-x"),
-        flip_y: element.get_as("flip-y"),
-        image_mode: match element.get_property("mode") {
-            Some(PropertyValue::String(s)) if s == "auto" => NodeImageMode::Auto,
-            Some(PropertyValue::String(s)) if s == "stretch" => NodeImageMode::Stretch,
-            Some(PropertyValue::String(s)) if s == "sliced" => {
-                NodeImageMode::Sliced(TextureSlicer {
-                    border: BorderRect {
-                        top: element.get_no_default("slice-size-top", slice_size),
-                        left: element.get_no_default("slice-size-left", slice_size),
-                        right: element.get_no_default("slice-size-right", slice_size),
-                        bottom: element.get_no_default("slice-size-bottom", slice_size),
-                    },
-                    center_scale_mode: match element.get_property("center-scale-mode") {
-                        Some(PropertyValue::String(s)) if s == "stretch" => SliceScaleMode::Stretch,
-                        Some(PropertyValue::String(s)) if s == "tile" => SliceScaleMode::Tile {
-                            stretch_value: element.get_as("center-scale-stretch"),
-                        },
-                        Some(property) => {
-                            warn!(
-                                "Failed to convert PropertyValue {} to SliceScaleMode",
-                                property
-                            );
-                            SliceScaleMode::default()
-                        }
-                        None => SliceScaleMode::default(),
-                    },
-                    sides_scale_mode: match element.get_property("sides-scale-mode") {
-                        Some(PropertyValue::String(s)) if s == "stretch" => SliceScaleMode::Stretch,
-                        Some(PropertyValue::String(s)) if s == "tile" => SliceScaleMode::Tile {
-                            stretch_value: element.get_as("sides-scale-stretch"),
-                        },
-                        Some(property) => {
-                            warn!(
-                                "Failed to convert PropertyValue {} to SliceScaleMode",
-                                property
-                            );
-                            SliceScaleMode::default()
-                        }
-                        None => SliceScaleMode::default(),
-                    },
-                    max_corner_scale: element.get_as("max-corner-scale"),
-                })
-            }
-            Some(PropertyValue::String(s)) if s == "tiled" => NodeImageMode::Tiled {
-                tile_x: element.get_as("tile-x"),
-                tile_y: element.get_as("tile-y"),
-                stretch_value: element.get_as("stretch-value"),
-            },
-            Some(property) => {
-                warn!(
-                    "Failed to convert PropertyValue {} to NodeImageMode",
-                    property
-                );
-                NodeImageMode::default()
-            }
-            None => NodeImageMode::default(),
-        },
-        ..default()
-    }
-}
-
-/// Build [`Text`] bundle
-fn text_node_bundle(asset_server: &Res<AssetServer>, element: &NekoElement) -> impl Bundle {
-    let font: String = element.get_as("font");
-
-    (
-        Text(element.get_as("text")),
-        TextFont {
-            font: match font {
-                s if s == "auto" => Handle::<Font>::default(),
-                font_path => asset_server.load(font_path),
-            },
-            font_size: element.get_as("font-size"),
-            line_height: element.get_as("line-height"),
-            font_smoothing: element.get_as("font-smoothing"),
-        },
-        TextLayout {
-            justify: element.get_as("justify"),
-            linebreak: element.get_as("line-break"),
-        },
-        TextColor(element.get_as("color")),
-    )
-}
-
-/// Build [`TextSpan`] bundle
-fn span_node_bundle(asset_server: &Res<AssetServer>, element: &NekoElement) -> impl Bundle {
-    let font: String = element.get_as("font");
-
-    (
-        TextSpan(element.get_as("text")),
-        TextFont {
-            font: match font {
-                s if s == "auto" => Handle::<Font>::default(),
-                font_path => asset_server.load(font_path),
-            },
-            font_size: element.get_as("font-size"),
-            line_height: element.get_as("line-height"),
-            font_smoothing: element.get_as("font-smoothing"),
-        },
-        TextColor(element.get_as("color")),
-    )
-}
diff --git a/src/parse/class.rs b/src/parse/class.rs
index 6bb7cd8..92f4056 100644
--- a/src/parse/class.rs
+++ b/src/parse/class.rs
@@ -75,6 +75,19 @@ impl ClassPath {
         true
     }
 
+    /// Returns a reference to the i-th [`ClassSet`] in relation to the path's
+    /// end.
+    pub fn get(&self, i: usize) -> Option<&ClassSet> {
+        self.hierarchy.get(self.hierarchy.len() - i - 1)
+    }
+
+    /// Returns a mutable reference to the i-th [`ClassSet`] in relation to the
+    /// path's end.
+    pub fn get_mut(&mut self, i: usize) -> Option<&mut ClassSet> {
+        let len = self.hierarchy.len();
+        self.hierarchy.get_mut(len - i - 1)
+    }
+
     /// Returns the last [`ClassSet`] in the class path.
     pub fn last(&self) -> &ClassSet {
         self.hierarchy.last().unwrap()
diff --git a/src/parse/context.rs b/src/parse/context.rs
index ca9b575..a326a91 100644
--- a/src/parse/context.rs
+++ b/src/parse/context.rs
@@ -7,18 +7,19 @@ use bevy::platform::collections::HashMap;
 use bevy::prelude::*;
 
 use crate::parse::NekoMaidParseError;
-use crate::parse::element::{NekoElementBuilder, build_element};
+use crate::parse::element::{NekoElementBuilder, build_tree};
 use crate::parse::layout::Layout;
 use crate::parse::module::Module;
 use crate::parse::property::UnresolvedPropertyValue;
+use crate::parse::scope::{Scope, ScopeId, ScopeTree};
 use crate::parse::style::Style;
 use crate::parse::token::{Token, TokenPosition, TokenType, TokenValue};
 use crate::parse::widget::Widget;
 
 /// Context for parsing NekoMaid UI files.
 pub(crate) struct ParseContext {
-    /// A map of defined variables and their values.
-    variables: HashMap<String, UnresolvedPropertyValue>,
+    /// The scope tree for this parse context.
+    scope_tree: ScopeTree,
 
     /// A list of defined styles.
     styles: Vec<Style>,
@@ -48,8 +49,12 @@ impl ParseContext {
     /// A file retriever function can be provided to enable importing of
     /// external NekoMaid UI modules.
     pub(crate) fn new(tokens: Vec<Token>) -> Self {
+        // create global scope
+        let mut scope = ScopeTree::default();
+        scope.create(None);
+
         Self {
-            variables: HashMap::new(),
+            scope_tree: scope,
             styles: Vec::new(),
             layouts: Vec::new(),
             widgets: HashMap::new(),
@@ -129,22 +134,40 @@ impl ParseContext {
 
     /// Sets the value of a defined variable. If the variable already exists,
     /// its value is updated.
-    pub(crate) fn set_variable(&mut self, name: String, value: UnresolvedPropertyValue) {
-        self.variables.insert(name, value);
+    pub(crate) fn set_variable(&mut self, name: &String, value: &UnresolvedPropertyValue) {
+        let Some(scope) = self.scope_tree.get_mut(ScopeId(0)) else {
+            return;
+        };
+        scope.add_variables([(name, value)]);
+    }
+
+    /// Creates and returns a scope that is child of the provided scope.
+    pub(crate) fn create_scope(&mut self, parent: ScopeId) -> &mut Scope {
+        self.scope_tree.create(Some(parent))
     }
 
     /// Converts this parse context into a [`Module`].
     pub(crate) fn into_module(self) -> NekoResult<Module> {
         let mut elements = self.imported_elements;
 
-        let variables = HashMap::new();
+        let global_scope_id = ScopeId(0);
+        let mut scope_tree = self.scope_tree;
+
         for layout in self.layouts {
-            let element = build_element(&variables, &self.styles, &self.widgets, layout, None)?;
+            let element = build_tree(
+                global_scope_id,
+                &mut scope_tree,
+                &self.styles,
+                &self.widgets,
+                layout,
+            )?;
             elements.push(element);
         }
 
+        scope_tree.update_dependency_graph();
+
         Ok(Module {
-            variables: self.variables,
+            scope: scope_tree,
             styles: self.styles,
             widgets: self.widgets,
             elements,
@@ -174,7 +197,13 @@ impl ParseContext {
     pub(crate) fn add_style(&mut self, style: Style) {
         for existing_style in &mut self.styles {
             if existing_style.selector() == style.selector() {
-                existing_style.merge(style);
+                let Some(scope) = self.scope_tree.get(style.scope_id).cloned() else {
+                    return;
+                };
+                let Some(existing_scope) = self.scope_tree.get_mut(style.scope_id) else {
+                    return;
+                };
+                existing_scope.merge(&scope);
                 return;
             }
         }
@@ -204,8 +233,10 @@ impl ParseContext {
             });
         };
 
-        for (var_name, var_value) in module.variables {
-            self.set_variable(var_name, var_value);
+        if let Some(global_scope) = module.scope.get(ScopeId(0)) {
+            for (var_name, var_value) in global_scope.variables() {
+                self.set_variable(var_name, var_value);
+            }
         }
 
         for style in module.styles {
diff --git a/src/parse/element.rs b/src/parse/element.rs
index d72eecd..133b226 100644
--- a/src/parse/element.rs
+++ b/src/parse/element.rs
@@ -1,15 +1,13 @@
 //! A module for parsing and representing NekoMaid UI finalized elements.
 
-use std::sync::Arc;
-
-use bevy::ecs::component::Component;
 use bevy::platform::collections::{HashMap, HashSet};
+use bevy::prelude::{Deref, DerefMut};
 
 use crate::parse::NekoMaidParseError;
 use crate::parse::class::{ClassPath, ClassSet};
 use crate::parse::context::NekoResult;
 use crate::parse::layout::Layout;
-use crate::parse::property::UnresolvedPropertyValue;
+use crate::parse::scope::{ScopeId, ScopeTree};
 use crate::parse::style::Style;
 use crate::parse::token::TokenPosition;
 use crate::parse::value::PropertyValue;
@@ -28,29 +26,58 @@ pub(crate) struct NekoElementBuilder {
     pub(crate) children: Vec<NekoElementBuilder>,
 }
 
-/// A component representing a NekoMaid UI element.
-#[derive(Debug, Component, Clone, PartialEq)]
+/// A style entry in an element.
+#[derive(Debug, Clone, PartialEq)]
+pub(crate) struct StyleEntry {
+    /// The style.
+    pub value: Style,
+    /// Whether the current style is active i.e matches the current class path.
+    pub active: bool,
+}
+
+/// A NekoMaid UI element.
+#[derive(Debug, Clone, PartialEq)]
 pub struct NekoElement {
     /// The class path of this element.
     classpath: ClassPath,
+    pub(crate) classpath_changed: bool,
+    pub(crate) added_classes: Vec<String>,
+    pub(crate) removed_classes: Vec<String>,
 
     /// The styles applied to this element.
-    styles: Vec<Style>,
-
-    /// The variables in scope for this element.
-    variables: HashMap<String, UnresolvedPropertyValue>,
-
-    /// The properties of this element before variable resolution.
-    unresolved_properties: HashMap<String, UnresolvedPropertyValue>,
-
-    /// The concrete properties applied to this element.
-    properties: HashMap<String, PropertyValue>,
-
-    /// The default properties of this element, from the native widget.
-    default_properties: Arc<HashMap<String, PropertyValue>>,
+    pub(crate) styles: Vec<StyleEntry>,
+    pub(crate) activated_styles: Vec<usize>,
+    pub(crate) deactivated_styles: Vec<usize>,
+
+    /// A map that tells where a property applied to this
+    /// element comes from. If `Some(i)`, the property
+    /// comes from the i-th style, while if it's `None`,
+    /// the property is local to this element and lives
+    /// in the element scope.
+    active_properties: HashMap<String, Option<usize>>,
+    dirty_active_properties: bool,
+
+    /// Scope id
+    scope: ScopeId,
 }
 
 impl NekoElement {
+    /// Creates a new element.
+    pub(crate) fn new(classpath: ClassPath, scope_id: ScopeId) -> Self {
+        Self {
+            classpath,
+            classpath_changed: true,
+            added_classes: Vec::new(),
+            removed_classes: Vec::new(),
+            styles: Vec::new(),
+            activated_styles: Vec::new(),
+            deactivated_styles: Vec::new(),
+            active_properties: HashMap::new(),
+            dirty_active_properties: false,
+            scope: scope_id,
+        }
+    }
+
     /// Returns a reference to the class path of this element.
     pub fn classpath(&self) -> &ClassPath {
         &self.classpath
@@ -58,6 +85,7 @@ impl NekoElement {
 
     /// Returns a mutable reference to the class path of this element.
     pub fn classpath_mut(&mut self) -> &mut ClassPath {
+        self.classpath_changed = true;
         &mut self.classpath
     }
 
@@ -68,125 +96,190 @@ impl NekoElement {
 
     /// Adds a class to the class path of this element.
     pub fn add_class(&mut self, class: String) {
-        if self.classpath.last_mut().classes.insert(class) {}
+        if self.classpath.last_mut().classes.insert(class.clone()) {
+            self.classpath_changed = true;
+            self.added_classes.push(class)
+        }
     }
 
     /// Removes a class from the class path of this element.
     pub fn remove_class(&mut self, class: &str) {
-        self.classpath.last_mut().classes.remove(class);
+        if self.classpath.last_mut().classes.remove(class) {
+            self.classpath_changed = true;
+            self.removed_classes.push(class.to_string())
+        }
+    }
+
+    /// Updates the list of active styles.
+    pub fn update_active_styles(&mut self) {
+        for (i, style) in self.styles.iter_mut().enumerate() {
+            let active = self.classpath.matches(style.value.selector());
+
+            if style.active != active {
+                style.active = active;
+                self.dirty_active_properties = true;
+
+                if active {
+                    self.activated_styles.push(i);
+                } else {
+                    self.deactivated_styles.push(i);
+                }
+            }
+        }
+        self.classpath_changed = false;
     }
 
     /// Returns a reference to the styles applied to this element.
     ///
-    /// Styles earlier in the vector have higher precedence.
-    pub fn styles(&self) -> &Vec<Style> {
-        &self.styles
+    /// Styles earlier in the vector have lower precedence.
+    pub fn active_styles(&self) -> impl Iterator<Item = &Style> {
+        self.styles.iter().filter(|e| e.active).map(|e| &e.value)
     }
 
     /// Tries to add a style to the styles applied to this element. If the style
     /// has a selector that cannot match this element, it will not be added.
     pub fn try_add_style(&mut self, style: &Style) {
         if self.classpath.partial_matches(style.selector()) {
-            self.styles.insert(0, style.clone());
+            let active = self.classpath.matches(style.selector());
+
+            let entry = StyleEntry {
+                value: style.clone(),
+                active,
+            };
+            let i = self.styles.len();
+            self.styles.push(entry);
+
+            if active {
+                self.dirty_active_properties = true;
+                self.activated_styles.push(i);
+            }
         }
     }
 
-    /// Returns a reference to the property map of this element.
-    pub fn properties(&self) -> &HashMap<String, PropertyValue> {
-        &self.properties
+    /// Returns the name of all active properties in this element,
+    /// including indirect properties coming from styles.
+    pub fn active_properties(&self) -> impl Iterator<Item = &String> {
+        self.active_properties.keys()
     }
 
-    /// Sets a property directly on this element, overriding all styles.
-    pub fn set_property(&mut self, name: String, value: PropertyValue) {
-        self.properties.insert(name, value);
+    /// Returns the id of the scope used by this element.
+    pub(crate) fn scope_id(&self) -> ScopeId {
+        self.scope
     }
 
-    /// Gets a property defined by the current style of this element.
-    ///
-    /// Note that this may be slow if there are many styles applied to this
-    /// element. It is recommended to only check for properties when
-    /// necessary (e.g. on class changes or style updates).
-    pub fn get_property(&self, name: &str) -> Option<&PropertyValue> {
-        if let Some(value) = self.properties.get(name) {
-            return Some(value);
+    /// Returns a mutable view on the element's properties given scope context.
+    pub(crate) fn view_mut<'a>(&'a mut self, scopes: &'a mut ScopeTree) -> NekoElementView<'a> {
+        NekoElementView { el: self, scopes }
+    }
+}
+
+/// A view on the element's properties given scope context.
+#[derive(Debug, Deref, DerefMut)]
+pub struct NekoElementView<'a> {
+    #[deref]
+    el: &'a mut NekoElement,
+    scopes: &'a mut ScopeTree,
+}
+
+impl<'a> NekoElementView<'a> {
+    /// Updates the list of all properties applied to this element.
+    pub fn update_active_properties(&mut self) {
+        if self.classpath_changed {
+            self.update_active_styles();
+        }
+
+        self.active_properties.clear();
+
+        let Some(scope) = self.scopes.get(self.scope) else {
+            return;
         };
+        for name in scope.property_names() {
+            self.el.active_properties.insert(name.clone(), None);
+        }
 
-        for style in &self.styles {
-            if let Some(value) = style.get_property(name)
-                && self.classpath.matches(style.selector())
-            {
-                return Some(value);
+        for i in (0 .. self.styles.len()).rev() {
+            if !self.styles[i].active {
+                continue;
             }
+            self.update_style_properties(i);
         }
 
-        self.default_properties.get(name)
+        self.dirty_active_properties = false;
     }
-
-    /// Resolve properties for this element
-    pub fn resolve(&mut self, variables: &HashMap<String, PropertyValue>) -> NekoResult<()> {
-        for style in &mut self.styles {
-            style.resolve(variables)?;
+    fn update_style_properties(&mut self, i: usize) {
+        let style = &self.styles[i].value;
+        let Some(scope) = self.scopes.get(style.scope_id) else {
+            return;
+        };
+        for name in scope.property_names() {
+            let j = match self.active_properties.get(name) {
+                Some(j) => j.unwrap_or(usize::MAX),
+                None => 0,
+            };
+            if i >= j {
+                self.el.active_properties.insert(name.clone(), Some(i));
+            }
         }
+    }
 
-        let mut variables = variables.clone();
-        for (name, value) in &self.variables {
-            let prop = value.resolve(&variables)?;
-            variables.insert(name.clone(), prop);
+    /// Gets a property defined by the current style of this element.
+    #[inline(always)]
+    pub fn get_property(&mut self, name: &str) -> Option<&PropertyValue> {
+        if self.dirty_active_properties {
+            self.update_active_properties();
         }
 
-        for (name, value) in &self.unresolved_properties {
-            let prop = value.resolve(&variables)?;
-            self.properties.insert(name.clone(), prop);
+        let origin = self.active_properties.get(name)?;
+        match *origin {
+            Some(i) => {
+                let style = &self.styles[i].value;
+                let scope = self.scopes.get(style.scope_id)?;
+                scope.get_property(name)
+            }
+            None => {
+                let scope = self.scopes.get(self.scope)?;
+                scope.get_property(name)
+            }
         }
-
-        Ok(())
     }
 
     /// Attempts to get a property and automatically convert it to the desired
     /// type. If the property is not found, returns the default value for the
     /// type.
-    pub fn get_as<'a, O>(&'a self, name: &str) -> O
+    #[inline(always)]
+    pub fn get_as<'b, O>(&'b mut self, name: &str) -> Option<O>
     where
-        O: From<&'a PropertyValue> + Default,
+        O: From<&'b PropertyValue> + Default,
     {
-        self.get_property(name).map(Into::into).unwrap_or_default()
+        self.get_property(name).map(Into::into)
     }
 
     /// Attempts to get a property and automatically convert it to the desired
     /// type. If the property is not found, returns the provided default value.
-    pub fn get_as_or<'a, O>(&'a self, name: &str, def: O) -> O
+    #[inline(always)]
+    pub fn get_as_or<'b, O>(&'b mut self, name: &str, def: O) -> O
     where
-        O: From<&'a PropertyValue>,
+        O: From<&'b PropertyValue>,
     {
         self.get_property(name).map(Into::into).unwrap_or(def)
     }
+}
 
-    /// Attempts to get a property, ignoring all default values provided by the
-    /// native widget, and automatically convert it to the desired type. If the
-    /// property is not found, returns the provided value.
-    pub fn get_no_default<'a, O>(&'a self, name: &str, def: O) -> O
-    where
-        O: From<&'a PropertyValue>,
-    {
-        if let Some(value) = self.properties.get(name) {
-            return value.into();
-        };
-
-        for style in &self.styles {
-            if let Some(value) = style.get_property(name)
-                && self.classpath.matches(style.selector())
-            {
-                return value.into();
-            }
-        }
-
-        def
-    }
+/// Builds an element tree.
+pub(super) fn build_tree(
+    global_scope: ScopeId,
+    scopes: &mut ScopeTree,
+    styles: &[Style],
+    widgets: &HashMap<String, Widget>,
+    layout: Layout,
+) -> NekoResult<NekoElementBuilder> {
+    build_element(global_scope, scopes, styles, widgets, layout, None)
 }
 
 /// Builds a [`NekoElementBuilder`] from the given styles and layout.
 pub(super) fn build_element(
-    variables: &HashMap<String, UnresolvedPropertyValue>,
+    parent_scope: ScopeId,
+    scopes: &mut ScopeTree,
     styles: &[Style],
     widgets: &HashMap<String, Widget>,
     layout: Layout,
@@ -203,9 +296,8 @@ pub(super) fn build_element(
         Widget::Native(native_widget) => {
             let classes = ClassSet {
                 widget: layout.widget,
-                classes: layout.classes,
+                classes: HashSet::new(),
             };
-
             let classpath = match classpath {
                 Some(mut path) => {
                     path.append(classes);
@@ -214,32 +306,33 @@ pub(super) fn build_element(
                 None => ClassPath::new(classes),
             };
 
+            let scope = scopes.create(Some(parent_scope));
+            scope.add_properties(layout.properties.iter());
+            let scope_id = scope.id();
+
+            let mut element = NekoElement::new(classpath, scope_id);
+            for class in layout.classes {
+                element.add_class(class);
+            }
+            for style in styles {
+                element.try_add_style(style);
+            }
+            element.view_mut(scopes).update_active_properties();
+
             let mut children = Vec::new();
             if let Some(c) = layout.children_slots.get("default") {
                 for child in c {
                     children.push(build_element(
-                        variables,
+                        scope_id,
+                        scopes,
                         styles,
                         widgets,
                         child.clone(),
-                        Some(classpath.clone()),
+                        Some(element.classpath().clone()),
                     )?);
                 }
             }
 
-            let mut element = NekoElement {
-                classpath,
-                styles: Vec::new(),
-                variables: variables.clone(),
-                unresolved_properties: layout.properties,
-                properties: HashMap::new(),
-                default_properties: native_widget.default_properties.clone(),
-            };
-
-            for style in styles {
-                element.try_add_style(style);
-            }
-
             Ok(NekoElementBuilder {
                 element,
                 children,
@@ -247,20 +340,21 @@ pub(super) fn build_element(
             })
         }
         Widget::Custom(custom_widget) => {
-            let mut local_variables = variables.clone();
-
-            for (name, value) in &custom_widget.default_properties {
-                local_variables.insert(name.clone(), value.clone());
-            }
-
-            for (name, value) in &layout.properties {
-                local_variables.insert(name.clone(), value.clone());
-            }
+            let widget_scope = scopes.create(Some(parent_scope));
+            widget_scope.add_variables(custom_widget.default_properties.iter());
+            widget_scope.add_variables(layout.properties.iter());
 
             let mut widget_layout = custom_widget.layout.clone();
             substitute_widget_slots(&mut widget_layout, layout.children_slots);
 
-            build_element(&local_variables, styles, widgets, widget_layout, classpath)
+            build_element(
+                widget_scope.id(),
+                scopes,
+                styles,
+                widgets,
+                widget_layout,
+                classpath,
+            )
         }
     }
 }
diff --git a/src/parse/mod.rs b/src/parse/mod.rs
index fc615ef..d5493c0 100644
--- a/src/parse/mod.rs
+++ b/src/parse/mod.rs
@@ -15,6 +15,7 @@ pub mod import;
 pub mod layout;
 pub mod module;
 pub mod property;
+pub mod scope;
 pub mod style;
 pub mod token;
 pub mod tokenizer;
diff --git a/src/parse/module.rs b/src/parse/module.rs
index e37a359..3fe7d83 100644
--- a/src/parse/module.rs
+++ b/src/parse/module.rs
@@ -7,7 +7,8 @@ use crate::parse::context::{NekoResult, ParseContext};
 use crate::parse::element::NekoElementBuilder;
 use crate::parse::import::parse_import;
 use crate::parse::layout::parse_layout;
-use crate::parse::property::{UnresolvedPropertyValue, parse_variable};
+use crate::parse::property::parse_variable;
+use crate::parse::scope::ScopeTree;
 use crate::parse::style::{Selector, Style, parse_style};
 use crate::parse::token::TokenType;
 use crate::parse::widget::{Widget, parse_widget};
@@ -15,8 +16,8 @@ use crate::parse::widget::{Widget, parse_widget};
 /// A NekoMaid UI module.
 #[derive(Debug, Clone, PartialEq)]
 pub struct Module {
-    /// A map of defined variables and their values.
-    pub(crate) variables: HashMap<String, UnresolvedPropertyValue>,
+    /// The scope tree for this module.
+    pub(crate) scope: ScopeTree,
 
     /// A list of defined styles.
     ///
@@ -37,7 +38,7 @@ pub(super) fn parse_module(mut ctx: ParseContext) -> NekoResult<Module> {
             TokenType::ImportKeyword => parse_import(&mut ctx)?,
             TokenType::VarKeyword => {
                 let variable = parse_variable(&mut ctx)?;
-                ctx.set_variable(variable.name, variable.value);
+                ctx.set_variable(&variable.name, &variable.value);
             }
             TokenType::DefKeyword => {
                 let widget = parse_widget(&mut ctx)?;
diff --git a/src/parse/property.rs b/src/parse/property.rs
index 133ee3b..fdb881a 100644
--- a/src/parse/property.rs
+++ b/src/parse/property.rs
@@ -2,7 +2,6 @@
 
 use std::fmt;
 
-use bevy::platform::collections::HashMap;
 use bevy::prelude::*;
 
 use crate::parse::NekoMaidParseError;
@@ -30,21 +29,11 @@ pub(crate) enum UnresolvedPropertyValue {
     Variable(String),
 }
 
-impl UnresolvedPropertyValue {
-    /// Resolves the property value using the provided variable map.
-    pub fn resolve(&self, variables: &HashMap<String, PropertyValue>) -> NekoResult<PropertyValue> {
+impl fmt::Display for UnresolvedPropertyValue {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
         match self {
-            UnresolvedPropertyValue::Constant(v) => Ok(v.clone()),
-            UnresolvedPropertyValue::Variable(var_name) => {
-                if let Some(v) = variables.get(var_name) {
-                    Ok(v.clone())
-                } else {
-                    Err(NekoMaidParseError::VariableNotFound {
-                        variable: var_name.clone(),
-                        position: Default::default(),
-                    })
-                }
-            }
+            UnresolvedPropertyValue::Constant(value) => write!(f, "{}", value),
+            UnresolvedPropertyValue::Variable(name) => write!(f, "${}", name),
         }
     }
 }
diff --git a/src/parse/scope.rs b/src/parse/scope.rs
new file mode 100644
index 0000000..6c7de55
--- /dev/null
+++ b/src/parse/scope.rs
@@ -0,0 +1,573 @@
+//! A module for implementing scoping rules for variables and properties.
+
+use std::fmt::{Display, Write};
+
+use bevy::ecs::entity::Entity;
+use bevy::platform::collections::{HashMap, HashSet};
+use bevy::prelude::{Deref, DerefMut};
+use lazy_static::lazy_static;
+
+use crate::parse::property::UnresolvedPropertyValue;
+use crate::parse::value::PropertyValue;
+
+/// An entry in a scope.
+#[derive(Debug, Clone, PartialEq)]
+pub(crate) struct ScopeItem {
+    /// The unresolved expression/value to be evaluated.
+    pub unresolved: UnresolvedPropertyValue,
+    /// The evaluated value, either derived from the `unresolved`
+    /// property or injected directly.
+    pub value: Option<PropertyValue>,
+}
+
+/// The scope id based on its index in the scope tree.
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Hash, Deref)]
+pub(crate) struct ScopeId(pub usize);
+
+/// An uniquely defined name in a scope tree.
+#[derive(Debug, Clone, PartialEq, Eq, Hash)]
+pub(crate) enum ScopeName {
+    Variable(String, ScopeId),
+    Property(String, ScopeId),
+}
+impl ScopeName {
+    /// Returns the property or variable name of this scope name.
+    pub fn name(&self) -> &String {
+        match self {
+            ScopeName::Variable(name, _) => name,
+            ScopeName::Property(name, _) => name,
+        }
+    }
+
+    /// Returns the id of the scope that owns this scope name.
+    pub fn scope_id(&self) -> ScopeId {
+        match self {
+            ScopeName::Variable(_, scope_id) => *scope_id,
+            ScopeName::Property(_, scope_id) => *scope_id,
+        }
+    }
+}
+impl Display for ScopeName {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            ScopeName::Variable(name, scope_id) => write!(f, "${}#{}", name, scope_id.0),
+            ScopeName::Property(name, scope_id) => write!(f, "{}#{}", name, scope_id.0),
+        }
+    }
+}
+
+/// A scope in a scope tree.
+#[derive(Debug, Clone, PartialEq)]
+pub(crate) struct Scope {
+    id: ScopeId,
+    parent: Option<ScopeId>,
+    children: Vec<ScopeId>,
+    variables: HashMap<String, ScopeItem>,
+    properties: HashMap<String, ScopeItem>,
+}
+impl Scope {
+    pub fn new(id: ScopeId, parent: Option<ScopeId>) -> Self {
+        Self {
+            id,
+            parent,
+            children: vec![],
+            variables: HashMap::new(),
+            properties: HashMap::new(),
+        }
+    }
+
+    pub fn id(&self) -> ScopeId {
+        self.id
+    }
+
+    #[allow(dead_code)]
+    pub fn parent(&self) -> Option<ScopeId> {
+        self.parent
+    }
+
+    #[allow(dead_code)]
+    pub fn children(&self) -> &Vec<ScopeId> {
+        &self.children
+    }
+
+    pub fn get(&self, name: &ScopeName) -> Option<&ScopeItem> {
+        match name {
+            ScopeName::Variable(name, _) => self.variables.get(name),
+            ScopeName::Property(name, _) => self.properties.get(name),
+        }
+    }
+
+    pub fn get_property(&self, name: &str) -> Option<&PropertyValue> {
+        self.properties
+            .get(name)
+            .and_then(|item| item.value.as_ref())
+    }
+
+    pub fn variables(&self) -> impl Iterator<Item = (&String, &UnresolvedPropertyValue)> {
+        self.variables
+            .iter()
+            .map(|(name, item)| (name, &item.unresolved))
+    }
+
+    pub fn property_names(&self) -> impl Iterator<Item = &String> {
+        self.properties.iter().map(|(name, _)| name)
+    }
+
+    pub fn items(&self) -> impl Iterator<Item = (ScopeName, &ScopeItem)> {
+        let variables = self
+            .variables
+            .iter()
+            .map(|(name, entry)| (ScopeName::Variable(name.clone(), self.id), entry));
+        let properties = self
+            .properties
+            .iter()
+            .map(|(name, entry)| (ScopeName::Property(name.clone(), self.id), entry));
+
+        variables.chain(properties)
+    }
+
+    #[allow(dead_code)]
+    pub fn has_properties(&self) -> bool {
+        !self.properties.is_empty()
+    }
+
+    pub fn add_variables<'a, I>(&mut self, variables: I)
+    where
+        I: IntoIterator<Item = (&'a String, &'a UnresolvedPropertyValue)>,
+    {
+        for (name, value) in variables {
+            self.variables.insert(
+                name.clone(),
+                ScopeItem {
+                    unresolved: value.clone(),
+                    value: None,
+                },
+            );
+        }
+    }
+
+    pub fn add_resolved_variables<'a, I>(&mut self, variables: I)
+    where
+        I: IntoIterator<Item = (&'a String, &'a PropertyValue)>,
+    {
+        for (name, value) in variables {
+            self.variables.insert(
+                name.clone(),
+                ScopeItem {
+                    unresolved: UnresolvedPropertyValue::Constant(value.clone()),
+                    value: Some(value.clone()),
+                },
+            );
+        }
+    }
+
+    pub fn add_properties<'a, I>(&mut self, properties: I)
+    where
+        I: IntoIterator<Item = (&'a String, &'a UnresolvedPropertyValue)>,
+    {
+        for (name, value) in properties {
+            self.properties.insert(
+                name.clone(),
+                ScopeItem {
+                    unresolved: value.clone(),
+                    value: None,
+                },
+            );
+        }
+    }
+
+    pub fn merge(&mut self, other: &Scope) {
+        self.add_properties(
+            other
+                .properties
+                .iter()
+                .map(|(name, item)| (name, &item.unresolved)),
+        );
+        self.add_variables(
+            other
+                .variables
+                .iter()
+                .map(|(name, item)| (name, &item.unresolved)),
+        );
+        self.children.extend(other.children.iter().cloned());
+    }
+}
+
+lazy_static! {
+    pub(crate) static ref EMPTY_SET: HashSet<ScopeName> = HashSet::new();
+}
+
+/// A dependency graph for scope names.
+#[derive(Debug, Clone, Default, PartialEq)]
+pub(crate) struct DependencyGraph {
+    /// A map for defining definition dependencies between scope names.
+    /// Maps a scope name to its evaluation dependencies.
+    map: HashMap<ScopeName, HashSet<ScopeName>>,
+    /// A map for defining usage dependencies between scope names.
+    /// Maps a scope name to other scope names that depend on it for evaluation.
+    reverse_map: HashMap<ScopeName, HashSet<ScopeName>>,
+    /// The topologically sorted order for the scope names in this dependency
+    /// graph.
+    order_list: Option<Vec<ScopeName>>,
+    /// A map for easily getting the order of scope names.
+    order_map: Option<HashMap<ScopeName, usize>>,
+}
+impl DependencyGraph {
+    /// Adds a scope name to this dependency graph.
+    pub fn add_node(&mut self, name: ScopeName) {
+        self.map.entry(name).or_default();
+    }
+
+    /// Adds a dependency relation to the graph.
+    pub fn add_dependency(&mut self, name: ScopeName, dependency: ScopeName) {
+        let d = self.map.entry(name.clone()).or_default();
+        d.insert(dependency.clone());
+        let d = self.reverse_map.entry(dependency).or_default();
+        d.insert(name);
+    }
+
+    /// Returns the scope names that depend on `name`.
+    pub fn get_dependents(&self, name: &ScopeName) -> &HashSet<ScopeName> {
+        self.reverse_map.get(name).unwrap_or(&EMPTY_SET)
+    }
+
+    /// Iterates over the nodes defined in this dependency graph.
+    pub fn nodes(&self) -> impl Iterator<Item = &ScopeName> {
+        self.map.iter().map(|(key, _)| key)
+    }
+
+    /// Returns the topologically sorted order of the nodes.
+    #[allow(dead_code)]
+    pub fn order(&self) -> &Vec<ScopeName> {
+        self.order_list.as_ref().unwrap()
+    }
+
+    /// Returns a map for determining the index of each node
+    /// in the topologically sorted order.
+    pub fn order_map(&self) -> &HashMap<ScopeName, usize> {
+        self.order_map.as_ref().unwrap()
+    }
+
+    /// Updates the topological sort for this graph.
+    fn update_order(&mut self) {
+        let mut visited: HashSet<&ScopeName> = HashSet::new();
+        let mut path: Vec<&ScopeName> = Vec::new();
+        let mut output: Vec<ScopeName> = Vec::new();
+
+        fn dfs<'a>(
+            node: &'a ScopeName,
+            graph: &'a HashMap<ScopeName, HashSet<ScopeName>>,
+            visited: &mut HashSet<&'a ScopeName>,
+            path: &mut Vec<&'a ScopeName>,
+            output: &mut Vec<ScopeName>,
+        ) {
+            if visited.contains(node) {
+                return;
+            }
+
+            path.push(node);
+
+            if let Some(deps) = graph.get(node) {
+                for dep in deps {
+                    if visited.contains(dep) {
+                        continue;
+                    }
+                    if path.contains(&dep) {
+                        let s = path
+                            .iter()
+                            .map(|l| format!("{}", l))
+                            .collect::<Vec<_>>()
+                            .join(", ");
+                        panic!("cycle detected in dependency graph: {}", s);
+                    }
+                    dfs(dep, graph, visited, path, output);
+                }
+            }
+
+            path.pop();
+            visited.insert(node);
+            output.push(node.clone());
+        }
+
+        for node in self.map.keys() {
+            if !visited.contains(node) {
+                dfs(&node, &self.map, &mut visited, &mut path, &mut output);
+            }
+        }
+
+        let map = output
+            .iter()
+            .enumerate()
+            .map(|(i, o)| (o.clone(), i))
+            .collect::<HashMap<_, _>>();
+        self.order_map = Some(map);
+        self.order_list = Some(output);
+    }
+
+    /// Generates Graphviz' DOT code to visualize the dependency graph.
+    #[allow(dead_code)]
+    pub fn format_dot(&self) -> String {
+        let mut out = String::new();
+
+        writeln!(&mut out, "digraph DependencyGraph {{").unwrap();
+        writeln!(&mut out, "  rankdir=TB;").unwrap();
+
+        // Collect all nodes (keys + dependencies)
+        let mut nodes = HashSet::new();
+        for (name, deps) in &self.map {
+            nodes.insert(name);
+            for dep in deps {
+                nodes.insert(dep);
+            }
+        }
+
+        // Emit nodes
+        for node in &nodes {
+            writeln!(&mut out, r#"  "{}";"#, node).unwrap();
+        }
+
+        // Emit edges: name -> dependency
+        for (name, deps) in &self.map {
+            for dep in deps {
+                writeln!(&mut out, r#"  "{}" -> "{}";"#, name, dep).unwrap();
+            }
+        }
+
+        writeln!(&mut out, "}}").unwrap();
+        out
+    }
+}
+
+/// A structure for managing variables and
+/// properties in the element hierarchy.
+#[derive(Debug, Clone, Default, PartialEq)]
+pub(crate) struct ScopeTree {
+    /// The defined scopes.
+    scopes: Vec<Scope>,
+    dependency_graph: Option<DependencyGraph>,
+}
+impl ScopeTree {
+    /// Creates a new scope.
+    pub fn create(&mut self, parent: Option<ScopeId>) -> &mut Scope {
+        let id = ScopeId(self.scopes.len());
+        self.scopes.push(Scope::new(id.clone(), parent));
+
+        if let Some(parent) = parent {
+            if let Some(scope) = self.get_mut(parent) {
+                scope.children.push(id);
+            }
+        }
+
+        &mut self.scopes[id.0]
+    }
+
+    /// Returns a reference to scope with the given id.
+    pub fn get(&self, id: ScopeId) -> Option<&Scope> {
+        self.scopes.get(*id)
+    }
+
+    /// Returns a mutable reference to the scope with the given id.
+    pub fn get_mut(&mut self, id: ScopeId) -> Option<&mut Scope> {
+        self.scopes.get_mut(*id)
+    }
+
+    /// Returns a mutable reference for an item based on scope name.
+    pub fn get_item_mut(&mut self, name: &ScopeName) -> Option<&mut ScopeItem> {
+        let Some(scope) = self.get_mut(name.scope_id()) else {
+            return None;
+        };
+
+        match name {
+            ScopeName::Variable(name, _) => scope.variables.get_mut(name),
+            ScopeName::Property(name, _) => scope.properties.get_mut(name),
+        }
+    }
+
+    /// Returns a reference for an item based on scope name.
+    pub fn get_entry(&self, name: &ScopeName) -> Option<&ScopeItem> {
+        let Some(scope) = self.get(name.scope_id()) else {
+            return None;
+        };
+        scope.get(name)
+    }
+
+    /// Finds the variable with `name` defined in the `start` scope or any of
+    /// its parents in the hierarchy. Returns the variable item and the id
+    /// of the scope that owns the variable, if any, otherwise returns
+    /// `None`.
+    pub fn find_variable(&self, name: &String, start: ScopeId) -> Option<(&ScopeItem, ScopeId)> {
+        let mut scope = self.get(start)?;
+
+        loop {
+            if let Some(value) = scope.variables.get(name) {
+                return Some((value, scope.id()));
+            }
+            scope = self.get(scope.parent?)?;
+        }
+    }
+
+    /// Evaluates the scope name specified.
+    pub fn evaluate(&mut self, name: &ScopeName) {
+        let Some(item) = self.get_entry(name) else {
+            return;
+        };
+
+        let value = match &item.unresolved {
+            UnresolvedPropertyValue::Constant(value) => value.clone(),
+            UnresolvedPropertyValue::Variable(variable) => {
+                let value = self
+                    .find_variable(variable, name.scope_id())
+                    .and_then(|(item, _)| item.value.clone());
+                match value {
+                    Some(value) => value,
+                    None => panic!("variable {name} not defined."),
+                }
+            }
+        };
+
+        let Some(item) = self.get_item_mut(name) else {
+            return;
+        };
+        item.value = Some(value);
+    }
+
+    /// Updates the dependency graph of this scope tree.
+    pub fn update_dependency_graph(&mut self) {
+        let mut graph = DependencyGraph::default();
+
+        // map to keep track of the variables in scope.
+        let mut variables = HashMap::<String, ScopeId>::new();
+
+        // perform a DFS in the tree
+        let mut stack = vec![(ScopeId(0), false)];
+        while let Some((id, post)) = stack.pop() {
+            let Some(scope) = self.get(id) else { continue };
+
+            // this means we already visited the children of this scope.
+            // remove the variables of this scope from `variables`.
+            if post {
+                for name in scope.variables.keys() {
+                    let Some(&origin_scope) = variables.get(name) else {
+                        continue;
+                    };
+                    if origin_scope == id {
+                        variables.remove(name);
+                    }
+                }
+                continue;
+            }
+
+            // push this scope with post set to true to revisit it later
+            stack.push((id, true));
+            // push its children
+            stack.extend(scope.children.iter().map(|c| (*c, false)).rev());
+
+            variables.extend(scope.variables.iter().map(|(name, _)| (name.clone(), id)));
+
+            for (name, entry) in scope.items() {
+                graph.add_node(name.clone());
+
+                match &entry.unresolved {
+                    UnresolvedPropertyValue::Variable(variable) => {
+                        let Some(&origin_scope) = variables.get(variable) else {
+                            panic!("Undefined variable {}", variable);
+                        };
+                        graph.add_dependency(
+                            name,
+                            ScopeName::Variable(variable.clone(), origin_scope),
+                        );
+                    }
+                    _ => {}
+                }
+            }
+        }
+
+        graph.update_order();
+        self.dependency_graph = Some(graph);
+    }
+
+    /// Returns the dependency graph of this scope tree.
+    pub fn dependency_graph(&self) -> &DependencyGraph {
+        self.dependency_graph.as_ref().unwrap()
+    }
+
+    /// Generates Graphviz' DOT code to visualize the scope tree.
+    #[allow(dead_code)]
+    pub fn format_dot(&self) -> String {
+        let mut out = String::new();
+
+        writeln!(&mut out, "digraph ScopeTree {{").unwrap();
+        writeln!(&mut out, "  rankdir=TB;").unwrap();
+        writeln!(&mut out, "  node [shape=record, fontname=\"monospace\"];").unwrap();
+
+        // Emit nodes
+        for scope in &self.scopes {
+            let mut label = String::new();
+
+            // Header
+            write!(&mut label, "#{}", scope.id.0).unwrap();
+
+            // Variables (sorted for stable output)
+            let mut vars: Vec<_> = scope.variables.iter().collect();
+            vars.sort_by_key(|(k, _)| *k);
+
+            for (name, entry) in vars {
+                let value = format!("{}", entry.unresolved).replace("\"", "'");
+                write!(&mut label, r"\n${}: {}", name, value).unwrap();
+            }
+
+            // Properties (sorted for stable output)
+            let mut props: Vec<_> = scope.properties.iter().collect();
+            props.sort_by_key(|(k, _)| *k);
+
+            for (name, entry) in props {
+                let value = format!("{}", entry.unresolved).replace("\"", "'");
+                write!(&mut label, r"\n{}: {}", name, value).unwrap();
+            }
+
+            writeln!(&mut out, r#"  scope{} [label="{}"];"#, scope.id.0, label).unwrap();
+        }
+
+        // Emit edges
+        for scope in &self.scopes {
+            for &child in &scope.children {
+                writeln!(&mut out, "  scope{} -> scope{};", scope.id.0, child.0).unwrap();
+            }
+        }
+
+        writeln!(&mut out, "}}").unwrap();
+        out
+    }
+}
+
+lazy_static! {
+    static ref EMPTY_ENTITY_SET: HashSet<Entity> = HashSet::new();
+}
+
+/// A structure for managing scope changes and triggering node updates.
+#[derive(Debug, Deref, DerefMut, Default)]
+pub(crate) struct ScopeNotificationMap {
+    #[deref]
+    map: HashMap<ScopeId, HashSet<Entity>>,
+}
+impl ScopeNotificationMap {
+    /// Register a node entity as listener to the scope specified.
+    pub fn register(&mut self, scope: ScopeId, entity: Entity) {
+        self.map.entry(scope).or_default().insert(entity);
+    }
+
+    /// Removes a node entity from the list of listeners of the scope specified.
+    pub fn remove(&mut self, scope: ScopeId, entity: Entity) {
+        self.map.entry(scope).or_default().remove(&entity);
+    }
+
+    /// Returns an iterator of node entities that listen to changes in the given
+    /// scope.
+    pub fn get(&self, scope: ScopeId) -> impl Iterator<Item = Entity> {
+        self.map
+            .get(&scope)
+            .unwrap_or(&EMPTY_ENTITY_SET)
+            .iter()
+            .cloned()
+    }
+}
diff --git a/src/parse/style.rs b/src/parse/style.rs
index 0303b42..4283b20 100644
--- a/src/parse/style.rs
+++ b/src/parse/style.rs
@@ -1,13 +1,13 @@
 //! A parser for NekoMaid UI style definitions.
 
-use bevy::platform::collections::{HashMap, HashSet};
+use bevy::platform::collections::HashSet;
 
 use crate::parse::NekoMaidParseError;
 use crate::parse::context::{NekoResult, ParseContext};
 use crate::parse::layout::Layout;
-use crate::parse::property::{UnresolvedPropertyValue, parse_unresolved_property};
+use crate::parse::property::parse_unresolved_property;
+use crate::parse::scope::ScopeId;
 use crate::parse::token::TokenType;
-use crate::parse::value::PropertyValue;
 use crate::parse::widget::Widget;
 
 /// A NekoMaid UI style definition.
@@ -16,63 +16,20 @@ pub struct Style {
     /// The selector for the style.
     pub(crate) selector: Selector,
 
-    /// The unresolved properties defined in the style.
-    pub(crate) unresolved_properties: HashMap<String, UnresolvedPropertyValue>,
-
-    /// The properties defined in the style.
-    pub(crate) properties: HashMap<String, PropertyValue>,
+    /// The id of the scope containing the properties of this style.
+    pub(crate) scope_id: ScopeId,
 }
 
 impl Style {
     /// Creates a new Style with the given selector and properties.
-    pub(crate) fn new(
-        selector: Selector,
-        unresolved_properties: HashMap<String, UnresolvedPropertyValue>,
-    ) -> Self {
-        Self {
-            selector,
-            unresolved_properties,
-            properties: HashMap::new(),
-        }
-    }
-
-    /// Returns a reference to the selector of this style.
-    pub fn get_property(&self, name: &str) -> Option<&PropertyValue> {
-        self.properties.get(name)
-    }
-
-    /// Sets a property in this style.
-    pub fn set_property(&mut self, name: String, value: PropertyValue) {
-        self.properties.insert(name, value);
+    pub(crate) fn new(selector: Selector, scope_id: ScopeId) -> Self {
+        Self { selector, scope_id }
     }
 
     /// Returns a reference to the selector of this style.
     pub fn selector(&self) -> &Selector {
         &self.selector
     }
-
-    /// Returns a reference to the properties of this style.
-    pub fn properties(&self) -> &HashMap<String, PropertyValue> {
-        &self.properties
-    }
-
-    /// Resolve properties of this style.
-    pub fn resolve(&mut self, variables: &HashMap<String, PropertyValue>) -> NekoResult<()> {
-        for (name, value) in &self.unresolved_properties {
-            let prop = value.resolve(variables)?;
-            self.properties.insert(name.clone(), prop);
-        }
-
-        Ok(())
-    }
-
-    /// Merges another style into this one, overriding existing properties, and
-    /// adding new ones.
-    pub fn merge(&mut self, other: Style) {
-        for (key, value) in other.properties {
-            self.properties.insert(key, value);
-        }
-    }
 }
 
 /// A selector for targeting widgets in styles.
@@ -132,13 +89,13 @@ pub(super) fn parse_style(ctx: &mut ParseContext, mut selector: Selector) -> Nek
 
     ctx.expect(TokenType::OpenBrace)?;
 
-    let mut properties = HashMap::new();
+    let mut properties = vec![];
 
     while let Some(next) = ctx.peek() {
         match next.token_type {
             TokenType::Identifier => {
                 let property = parse_unresolved_property(ctx)?;
-                properties.insert(property.name, property.value);
+                properties.push((property.name, property.value));
             }
             TokenType::WithKeyword => {
                 parse_style(ctx, selector.clone())?;
@@ -161,7 +118,10 @@ pub(super) fn parse_style(ctx: &mut ParseContext, mut selector: Selector) -> Nek
     ctx.expect(TokenType::CloseBrace)?;
 
     if !properties.is_empty() {
-        ctx.add_style(Style::new(selector, properties));
+        let scope = ctx.create_scope(ScopeId(0));
+        scope.add_properties(properties.iter().map(|(k, v)| (k, v)));
+        let scope_id = scope.id();
+        ctx.add_style(Style::new(selector, scope_id));
     }
 
     Ok(())
diff --git a/src/parse/tests.rs b/src/parse/tests.rs
index 7a932dc..94fffad 100644
--- a/src/parse/tests.rs
+++ b/src/parse/tests.rs
@@ -1,17 +1,14 @@
 //! Tests
 
-use std::sync::Arc;
-
 use bevy::asset::AssetServer;
 use bevy::ecs::entity::Entity;
 use bevy::ecs::system::{Commands, Res};
-use bevy::platform::collections::{HashMap, HashSet};
+use bevy::platform::collections::HashSet;
 use pretty_assertions::assert_eq;
 
 use crate::parse::NekoMaidParser;
 use crate::parse::element::NekoElement;
-use crate::parse::property::UnresolvedPropertyValue;
-use crate::parse::style::{Selector, SelectorPart, Style};
+use crate::parse::style::{Selector, SelectorPart};
 use crate::parse::widget::NativeWidget;
 
 fn spawn_func(_: &Res<AssetServer>, _: &mut Commands, _: &NekoElement, _: Entity) -> Entity {
@@ -21,7 +18,6 @@ fn spawn_func(_: &Res<AssetServer>, _: &mut Commands, _: &NekoElement, _: Entity
 fn native<S: Into<String>>(name: S) -> NativeWidget {
     NativeWidget {
         name: name.into(),
-        default_properties: Arc::new(HashMap::new()),
         spawn_func,
     }
 }
@@ -57,42 +53,31 @@ style div {
     let module = parse.finish().unwrap();
 
     assert_eq!(
-        module.styles,
-        vec![Style {
-            selector: Selector {
-                hierarchy: vec![
-                    SelectorPart {
-                        widget: "div".into(),
-                        whitelist: HashSet::new(),
-                        blacklist: HashSet::new(),
-                    },
-                    SelectorPart {
-                        widget: "div".into(),
-                        whitelist: HashSet::from(["scrollview".into(), "active".into()]),
-                        blacklist: HashSet::new(),
-                    },
-                    SelectorPart {
-                        widget: "div".into(),
-                        whitelist: HashSet::from(["content-pane".into()]),
-                        blacklist: HashSet::new(),
-                    },
-                    SelectorPart {
-                        widget: "p".into(),
-                        whitelist: HashSet::from(["h1".into()]),
-                        blacklist: HashSet::new(),
-                    },
-                ]
-            },
-            properties: HashMap::new(),
-            unresolved_properties: {
-                let mut m = HashMap::new();
-                m.insert(
-                    "test".into(),
-                    UnresolvedPropertyValue::Constant("Hello".into()),
-                );
-                m
-            },
-        }]
+        module.styles[0].selector,
+        Selector {
+            hierarchy: vec![
+                SelectorPart {
+                    widget: "div".into(),
+                    whitelist: HashSet::new(),
+                    blacklist: HashSet::new(),
+                },
+                SelectorPart {
+                    widget: "div".into(),
+                    whitelist: HashSet::from(["scrollview".into(), "active".into()]),
+                    blacklist: HashSet::new(),
+                },
+                SelectorPart {
+                    widget: "div".into(),
+                    whitelist: HashSet::from(["content-pane".into()]),
+                    blacklist: HashSet::new(),
+                },
+                SelectorPart {
+                    widget: "p".into(),
+                    whitelist: HashSet::from(["h1".into()]),
+                    blacklist: HashSet::new(),
+                },
+            ]
+        },
     );
 }
 
@@ -130,33 +115,25 @@ style card {
     let module = parse.finish().unwrap();
 
     assert_eq!(
-        module.styles,
-        vec![Style {
-            selector: Selector {
-                hierarchy: vec![
-                    SelectorPart {
-                        widget: "div".into(),
-                        whitelist: HashSet::from(["card".into()]),
-                        blacklist: HashSet::new(),
-                    },
-                    SelectorPart {
-                        widget: "div".into(),
-                        whitelist: HashSet::from(["card-body".into()]),
-                        blacklist: HashSet::new(),
-                    },
-                    SelectorPart {
-                        widget: "p".into(),
-                        whitelist: HashSet::from(["h3".into()]),
-                        blacklist: HashSet::new(),
-                    },
-                ]
-            },
-            properties: {
-                let mut m = HashMap::new();
-                m.insert("test".into(), "Hello".into());
-                m
-            },
-            unresolved_properties: HashMap::new(),
-        }]
+        module.styles[0].selector,
+        Selector {
+            hierarchy: vec![
+                SelectorPart {
+                    widget: "div".into(),
+                    whitelist: HashSet::from(["card".into()]),
+                    blacklist: HashSet::new(),
+                },
+                SelectorPart {
+                    widget: "div".into(),
+                    whitelist: HashSet::from(["card-body".into()]),
+                    blacklist: HashSet::new(),
+                },
+                SelectorPart {
+                    widget: "p".into(),
+                    whitelist: HashSet::from(["h3".into()]),
+                    blacklist: HashSet::new(),
+                },
+            ]
+        },
     );
 }
diff --git a/src/parse/widget.rs b/src/parse/widget.rs
index 383e937..6d9d510 100644
--- a/src/parse/widget.rs
+++ b/src/parse/widget.rs
@@ -1,7 +1,5 @@
 //! A module for parsing NekoMaid UI widget definitions.
 
-use std::sync::Arc;
-
 use bevy::asset::AssetServer;
 use bevy::ecs::entity::Entity;
 use bevy::ecs::system::{Commands, Res};
@@ -13,7 +11,6 @@ use crate::parse::element::NekoElement;
 use crate::parse::layout::{Layout, parse_layout};
 use crate::parse::property::{UnresolvedPropertyValue, parse_variable};
 use crate::parse::token::{TokenPosition, TokenType};
-use crate::parse::value::PropertyValue;
 
 /// A NekoMaid UI widget definition.
 #[derive(Debug, Clone, PartialEq)]
@@ -54,9 +51,6 @@ pub struct NativeWidget {
     /// The name of the widget.
     pub name: String,
 
-    /// The default properties of the widget.
-    pub default_properties: Arc<HashMap<String, PropertyValue>>,
-
     /// The function used to spawn the widget.
     ///
     /// This function takes a mutable reference to `Commands` and the parent
diff --git a/src/render/mod.rs b/src/render/mod.rs
new file mode 100644
index 0000000..0e126ae
--- /dev/null
+++ b/src/render/mod.rs
@@ -0,0 +1,5 @@
+//! This module implements the logic for spawning and updating UI trees.
+
+pub mod spawn;
+pub mod systems;
+pub mod update;
diff --git a/src/render/spawn.rs b/src/render/spawn.rs
new file mode 100644
index 0000000..96c05fa
--- /dev/null
+++ b/src/render/spawn.rs
@@ -0,0 +1,86 @@
+//! A module for defining the spawning functions for each native widget
+//! and the default property values.
+
+use bevy::prelude::*;
+
+use crate::parse::element::NekoElement;
+
+/// Spawns a `div` native widget.
+pub(crate) fn spawn_div(
+    _: &Res<AssetServer>,
+    commands: &mut Commands,
+    _: &NekoElement,
+    parent: Entity,
+) -> Entity {
+    commands
+        .spawn((
+            ChildOf(parent),
+            Node::default(),
+            BackgroundColor::default(),
+            BorderColor::default(),
+            BorderRadius::default(),
+        ))
+        .id()
+}
+
+/// Spawns an `img` native widget.
+pub(crate) fn spawn_img(
+    _: &Res<AssetServer>,
+    commands: &mut Commands,
+    _: &NekoElement,
+    parent: Entity,
+) -> Entity {
+    commands
+        .spawn((
+            ChildOf(parent),
+            Node::default(),
+            BackgroundColor::default(),
+            BorderColor::default(),
+            BorderRadius::default(),
+            ImageNode::default(),
+        ))
+        .id()
+}
+
+/// Spawns an `p` native widget.
+pub(crate) fn spawn_p(
+    _: &Res<AssetServer>,
+    commands: &mut Commands,
+    _: &NekoElement,
+    parent: Entity,
+) -> Entity {
+    commands
+        .spawn((
+            ChildOf(parent),
+            Node::default(),
+            BackgroundColor::default(),
+            BorderColor::default(),
+            BorderRadius::default(),
+            Text::default(),
+            TextFont::default(),
+            TextLayout::default(),
+            TextColor::default(),
+        ))
+        .id()
+}
+
+/// Spawns an `span` native widget.
+pub(crate) fn spawn_span(
+    _: &Res<AssetServer>,
+    commands: &mut Commands,
+    _: &NekoElement,
+    parent: Entity,
+) -> Entity {
+    commands
+        .spawn((
+            ChildOf(parent),
+            Node::default(),
+            BackgroundColor::default(),
+            BorderColor::default(),
+            BorderRadius::default(),
+            TextSpan::default(),
+            TextFont::default(),
+            TextColor::default(),
+        ))
+        .id()
+}
diff --git a/src/render/systems.rs b/src/render/systems.rs
new file mode 100644
index 0000000..4713d3b
--- /dev/null
+++ b/src/render/systems.rs
@@ -0,0 +1,465 @@
+//! A module that defines all systems responsible for rendering the UI.
+
+use std::time::Instant;
+
+use bevy::asset::{AssetLoadFailedEvent, LoadState};
+use bevy::platform::collections::HashSet;
+use bevy::prelude::*;
+
+use crate::asset::NekoMaidUI;
+use crate::components::{NekoUINode, NekoUITree};
+use crate::marker::MarkerRegistry;
+use crate::parse::element::NekoElementBuilder;
+use crate::parse::scope::{ScopeId, ScopeNotificationMap};
+use crate::render::update::update_node;
+
+/// Listens for changes to the [`NekoUITree`] component and spawns the UI tree
+/// accordingly.
+#[allow(clippy::type_complexity)]
+pub(crate) fn spawn_tree(
+    asset_server: Res<AssetServer>,
+    assets: Res<Assets<NekoMaidUI>>,
+    markers: Res<MarkerRegistry>,
+    roots: Query<
+        (Entity, &mut NekoUITree, &mut Node),
+        Or<(Added<NekoUITree>, Changed<NekoUITree>)>,
+    >,
+    mut commands: Commands,
+) {
+    for (root_entity, mut root, mut node) in roots {
+        if !root.is_dirty() {
+            continue;
+        }
+        let t = Instant::now();
+
+        root.clear_dirty();
+        commands.entity(root_entity).despawn_children();
+
+        *node = Node {
+            width: Val::Percent(100.0),
+            height: Val::Percent(100.0),
+            ..default()
+        };
+
+        let Some(asset) = assets.get(root.asset()) else {
+            match asset_server.get_load_state(root.asset()) {
+                Some(LoadState::Loading) => {}
+                _ => error!("Failed to load NekoMaidUI asset for NekoUITree"),
+            }
+            continue;
+        };
+
+        root.scope = asset.scope.clone();
+        for name in asset.scope.dependency_graph().nodes() {
+            root.update_names.insert(name.clone());
+        }
+        root.scope_notification.clear();
+
+        for element in &asset.elements {
+            spawn_element(
+                &asset_server,
+                &markers,
+                &mut root.scope_notification,
+                &mut commands,
+                &element,
+                root_entity,
+                root_entity,
+            );
+        }
+
+        debug!(
+            "Spawned tree {root_entity} in {} ms.",
+            t.elapsed().as_millis()
+        );
+    }
+}
+
+/// Recursively spawns a [`NekoElementBuilder`] and its children.
+fn spawn_element(
+    asset_server: &Res<AssetServer>,
+    markers: &MarkerRegistry,
+    scope_notification: &mut ScopeNotificationMap,
+    commands: &mut Commands,
+    element: &NekoElementBuilder,
+    parent: Entity,
+    root: Entity,
+) {
+    let entity =
+        (element.native_widget.spawn_func)(asset_server, commands, &element.element, parent);
+
+    scope_notification.register(element.element.scope_id(), entity);
+
+    commands.entity(entity).insert((NekoUINode {
+        root,
+        element: element.element.clone(),
+        updated_properties: vec![],
+    },));
+
+    for child in &element.children {
+        spawn_element(
+            asset_server,
+            markers,
+            scope_notification,
+            commands,
+            child,
+            entity,
+            root,
+        );
+    }
+}
+
+/// Handle interactions on interactable elements.
+pub fn handle_interactions(nodes: Query<(&mut NekoUINode, &Interaction), Changed<Interaction>>) {
+    for (mut node, interaction) in nodes {
+        match interaction {
+            Interaction::Pressed => {
+                node.element.add_class("pressed".to_string());
+            }
+            Interaction::Hovered => {
+                node.element.add_class("hovered".to_string());
+                node.element.remove_class("pressed");
+            }
+            Interaction::None => {
+                node.element.remove_class("hovered");
+                node.element.remove_class("pressed");
+            }
+        }
+    }
+}
+
+/// Removes the `hovered` and `pressed` classes from elements that
+/// are no longer interactable.
+pub fn removed_interactable(
+    event: On<Remove, Interaction>,
+    mut nodes: Query<&mut NekoUINode, With<Interaction>>,
+) {
+    let Ok(mut node) = nodes.get_mut(event.entity) else {
+        return;
+    };
+    node.element.remove_class("hovered");
+    node.element.remove_class("pressed");
+}
+
+/// Update class paths and class markers.
+pub fn handle_class_changes(
+    mut commands: Commands,
+    mut set: ParamSet<(
+        Query<Entity, Changed<NekoUINode>>,
+        Query<(&mut NekoUINode, Option<&Children>)>,
+    )>,
+    markers: Res<MarkerRegistry>,
+) {
+    let changed_nodes = set.p0().iter().collect::<Vec<_>>();
+
+    if changed_nodes.is_empty() {
+        return;
+    }
+
+    let t = Instant::now();
+
+    let mut entities = vec![];
+    let mut added_classes = vec![];
+    let mut removed_classes = vec![];
+
+    for &entity in &changed_nodes {
+        let mut nodes = set.p1();
+        let Ok((mut node, children)) = nodes.get_mut(entity) else {
+            continue;
+        };
+        if node.element.added_classes.is_empty() && node.element.removed_classes.is_empty() {
+            continue;
+        }
+
+        for class in &node.element.added_classes {
+            markers.insert(commands.entity(entity), class);
+        }
+        for class in &node.element.removed_classes {
+            markers.remove(commands.entity(entity), class);
+        }
+
+        added_classes.extend(node.element.added_classes.drain(..));
+        removed_classes.extend(node.element.removed_classes.drain(..));
+
+        let Some(children) = children else { continue };
+        entities.extend(children.iter().map(|e| (e, 1)));
+
+        while let Some((child, i)) = entities.pop() {
+            let Ok((mut node, children)) = nodes.get_mut(child) else {
+                continue;
+            };
+
+            let Some(set) = node.element.classpath_mut().get_mut(i) else {
+                continue;
+            };
+            for class in &added_classes {
+                set.classes.insert(class.clone());
+            }
+            for class in &removed_classes {
+                set.classes.remove(class);
+            }
+
+            if let Some(children) = children {
+                entities.extend(children.iter().map(|e| (e, i + 1)));
+            }
+        }
+    }
+
+    let elapsed = t.elapsed().as_millis();
+    debug!(
+        "Updated class paths in {elapsed} ms of {} element(s).",
+        changed_nodes.len()
+    );
+}
+
+/// Update scope notifications on style activations/deactivations in elements.
+pub fn update_styles(
+    mut roots: Query<&mut NekoUITree>,
+    mut nodes: Query<(Entity, &mut NekoUINode), Changed<NekoUINode>>,
+) {
+    if nodes.is_empty() {
+        return;
+    }
+
+    let t = Instant::now();
+
+    let mut updates = vec![];
+
+    for (entity, mut node) in &mut nodes {
+        if node.element.classpath_changed {
+            node.element.update_active_styles();
+        }
+        if node.element.activated_styles.is_empty() && node.element.deactivated_styles.is_empty() {
+            continue;
+        }
+
+        let Ok(mut root) = roots.get_mut(node.root) else {
+            continue;
+        };
+
+        for &i in &node.element.deactivated_styles {
+            let Some(style) = node.element.styles.get(i) else {
+                continue;
+            };
+            let scope_id = style.value.scope_id;
+
+            root.scope_notification.remove(scope_id, entity);
+            updates.push(scope_id);
+        }
+
+        for &i in &node.element.activated_styles {
+            let Some(style) = node.element.styles.get(i) else {
+                continue;
+            };
+            let scope_id = style.value.scope_id;
+
+            root.scope_notification
+                .register(style.value.scope_id, entity);
+            updates.push(scope_id);
+        }
+
+        node.element.deactivated_styles.clear();
+        node.element.activated_styles.clear();
+
+        for scope_id in &updates {
+            let Some(scope) = root.scope.get(*scope_id) else {
+                continue;
+            };
+            for name in scope.property_names() {
+                node.updated_properties.push(name.clone());
+            }
+        }
+    }
+
+    let elapsed = t.elapsed().as_millis();
+    debug!(
+        "Updated styles in {elapsed} ms of {} element(s).",
+        nodes.count()
+    );
+}
+
+/// Update scope of Neko UI trees.
+pub fn update_scope(
+    mut roots: Query<(Entity, &mut NekoUITree), Changed<NekoUITree>>,
+    mut nodes: Query<&mut NekoUINode>,
+) {
+    for (entity, root) in roots.iter_mut() {
+        if root.update_names.is_empty() {
+            continue;
+        }
+
+        let t = Instant::now();
+
+        let root = root.into_inner();
+        let scopes = &mut root.scope;
+        let update_names = &root.update_names;
+
+        let Some(global_scope) = scopes.get_mut(ScopeId(0)) else {
+            return;
+        };
+
+        global_scope.add_resolved_variables(root.variables.iter());
+
+        let variables = {
+            let graph = scopes.dependency_graph();
+
+            let mut to_update = HashSet::new();
+            let mut remaining = update_names.iter().collect::<Vec<_>>();
+            while let Some(name) = remaining.pop() {
+                to_update.insert(name);
+                remaining.extend(graph.get_dependents(name));
+            }
+
+            let mut variables = to_update.iter().map(|&n| n.clone()).collect::<Vec<_>>();
+            let order = graph.order_map();
+            variables.sort_by_key(|n| order.get(n).unwrap_or(&0));
+
+            variables
+        };
+
+        // println!(
+        //     "Updating variables: {}",
+        //     variables
+        //         .iter()
+        //         .map(|v| format!("{v}"))
+        //         .collect::<Vec<_>>()
+        //         .join(", ")
+        // );
+
+        for name in &variables {
+            scopes.evaluate(name);
+
+            for entity in root.scope_notification.get(name.scope_id()) {
+                let Ok(mut node) = nodes.get_mut(entity) else {
+                    continue;
+                };
+                node.updated_properties.push(name.name().clone());
+            }
+        }
+
+        root.update_names.clear();
+
+        debug!(
+            "Updated scope of {entity} in {} ms.",
+            t.elapsed().as_millis()
+        );
+    }
+}
+
+/// Update node properties.
+pub(crate) fn update_nodes(
+    asset_server: Res<AssetServer>,
+    mut roots: Query<&mut NekoUITree>,
+    q: Query<
+        (
+            &mut NekoUINode,
+            &mut Node,
+            &mut BorderColor,
+            &mut BorderRadius,
+            &mut BackgroundColor,
+            Option<&mut ImageNode>,
+            Option<&mut Text>,
+            Option<&mut TextSpan>,
+            Option<&mut TextFont>,
+            Option<&mut TextColor>,
+            Option<&mut TextLayout>,
+        ),
+        Changed<NekoUINode>,
+    >,
+) {
+    if q.is_empty() {
+        return;
+    }
+
+    let t = Instant::now();
+
+    for (
+        neko_node,
+        mut node,
+        mut border_color,
+        mut border_radius,
+        mut background_color,
+        image_node,
+        text,
+        span,
+        font,
+        color,
+        layout,
+    ) in q
+    {
+        // println!("Updating properties {:?} from {entity}",
+        // neko_node.updated_properties);
+
+        if neko_node.updated_properties.is_empty() {
+            continue;
+        }
+
+        let NekoUINode {
+            updated_properties,
+            element,
+            root,
+            ..
+        } = neko_node.into_inner();
+
+        let Ok(mut root) = roots.get_mut(*root) else {
+            continue;
+        };
+
+        update_node(
+            &asset_server,
+            element.view_mut(&mut root.scope),
+            updated_properties.iter(),
+            &mut node,
+            &mut border_color,
+            &mut border_radius,
+            &mut background_color,
+            &mut image_node.map(|v| v.into_inner()),
+            &mut text.map(|v| v.into_inner()),
+            &mut span.map(|v| v.into_inner()),
+            &mut font.map(|v| v.into_inner()),
+            &mut color.map(|v| v.into_inner()),
+            &mut layout.map(|v| v.into_inner()),
+        );
+
+        updated_properties.clear();
+    }
+
+    debug!("Updated node properties in {} ms.", t.elapsed().as_millis());
+}
+
+/// Listens for changes to the [`NekoMaidUI`] asset and updates any existing UI
+/// trees accordingly.
+pub(crate) fn update_tree(
+    mut asset_updates: MessageReader<AssetEvent<NekoMaidUI>>,
+    mut roots: Query<&mut NekoUITree>,
+) {
+    for event in asset_updates.read() {
+        match event {
+            AssetEvent::Modified { id } | AssetEvent::LoadedWithDependencies { id } => {
+                for mut root in roots.iter_mut() {
+                    if root.asset().id() == *id {
+                        root.mark_dirty();
+                    }
+                }
+            }
+            _ => {}
+        }
+    }
+}
+
+/// Listens for asset load failures and clears any existing UI trees that
+/// reference the failed asset.
+///
+/// (Having a UI tree suddenly disappear is a good indicator to the developer
+/// that something has gone wrong with their code.)
+pub(crate) fn asset_failure(
+    mut asset_failures: MessageReader<AssetLoadFailedEvent<NekoMaidUI>>,
+    mut roots: Query<&mut NekoUITree>,
+) {
+    for event in asset_failures.read() {
+        for mut root in roots.iter_mut() {
+            if root.asset().id() == event.id {
+                root.mark_dirty();
+            }
+        }
+    }
+}
diff --git a/src/render/update.rs b/src/render/update.rs
new file mode 100644
index 0000000..5a37c8d
--- /dev/null
+++ b/src/render/update.rs
@@ -0,0 +1,331 @@
+//! A module that defines the node update logic.
+
+use bevy::image::TRANSPARENT_IMAGE_HANDLE;
+use bevy::prelude::*;
+
+use crate::parse::element::NekoElementView;
+use crate::parse::value::PropertyValue;
+
+/// Partially updates the given components based on the current computed
+/// properties.
+pub fn update_node<'a>(
+    asset_server: &Res<AssetServer>,
+    mut element: NekoElementView<'a>,
+    updated_properties: impl Iterator<Item = &'a String>,
+    // node
+    node: &mut Node,
+    border_color: &mut BorderColor,
+    border_radius: &mut BorderRadius,
+    background_color: &mut BackgroundColor,
+    // img
+    image: &mut Option<&mut ImageNode>,
+    // text
+    text: &mut Option<&mut Text>,
+    span: &mut Option<&mut TextSpan>,
+    font: &mut Option<&mut TextFont>,
+    color: &mut Option<&mut TextColor>,
+    layout: &mut Option<&mut TextLayout>,
+) {
+    for property in updated_properties {
+        // println!("Updating {property}");
+        match property.as_str() {
+            // --- node ---
+
+            // basic layout
+            "display" => node.display = element.get_as("display").unwrap_or_default(),
+            "box-sizing" => node.box_sizing = element.get_as("box-sizing").unwrap_or_default(),
+            "position-type" => {
+                node.position_type = element.get_as("position-type").unwrap_or_default()
+            }
+            // overflow
+            "overflow-x" => node.overflow.x = element.get_as("overflow-x").unwrap_or_default(),
+            "overflow-y" => node.overflow.y = element.get_as("overflow-y").unwrap_or_default(),
+            "scrollbar-width" => {
+                node.scrollbar_width = element.get_as("scrollbar-width").unwrap_or_default()
+            }
+            "overflow-clip-margin-box" => {
+                node.overflow_clip_margin.visual_box = element
+                    .get_as("overflow-clip-margin-box")
+                    .unwrap_or_default()
+            }
+            "overflow-clip-margin" => {
+                node.overflow_clip_margin.margin =
+                    element.get_as("overflow-clip-margin").unwrap_or_default()
+            }
+            // positioning
+            "left" => node.left = element.get_as("left").unwrap_or_default(),
+            "top" => node.top = element.get_as("top").unwrap_or_default(),
+            "right" => node.right = element.get_as("right").unwrap_or_default(),
+            "bottom" => node.bottom = element.get_as("bottom").unwrap_or_default(),
+            // sizing
+            "width" => node.width = element.get_as("width").unwrap_or_default(),
+            "height" => node.height = element.get_as("height").unwrap_or_default(),
+            "min-width" => node.min_width = element.get_as("min-width").unwrap_or_default(),
+            "min-height" => node.min_height = element.get_as("min-height").unwrap_or_default(),
+            "max-width" => node.max_width = element.get_as("max-width").unwrap_or_default(),
+            "max-height" => node.max_height = element.get_as("max-height").unwrap_or_default(),
+            "aspect-ratio" => {
+                node.aspect_ratio = element.get_as("aspect-ratio").unwrap_or_default()
+            }
+            // alignment
+            "align-items" => node.align_items = element.get_as("align-items").unwrap_or_default(),
+            "justify-items" => {
+                node.justify_items = element.get_as("justify-items").unwrap_or_default()
+            }
+            "align-self" => node.align_self = element.get_as("align-self").unwrap_or_default(),
+            "justify-self" => {
+                node.justify_self = element.get_as("justify-self").unwrap_or_default()
+            }
+            "align-content" => {
+                node.align_content = element.get_as("align-content").unwrap_or_default()
+            }
+            "justify-content" => {
+                node.justify_content = element.get_as("justify-content").unwrap_or_default()
+            }
+            // margin
+            "margin-top" | "margin-left" | "margin-right" | "margin-bottom" | "margin" => {
+                let margin = element.get_as("margin").unwrap_or(Val::Px(0.0));
+                node.margin.top = element.get_as_or("margin-top", margin);
+                node.margin.left = element.get_as_or("margin-left", margin);
+                node.margin.right = element.get_as_or("margin-right", margin);
+                node.margin.bottom = element.get_as_or("margin-bottom", margin);
+            }
+            // padding
+            "padding-top" | "padding-left" | "padding-right" | "padding-bottom" | "padding" => {
+                let padding = element.get_as("padding").unwrap_or(Val::Px(0.0));
+                node.padding.top = element.get_as_or("padding-top", padding);
+                node.padding.left = element.get_as_or("padding-left", padding);
+                node.padding.right = element.get_as_or("padding-right", padding);
+                node.padding.bottom = element.get_as_or("padding-bottom", padding);
+            }
+            // border
+            "border-thickness-top"
+            | "border-thickness-left"
+            | "border-thickness-right"
+            | "border-thickness-bottom"
+            | "border-thickness" => {
+                let border = element.get_as("border-thickness").unwrap_or(Val::Px(0.0));
+                node.border.top = element.get_as_or("border-thickness-top", border);
+                node.border.left = element.get_as_or("border-thickness-left", border);
+                node.border.right = element.get_as_or("border-thickness-right", border);
+                node.border.bottom = element.get_as_or("border-thickness-bottom", border);
+            }
+            // flex
+            "flex-direction" => {
+                node.flex_direction = element.get_as("flex-direction").unwrap_or_default()
+            }
+            "flex-wrap" => node.flex_wrap = element.get_as("flex-wrap").unwrap_or_default(),
+            "flex-grow" => node.flex_grow = element.get_as("flex-grow").unwrap_or_default(),
+            "flex-shrink" => node.flex_shrink = element.get_as("flex-shrink").unwrap_or(1.0),
+            "flex-basis" => node.flex_basis = element.get_as("flex-basis").unwrap_or_default(),
+            // gaps
+            "row-gap" => node.row_gap = element.get_as("row-gap").unwrap_or_default(),
+            "column-gap" => node.column_gap = element.get_as("column-gap").unwrap_or_default(),
+            // grid
+            "grid-auto-flow" => {
+                node.grid_auto_flow = element.get_as("grid-auto-flow").unwrap_or_default()
+            }
+
+            // --- border color ---
+            "border-color-top"
+            | "border-color-left"
+            | "border-color-right"
+            | "border-color-bottom"
+            | "border-color" => {
+                let color = element.get_as("border-color").unwrap_or(Color::NONE);
+                border_color.top = element.get_as_or("border-color-top", color);
+                border_color.left = element.get_as_or("border-color-left", color);
+                border_color.right = element.get_as_or("border-color-right", color);
+                border_color.bottom = element.get_as_or("border-color-bottom", color);
+            }
+
+            // --- border radius ---
+            "border-radius-top-left"
+            | "border-radius-top-right"
+            | "border-radius-bottom-left"
+            | "border-radius-bottom-right"
+            | "border-radius" => {
+                let radius = element.get_as("border-radius").unwrap_or(Val::Px(0.0));
+                border_radius.top_left = element.get_as_or("border-radius-top-left", radius);
+                border_radius.top_right = element.get_as_or("border-radius-top-right", radius);
+                border_radius.bottom_left = element.get_as_or("border-radius-bottom-left", radius);
+                border_radius.bottom_right = element.get_as_or("border-radius-bottom-right", radius)
+            }
+            // --- background color ---
+            "background-color" => {
+                background_color.0 = element.get_as("background-color").unwrap_or(Color::NONE)
+            }
+            "tint" => {
+                if let Some(image) = image {
+                    image.color = element.get_as("tint").unwrap_or(Color::WHITE)
+                }
+            }
+
+            // --- image ---
+            "src" => {
+                if let Some(image) = image {
+                    image.image = if let Some(src) = element.get_as::<String>("src") {
+                        asset_server.load(src)
+                    } else {
+                        TRANSPARENT_IMAGE_HANDLE
+                    }
+                }
+            }
+            "flip-x" => {
+                if let Some(image) = image {
+                    image.flip_x = element.get_as("flip-x").unwrap_or_default()
+                }
+            }
+            "flip-y" => {
+                if let Some(image) = image {
+                    image.flip_y = element.get_as("flip-y").unwrap_or_default()
+                }
+            }
+            "mode"
+            | "slice-size"
+            | "slice-size-top"
+            | "slice-size-left"
+            | "slice-size-right"
+            | "slice-size-bottom"
+            | "center-scale-mode"
+            | "center-scale-stretch"
+            | "sides-scale-mode"
+            | "sides-scale-stretch"
+            | "max-corner-scale"
+            | "tile-x"
+            | "tile-y"
+            | "stretch-value" => {
+                if let Some(image) = image {
+                    image.image_mode = match element.get_property("mode") {
+                        Some(PropertyValue::String(s)) if s == "auto" => NodeImageMode::Auto,
+                        Some(PropertyValue::String(s)) if s == "stretch" => NodeImageMode::Stretch,
+                        Some(PropertyValue::String(s)) if s == "sliced" => {
+                            let slice_size = element.get_as("slice-size").unwrap_or(0.0);
+
+                            NodeImageMode::Sliced(TextureSlicer {
+                                border: BorderRect {
+                                    top: element.get_as_or("slice-size-top", slice_size),
+                                    left: element.get_as_or("slice-size-left", slice_size),
+                                    right: element.get_as_or("slice-size-right", slice_size),
+                                    bottom: element.get_as_or("slice-size-bottom", slice_size),
+                                },
+                                center_scale_mode: match element.get_property("center-scale-mode") {
+                                    Some(PropertyValue::String(s)) if s == "stretch" => {
+                                        SliceScaleMode::Stretch
+                                    }
+                                    Some(PropertyValue::String(s)) if s == "tile" => {
+                                        SliceScaleMode::Tile {
+                                            stretch_value: element
+                                                .get_as("center-scale-stretch")
+                                                .unwrap_or(1.0),
+                                        }
+                                    }
+                                    Some(property) => {
+                                        warn!(
+                                            "Failed to convert PropertyValue {} to SliceScaleMode",
+                                            property
+                                        );
+                                        SliceScaleMode::default()
+                                    }
+                                    None => SliceScaleMode::default(),
+                                },
+
+                                sides_scale_mode: match element.get_property("sides-scale-mode") {
+                                    Some(PropertyValue::String(s)) if s == "stretch" => {
+                                        SliceScaleMode::Stretch
+                                    }
+                                    Some(PropertyValue::String(s)) if s == "tile" => {
+                                        SliceScaleMode::Tile {
+                                            stretch_value: element
+                                                .get_as("sides-scale-stretch")
+                                                .unwrap_or(1.0),
+                                        }
+                                    }
+                                    Some(property) => {
+                                        warn!(
+                                            "Failed to convert PropertyValue {} to SliceScaleMode",
+                                            property
+                                        );
+                                        SliceScaleMode::default()
+                                    }
+                                    None => SliceScaleMode::default(),
+                                },
+
+                                max_corner_scale: element.get_as("max-corner-scale").unwrap_or(1.0),
+                            })
+                        }
+                        Some(PropertyValue::String(s)) if s == "tiled" => NodeImageMode::Tiled {
+                            tile_x: element.get_as("tile-x").unwrap_or(true),
+                            tile_y: element.get_as("tile-y").unwrap_or(true),
+                            stretch_value: element.get_as("stretch-value").unwrap_or(1.0),
+                        },
+                        Some(property) => {
+                            warn!(
+                                "Failed to convert PropertyValue {} to NodeImageMode",
+                                property
+                            );
+                            NodeImageMode::default()
+                        }
+                        None => NodeImageMode::default(),
+                    };
+                }
+            }
+
+            // --- text ---
+
+            // text content
+            "text" => {
+                if let Some(text) = text {
+                    text.0 = element.get_as("text").unwrap_or_default();
+                } else if let Some(span) = span {
+                    span.0 = element.get_as("text").unwrap_or_default();
+                }
+            }
+            // font
+            "font" => {
+                if let Some(font) = font {
+                    let font_path: String = element.get_as("font").unwrap_or_default();
+                    font.font = match font_path.as_str() {
+                        "auto" => Handle::<Font>::default(),
+                        _ => asset_server.load(font_path),
+                    };
+                }
+            }
+            "font-size" => {
+                if let Some(font) = font {
+                    font.font_size = element.get_as("font-size").unwrap_or(20.0)
+                }
+            }
+            "line-height" => {
+                if let Some(font) = font {
+                    font.line_height = element.get_as("line-height").unwrap_or_default()
+                }
+            }
+            "font-smoothing" => {
+                if let Some(font) = font {
+                    font.font_smoothing = element.get_as("font-smoothing").unwrap_or_default()
+                }
+            }
+            // layout (Text only
+            "justify" | "line-break" => {
+                if let Some(layout) = layout {
+                    match property.as_str() {
+                        "justify" => layout.justify = element.get_as("justify").unwrap_or_default(),
+                        "line-break" => {
+                            layout.linebreak = element.get_as("line-break").unwrap_or_default()
+                        }
+                        _ => {}
+                    }
+                }
+            }
+            // color
+            "color" => {
+                if let Some(color) = color {
+                    color.0 = element.get_as("color").unwrap_or(Color::WHITE)
+                }
+            }
+
+            _ => {}
+        }
+    }
+}
diff --git a/src/systems.rs b/src/systems.rs
deleted file mode 100644
index 8f51877..0000000
--- a/src/systems.rs
+++ /dev/null
@@ -1,143 +0,0 @@
-//! Systems used by the NekoMaid plugin.
-
-use bevy::asset::{AssetLoadFailedEvent, LoadState};
-use bevy::platform::collections::HashMap;
-use bevy::prelude::*;
-
-use crate::asset::NekoMaidUI;
-use crate::components::NekoUITree;
-use crate::marker::MarkerRegistry;
-use crate::parse::context::NekoResult;
-use crate::parse::element::NekoElementBuilder;
-use crate::parse::value::PropertyValue;
-
-/// Listens for changes to the [`NekoUITree`] component and spawns the UI tree
-/// accordingly.
-#[allow(clippy::type_complexity)]
-pub(super) fn spawn_tree(
-    asset_server: Res<AssetServer>,
-    assets: Res<Assets<NekoMaidUI>>,
-    markers: Res<MarkerRegistry>,
-    mut roots: Query<
-        (Entity, &mut NekoUITree, &mut Node),
-        Or<(Added<NekoUITree>, Changed<NekoUITree>)>,
-    >,
-    mut commands: Commands,
-) {
-    for (entity, mut root, mut node) in roots.iter_mut() {
-        if !root.is_dirty() {
-            continue;
-        }
-
-        root.clear_dirty();
-        commands.entity(entity).despawn_children();
-
-        *node = Node {
-            width: Val::Percent(100.0),
-            height: Val::Percent(100.0),
-            ..default()
-        };
-
-        let Some(asset) = assets.get(root.asset()) else {
-            match asset_server.get_load_state(root.asset()) {
-                Some(LoadState::Loading) => {}
-                _ => error!("Failed to load NekoMaidUI asset for NekoUITree"),
-            }
-            continue;
-        };
-
-        let mut variables = root.variables().clone();
-        for (name, unresolved) in &asset.variables {
-            if variables.contains_key(name) {
-                continue;
-            }
-
-            if let Ok(v) = unresolved.resolve(&variables) {
-                variables.insert(name.clone(), v);
-            }
-        }
-
-        for element in &asset.elements {
-            let mut element = element.clone();
-            if let Err(e) = resolve_scope(&mut element, &variables) {
-                error!("{}", e);
-            }
-            spawn_element(&asset_server, &markers, &mut commands, &element, entity);
-        }
-    }
-}
-
-/// Resolve variable scope
-pub fn resolve_scope(
-    element: &mut NekoElementBuilder,
-    variables: &HashMap<String, PropertyValue>,
-) -> NekoResult<()> {
-    element.element.resolve(variables)?;
-
-    let mut variables = variables.clone();
-    for (name, value) in element.element.properties() {
-        variables.insert(name.clone(), value.clone());
-    }
-
-    for child in &mut element.children {
-        resolve_scope(child, &variables)?;
-    }
-
-    Ok(())
-}
-
-/// Recursively spawns a [`NekoElementBuilder`] and its children.
-fn spawn_element(
-    asset_server: &Res<AssetServer>,
-    markers: &MarkerRegistry,
-    commands: &mut Commands,
-    element: &NekoElementBuilder,
-    parent: Entity,
-) {
-    let entity =
-        (element.native_widget.spawn_func)(asset_server, commands, &element.element, parent);
-
-    markers.insert(commands.entity(entity), &element.element);
-
-    for child in &element.children {
-        spawn_element(asset_server, markers, commands, child, entity);
-    }
-}
-
-/// Listens for changes to the [`NekoMaidUI`] asset and updates any existing UI
-/// trees accordingly.
-pub(super) fn update_tree(
-    mut asset_updates: MessageReader<AssetEvent<NekoMaidUI>>,
-    mut roots: Query<&mut NekoUITree>,
-) {
-    for event in asset_updates.read() {
-        match event {
-            AssetEvent::Modified { id } | AssetEvent::LoadedWithDependencies { id } => {
-                for mut root in roots.iter_mut() {
-                    if root.asset().id() == *id {
-                        root.mark_dirty();
-                    }
-                }
-            }
-            _ => {}
-        }
-    }
-}
-
-/// Listens for asset load failures and clears any existing UI trees that
-/// reference the failed asset.
-///
-/// (Having a UI tree suddenly disappear is a good indicator to the developer
-/// that something has gone wrong with their code.)
-pub(super) fn asset_failure(
-    mut asset_failures: MessageReader<AssetLoadFailedEvent<NekoMaidUI>>,
-    mut roots: Query<&mut NekoUITree>,
-) {
-    for event in asset_failures.read() {
-        for mut root in roots.iter_mut() {
-            if root.asset().id() == event.id {
-                root.mark_dirty();
-            }
-        }
-    }
-}