diff --git a/examples/counter/src/main.rs b/examples/counter/src/main.rs
index 5aad0987..762a0a92 100644
--- a/examples/counter/src/main.rs
+++ b/examples/counter/src/main.rs
@@ -1,4 +1,6 @@
 use floem::{
+    event::{Event, EventListener},
+    keyboard::{Key, NamedKey},
     peniko::Color,
     reactive::create_signal,
     unit::UnitExt,
@@ -8,7 +10,7 @@ use floem::{
 
 fn app_view() -> impl View {
     let (counter, set_counter) = create_signal(0);
-    stack((
+    let view = stack((
         label(move || format!("Value: {}", counter.get())).style(|s| s.padding(10.0)),
         stack((
             text("Increment")
@@ -72,6 +74,16 @@ fn app_view() -> impl View {
             .flex_col()
             .items_center()
             .justify_center()
+    });
+
+    let id = view.id();
+    view.on_event(EventListener::KeyUp, move |e| {
+        if let Event::KeyUp(e) = e {
+            if e.key.logical_key == Key::Named(NamedKey::F11) {
+                id.inspect();
+            }
+        }
+        true
     })
 }
 
diff --git a/examples/widget-gallery/src/main.rs b/examples/widget-gallery/src/main.rs
index 62e6e7de..c368ca49 100644
--- a/examples/widget-gallery/src/main.rs
+++ b/examples/widget-gallery/src/main.rs
@@ -31,7 +31,7 @@ fn app_view() -> impl View {
     let (tabs, _set_tabs) = create_signal(tabs);
 
     let (active_tab, set_active_tab) = create_signal(0);
-    stack({
+    let view = stack({
         (
             container({
                 scroll({
@@ -144,7 +144,17 @@ fn app_view() -> impl View {
         )
     })
     .style(|s| s.size(100.pct(), 100.pct()))
-    .window_title(|| "Widget Gallery".to_owned())
+    .window_title(|| "Widget Gallery".to_owned());
+
+    let id = view.id();
+    view.on_event(EventListener::KeyUp, move |e| {
+        if let Event::KeyUp(e) = e {
+            if e.key.logical_key == Key::Named(NamedKey::F11) {
+                id.inspect();
+            }
+        }
+        true
+    })
 }
 
 fn main() {
diff --git a/examples/window-scale/src/main.rs b/examples/window-scale/src/main.rs
index 453fe88d..791ca25f 100644
--- a/examples/window-scale/src/main.rs
+++ b/examples/window-scale/src/main.rs
@@ -1,4 +1,6 @@
 use floem::{
+    event::{Event, EventListener},
+    keyboard::{Key, NamedKey},
     peniko::Color,
     reactive::{create_rw_signal, create_signal},
     unit::UnitExt,
@@ -9,7 +11,7 @@ use floem::{
 fn app_view() -> impl View {
     let (counter, set_counter) = create_signal(0);
     let window_scale = create_rw_signal(1.0);
-    stack((
+    let view = stack((
         label(move || format!("Value: {}", counter.get())).style(|s| s.padding(10.0)),
         stack({
             (
@@ -121,6 +123,16 @@ fn app_view() -> impl View {
             .flex_col()
             .items_center()
             .justify_center()
+    });
+
+    let id = view.id();
+    view.on_event(EventListener::KeyUp, move |e| {
+        if let Event::KeyUp(e) = e {
+            if e.key.logical_key == Key::Named(NamedKey::F11) {
+                id.inspect();
+            }
+        }
+        true
     })
 }
 
diff --git a/renderer/src/lib.rs b/renderer/src/lib.rs
index 0c7fcf09..0fe36b44 100644
--- a/renderer/src/lib.rs
+++ b/renderer/src/lib.rs
@@ -20,7 +20,7 @@ pub struct Img<'a> {
 }
 
 pub trait Renderer {
-    fn begin(&mut self);
+    fn begin(&mut self, capture: bool);
 
     fn transform(&mut self, transform: Affine);
 
@@ -49,5 +49,5 @@ pub trait Renderer {
 
     fn draw_img(&mut self, img: Img<'_>, rect: Rect);
 
-    fn finish(&mut self);
+    fn finish(&mut self) -> Option<DynamicImage>;
 }
diff --git a/src/app.rs b/src/app.rs
index f9dd7aef..e121b0d8 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -1,5 +1,6 @@
-use std::{cell::RefCell, sync::Arc};
+use std::{cell::RefCell, rc::Rc, sync::Arc};
 
+use floem_reactive::WriteSignal;
 use once_cell::sync::Lazy;
 use parking_lot::Mutex;
 use winit::{
@@ -8,7 +9,10 @@ use winit::{
     window::WindowId,
 };
 
-use crate::{action::Timer, app_handle::ApplicationHandle, view::View, window::WindowConfig};
+use crate::{
+    action::Timer, app_handle::ApplicationHandle, inspector::Capture, view::View,
+    window::WindowConfig,
+};
 
 type AppEventCallback = dyn Fn(AppEvent);
 
@@ -42,6 +46,10 @@ pub(crate) enum AppUpdateEvent {
     CloseWindow {
         window_id: WindowId,
     },
+    CaptureWindow {
+        window_id: WindowId,
+        capture: WriteSignal<Option<Rc<Capture>>>,
+    },
     RequestTimer {
         timer: Timer,
     },
diff --git a/src/app_handle.rs b/src/app_handle.rs
index c0df7339..b646bc32 100644
--- a/src/app_handle.rs
+++ b/src/app_handle.rs
@@ -1,4 +1,4 @@
-use std::{collections::HashMap, time::Instant};
+use std::{collections::HashMap, rc::Rc, time::Instant};
 
 use kurbo::{Point, Size};
 use winit::{
@@ -12,6 +12,7 @@ use crate::{
     action::{Timer, TimerToken},
     app::{AppUpdateEvent, UserEvent, APP_UPDATE_EVENTS},
     ext_event::EXT_EVENT_HANDLER,
+    inspector::Capture,
     view::View,
     window::WindowConfig,
     window_handle::WindowHandle,
@@ -64,6 +65,9 @@ impl ApplicationHandle {
                 AppUpdateEvent::RequestTimer { timer } => {
                     self.request_timer(timer, event_loop);
                 }
+                AppUpdateEvent::CaptureWindow { window_id, capture } => {
+                    capture.set(self.capture_window(window_id).map(Rc::new));
+                }
                 #[cfg(target_os = "linux")]
                 AppUpdateEvent::MenuAction {
                     window_id,
@@ -235,6 +239,12 @@ impl ApplicationHandle {
         }
     }
 
+    fn capture_window(&mut self, window_id: WindowId) -> Option<Capture> {
+        self.window_handles
+            .get_mut(&window_id)
+            .map(|handle| handle.capture())
+    }
+
     pub(crate) fn idle(&mut self) {
         while let Some(trigger) = { EXT_EVENT_HANDLER.queue.lock().pop_front() } {
             trigger.notify();
diff --git a/src/context.rs b/src/context.rs
index 5a60021c..88a66d8c 100644
--- a/src/context.rs
+++ b/src/context.rs
@@ -9,7 +9,7 @@ use floem_renderer::{
     cosmic_text::{LineHeightValue, Style as FontStyle, Weight},
     Renderer as FloemRenderer,
 };
-use kurbo::{Affine, Point, Rect, RoundedRect, Shape, Size, Vec2};
+use kurbo::{Affine, Insets, Point, Rect, RoundedRect, Shape, Size, Vec2};
 use peniko::Color;
 use taffy::{
     prelude::{Layout, Node},
@@ -21,13 +21,15 @@ use crate::{
     animate::{AnimId, AnimPropKind, Animation},
     event::{Event, EventListener},
     id::Id,
+    inspector::CaptureState,
     menu::Menu,
     pointer::PointerInputEvent,
     responsive::{GridBreakpoints, ScreenSize, ScreenSizeBp},
     style::{
-        BuiltinStyleReader, ComputedStyle, CursorStyle, DisplayProp, Style, StyleMap, StyleProp,
-        StyleSelector, StyleSelectors,
+        BuiltinStyleReader, ComputedStyle, CursorStyle, DisplayProp, LayoutProps, Style, StyleMap,
+        StyleProp, StyleSelector, StyleSelectors,
     },
+    unit::PxPct,
 };
 
 pub type EventCallback = dyn Fn(&Event) -> bool;
@@ -52,6 +54,7 @@ pub struct ViewState {
     pub(crate) has_style_selectors: StyleSelectors,
     pub(crate) viewport: Option<Rect>,
     pub(crate) layout_rect: Rect,
+    pub(crate) layout_props: LayoutProps,
     pub(crate) animation: Option<Animation>,
     pub(crate) base_style: Option<Style>,
     pub(crate) style: Style,
@@ -79,6 +82,7 @@ impl ViewState {
             node: taffy.new_leaf(taffy::style::Style::DEFAULT).unwrap(),
             viewport: None,
             layout_rect: Rect::ZERO,
+            layout_props: Default::default(),
             request_layout: true,
             has_style_selectors: StyleSelectors::default(),
             animation: None,
@@ -261,6 +265,9 @@ pub struct AppState {
     pub(crate) keyboard_navigation: bool,
     pub(crate) window_menu: HashMap<usize, Box<dyn Fn()>>,
     pub(crate) context_menu: HashMap<usize, Box<dyn Fn()>>,
+
+    /// This is set if we're currently capturing the window for the inspector.
+    pub(crate) capture: Option<CaptureState>,
 }
 
 impl Default for AppState {
@@ -298,6 +305,7 @@ impl AppState {
             grid_bps: GridBreakpoints::default(),
             window_menu: HashMap::new(),
             context_menu: HashMap::new(),
+            capture: None,
         }
     }
 
@@ -440,6 +448,23 @@ impl AppState {
             .copied()
     }
 
+    pub(crate) fn get_content_rect(&mut self, id: Id) -> Rect {
+        let view_state = self.view_state(id);
+        let rect = view_state.layout_rect;
+        let props = &view_state.layout_props;
+        let pixels = |px_pct, abs| match px_pct {
+            PxPct::Px(v) => v,
+            PxPct::Pct(pct) => pct * abs,
+        };
+        let origin = rect.origin();
+        rect.inset(-Insets {
+            x0: props.border_left().0 + pixels(props.padding_left(), rect.width()),
+            x1: props.border_right().0 + pixels(props.padding_right(), rect.width()),
+            y0: props.border_top().0 + pixels(props.padding_top(), rect.height()),
+            y1: props.border_bottom().0 + pixels(props.padding_bottom(), rect.height()),
+        }) - origin.to_vec2()
+    }
+
     pub(crate) fn get_layout_rect(&mut self, id: Id) -> Rect {
         self.view_state(id).layout_rect
     }
@@ -948,6 +973,11 @@ impl<'a> PaintCx<'a> {
         self.app_state.get_layout(id)
     }
 
+    /// Returns the layout rect excluding borders, padding and position.
+    pub fn get_content_rect(&mut self, id: Id) -> Rect {
+        self.app_state.get_content_rect(id)
+    }
+
     pub fn get_computed_style(&mut self, id: Id) -> &ComputedStyle {
         self.app_state.get_computed_style(id)
     }
diff --git a/src/event.rs b/src/event.rs
index 77671336..092d878b 100644
--- a/src/event.rs
+++ b/src/event.rs
@@ -9,7 +9,7 @@ use crate::{
     pointer::{PointerInputEvent, PointerMoveEvent, PointerWheelEvent},
 };
 
-#[derive(Hash, PartialEq, Eq)]
+#[derive(Debug, Hash, PartialEq, Eq)]
 pub enum EventListener {
     KeyDown,
     KeyUp,
diff --git a/src/id.rs b/src/id.rs
index de82d802..312fc726 100644
--- a/src/id.rs
+++ b/src/id.rs
@@ -214,6 +214,10 @@ impl Id {
         self.add_update_message(UpdateMessage::PopoutMenu { id: *self, menu });
     }
 
+    pub fn inspect(&self) {
+        self.add_update_message(UpdateMessage::Inspect);
+    }
+
     fn add_update_message(&self, msg: UpdateMessage) {
         CENTRAL_UPDATE_MESSAGES.with(|msgs| {
             msgs.borrow_mut().push((*self, msg));
diff --git a/src/inspector.rs b/src/inspector.rs
new file mode 100644
index 00000000..1549b77a
--- /dev/null
+++ b/src/inspector.rs
@@ -0,0 +1,600 @@
+use crate::app::{add_app_update_event, AppUpdateEvent};
+use crate::context::{AppState, LayoutCx};
+use crate::event::{Event, EventListener};
+use crate::id::Id;
+use crate::new_window;
+use crate::style::{StyleMap, StyleMapValue, TextOverflow};
+use crate::view::View;
+use crate::views::{
+    dyn_container, empty, img_dynamic, list, scroll, stack, text, Decorators, Label,
+};
+use crate::window::WindowConfig;
+use floem_reactive::{create_rw_signal, RwSignal, Scope};
+use image::DynamicImage;
+use kurbo::{Point, Rect, Size};
+use peniko::Color;
+use std::cell::Cell;
+use std::collections::HashMap;
+use std::fmt::Display;
+use std::rc::Rc;
+use std::time::{Duration, Instant};
+use taffy::style::{AlignItems, FlexDirection};
+use winit::keyboard::{Key, NamedKey};
+use winit::window::WindowId;
+
+#[derive(Clone, Debug)]
+pub struct CapturedView {
+    id: Id,
+    name: String,
+    layout: Rect,
+    clipped: Rect,
+    children: Vec<Rc<CapturedView>>,
+}
+
+impl CapturedView {
+    pub fn capture(view: &dyn View, app_state: &mut AppState, clip: Rect) -> Self {
+        let layout = app_state.get_layout_rect(view.id());
+        let clipped = layout.intersect(clip);
+        Self {
+            id: view.id(),
+            name: view.debug_name().to_string(),
+            layout,
+            clipped,
+            children: view
+                .children()
+                .into_iter()
+                .map(|view| Rc::new(CapturedView::capture(view, app_state, clipped)))
+                .collect(),
+        }
+    }
+
+    fn find(&self, id: Id) -> Option<&CapturedView> {
+        if self.id == id {
+            return Some(self);
+        }
+        self.children
+            .iter()
+            .filter_map(|child| child.find(id))
+            .next()
+    }
+
+    fn find_by_pos(&self, pos: Point) -> Option<&CapturedView> {
+        self.children
+            .iter()
+            .filter_map(|child| child.find_by_pos(pos))
+            .next()
+            .or_else(|| self.clipped.contains(pos).then_some(self))
+    }
+}
+
+pub struct Capture {
+    pub root: CapturedView,
+    pub start: Instant,
+    pub post_layout: Instant,
+    pub end: Instant,
+    pub taffy_duration: Duration,
+    pub window: Option<Rc<DynamicImage>>,
+    pub window_size: Size,
+    pub scale: f64,
+    pub state: CaptureState,
+}
+
+#[derive(Default)]
+pub struct CaptureState {
+    styles: HashMap<Id, StyleMap>,
+}
+
+impl CaptureState {
+    pub(crate) fn capture_style(id: Id, cx: &mut LayoutCx) {
+        if cx.app_state_mut().capture.is_some() {
+            let direct = cx.style.direct.clone();
+            let mut current = (*cx.style.current).clone();
+            current.apply(direct);
+            cx.app_state_mut()
+                .capture
+                .as_mut()
+                .unwrap()
+                .styles
+                .insert(id, current);
+        }
+    }
+}
+
+pub fn captured_view(
+    view: &CapturedView,
+    depth: usize,
+    selected: RwSignal<Option<Id>>,
+    highlighted: RwSignal<Option<Id>>,
+) -> Box<dyn View> {
+    let offset = depth as f64 * 14.0;
+    let name = text(view.name.clone()).style(|s| s.text_overflow(TextOverflow::Ellipsis));
+    let height = 20.0;
+    let id = view.id;
+
+    if view.children.is_empty() {
+        return Box::new(
+            name.style(move |s| {
+                s.width_full()
+                    .text_overflow(TextOverflow::Ellipsis)
+                    .padding_left(20.0 + offset)
+                    .hover(move |s| {
+                        s.background(Color::rgba8(228, 237, 216, 160))
+                            .apply_if(selected.get() == Some(id), |s| {
+                                s.background(Color::rgb8(186, 180, 216))
+                            })
+                    })
+                    .height(height)
+                    .apply_if(highlighted.get() == Some(id), |s| {
+                        s.background(Color::rgba8(228, 237, 216, 160))
+                    })
+                    .apply_if(selected.get() == Some(id), |s| {
+                        if highlighted.get() == Some(id) {
+                            s.background(Color::rgb8(186, 180, 216))
+                        } else {
+                            s.background(Color::rgb8(213, 208, 216))
+                        }
+                    })
+            })
+            .on_click(move |_| {
+                selected.set(Some(id));
+                true
+            })
+            .on_event(EventListener::PointerEnter, move |_| {
+                highlighted.set(Some(id));
+                false
+            }),
+        );
+    }
+
+    let expanded = create_rw_signal(true);
+
+    let row = stack((
+        empty()
+            .style(move |s| {
+                s.background(if expanded.get() {
+                    Color::WHITE.with_alpha_factor(0.3)
+                } else {
+                    Color::BLACK.with_alpha_factor(0.3)
+                })
+                .border(1.0)
+                .width(12.0)
+                .height(12.0)
+                .margin_left(offset)
+                .margin_right(4.0)
+                .border_color(Color::BLACK.with_alpha_factor(0.4))
+                .border_radius(4.0)
+                .hover(move |s| {
+                    s.border_color(Color::BLACK.with_alpha_factor(0.6))
+                        .background(if expanded.get() {
+                            Color::WHITE.with_alpha_factor(0.5)
+                        } else {
+                            Color::BLACK.with_alpha_factor(0.5)
+                        })
+                })
+            })
+            .on_click(move |_| {
+                expanded.set(!expanded.get());
+                true
+            }),
+        name,
+    ))
+    .style(move |s| {
+        s.width_full()
+            .padding_left(3.0)
+            .align_items(AlignItems::Center)
+            .hover(move |s| {
+                s.background(Color::rgba8(228, 237, 216, 160))
+                    .apply_if(selected.get() == Some(id), |s| {
+                        s.background(Color::rgb8(186, 180, 216))
+                    })
+            })
+            .height(height)
+            .apply_if(highlighted.get() == Some(id), |s| {
+                s.background(Color::rgba8(228, 237, 216, 160))
+            })
+            .apply_if(selected.get() == Some(id), |s| {
+                if highlighted.get() == Some(id) {
+                    s.background(Color::rgb8(186, 180, 216))
+                } else {
+                    s.background(Color::rgb8(213, 208, 216))
+                }
+            })
+    })
+    .on_click(move |_| {
+        selected.set(Some(id));
+        true
+    })
+    .on_event(EventListener::PointerEnter, move |_| {
+        highlighted.set(Some(id));
+        false
+    });
+
+    let children = view.children.clone();
+
+    let line = empty().style(move |s| {
+        s.absolute()
+            .height_full()
+            .width(1.0)
+            .margin_left(9.0 + offset)
+            .background(Color::BLACK.with_alpha_factor(0.1))
+    });
+
+    let list = dyn_container(
+        move || expanded.get(),
+        move |expanded| {
+            if expanded {
+                let children = children.clone();
+                Box::new(
+                    list(
+                        move || children.clone().into_iter().enumerate(),
+                        |(i, _)| *i,
+                        move |(_, child)| captured_view(&child, depth + 1, selected, highlighted),
+                    )
+                    .style(|s| s.flex_col().width_full()),
+                )
+            } else {
+                Box::new(empty())
+            }
+        },
+    );
+
+    let list = stack((line, list)).style(|s| s.flex_col().width_full());
+
+    Box::new(stack((row, list)).style(|s| s.flex_col().width_full()))
+}
+
+fn header(label: impl Display) -> Label {
+    text(label).style(|s| {
+        s.padding(5.0)
+            .background(Color::WHITE_SMOKE)
+            .width_full()
+            .height(27.0)
+            .border_bottom(1.0)
+            .border_color(Color::LIGHT_GRAY)
+    })
+}
+
+fn info(s: String) -> Label {
+    text(s).style(|s| s.padding(5.0))
+}
+
+fn stats(capture: &Capture) -> impl View {
+    let layout_time = capture.post_layout.saturating_duration_since(capture.start);
+    let paint_time = capture.end.saturating_duration_since(capture.post_layout);
+    let layout_time = info(format!(
+        "Layout time: {:.4} ms",
+        layout_time.as_secs_f64() * 1000.0
+    ));
+    let taffy_time = info(format!(
+        "Taffy time: {:.4} ms",
+        capture.taffy_duration.as_secs_f64() * 1000.0
+    ));
+    let paint_time = info(format!(
+        "Paint time: {:.4} ms",
+        paint_time.as_secs_f64() * 1000.0
+    ));
+    let w = info(format!("Window Width: {}", capture.window_size.width));
+    let h = info(format!("Window Height: {}", capture.window_size.height));
+    stack((layout_time, taffy_time, paint_time, w, h)).style(|s| s.flex_col())
+}
+
+fn selected_view(capture: &Rc<Capture>, selected: RwSignal<Option<Id>>) -> impl View {
+    let capture = capture.clone();
+    dyn_container(
+        move || selected.get(),
+        move |current| {
+            if let Some(view) = current.and_then(|id| capture.root.find(id)) {
+                let name = info(format!("Type: {}", view.name));
+                let count = info(format!("Child Count: {}", view.children.len()));
+                let beyond = |view: f64, window| {
+                    if view > window {
+                        format!(" ({} after window edge)", view - window)
+                    } else if view < 0.0 {
+                        format!(" ({} before window edge)", -view)
+                    } else {
+                        String::new()
+                    }
+                };
+                let x = info(format!(
+                    "X: {}{}",
+                    view.layout.x0,
+                    beyond(view.layout.x0, capture.window_size.width)
+                ));
+                let y = info(format!(
+                    "Y: {}{}",
+                    view.layout.y0,
+                    beyond(view.layout.y0, capture.window_size.height)
+                ));
+                let w = info(format!(
+                    "Width: {}{}",
+                    view.layout.width(),
+                    beyond(view.layout.x1, capture.window_size.width)
+                ));
+                let h = info(format!(
+                    "Height: {}{}",
+                    view.layout.height(),
+                    beyond(view.layout.y1, capture.window_size.height)
+                ));
+                let clear = text("Clear selection")
+                    .style(|s| {
+                        s.background(Color::WHITE_SMOKE)
+                            .border(1.0)
+                            .padding(5.0)
+                            .margin(5.0)
+                            .border_color(Color::BLACK.with_alpha_factor(0.4))
+                            .border_radius(4.0)
+                            .hover(move |s| {
+                                s.border_color(Color::BLACK.with_alpha_factor(0.2))
+                                    .background(Color::GRAY.with_alpha_factor(0.6))
+                            })
+                    })
+                    .on_click(move |_| {
+                        selected.set(None);
+                        true
+                    });
+                let clear = stack((clear,));
+
+                let style_header = header("View Style");
+
+                let mut styles = capture
+                    .state
+                    .styles
+                    .get(&view.id)
+                    .cloned()
+                    .unwrap_or_default()
+                    .map
+                    .into_iter()
+                    .map(|(p, v)| ((p, format!("{p:?}")), v))
+                    .collect::<Vec<_>>();
+                styles.sort_unstable_by(|a, b| a.0 .1.cmp(&b.0 .1));
+
+                let style_list = list(
+                    move || styles.clone(),
+                    |(i, _)| i.0,
+                    move |((p, name), v)| {
+                        let v: Box<dyn View> = match v {
+                            StyleMapValue::Val(v) => {
+                                let v = &*v;
+                                (p.info.debug_view)(v)
+                                    .unwrap_or_else(|| Box::new(text((p.info.debug_any)(v))))
+                            }
+                            StyleMapValue::Unset => Box::new(text("Unset".to_owned())),
+                        };
+                        stack((
+                            stack((text(name.strip_prefix("floem::style::").unwrap_or(&name))
+                                .style(|s| {
+                                    s.margin_right(5.0)
+                                        .color(Color::BLACK.with_alpha_factor(0.6))
+                                }),))
+                            .style(|s| {
+                                s.min_width(150.0).flex_direction(FlexDirection::RowReverse)
+                            }),
+                            v,
+                        ))
+                        .style(|s| {
+                            s.padding(5.0)
+                                .hover(|s| s.background(Color::rgba8(228, 237, 216, 160)))
+                        })
+                    },
+                )
+                .style(|s| s.flex_col().width_full());
+
+                Box::new(
+                    stack((name, count, x, y, w, h, clear, style_header, style_list))
+                        .style(|s| s.flex_col().width_full()),
+                )
+            } else {
+                Box::new(info("No selection".to_string()))
+            }
+        },
+    )
+}
+
+fn capture_view(capture: &Rc<Capture>) -> impl View {
+    let selected = create_rw_signal(None);
+    let highlighted = create_rw_signal(None);
+
+    let window = capture.window.clone();
+    let capture_ = capture.clone();
+    let capture__ = capture.clone();
+    let (image_width, image_height) = capture
+        .window
+        .as_ref()
+        .map(|img| {
+            (
+                img.width() as f64 / capture.scale,
+                img.height() as f64 / capture.scale,
+            )
+        })
+        .unwrap_or_default();
+    let image = img_dynamic(move || window.clone())
+        .style(move |s| {
+            s.margin(5.0)
+                .border(1.0)
+                .border_color(Color::BLACK.with_alpha_factor(0.5))
+                .width(image_width + 2.0)
+                .height(image_height + 2.0)
+                .margin_bottom(21.0)
+                .margin_right(21.0)
+        })
+        .on_event(EventListener::PointerMove, move |e| {
+            if let Event::PointerMove(e) = e {
+                if let Some(view) = capture_.root.find_by_pos(e.pos) {
+                    highlighted.set(Some(view.id));
+                    return false;
+                }
+            }
+            if highlighted.get().is_some() {
+                highlighted.set(None);
+            }
+            false
+        })
+        .on_click(move |e| {
+            if let Event::PointerUp(e) = e {
+                if let Some(view) = capture__.root.find_by_pos(e.pos) {
+                    selected.set(Some(view.id));
+                    return true;
+                }
+            }
+            if selected.get().is_some() {
+                selected.set(None);
+            }
+            true
+        })
+        .on_event(EventListener::PointerLeave, move |_| {
+            highlighted.set(None);
+            false
+        });
+
+    let capture_ = capture.clone();
+    let selected_overlay = empty().style(move |s| {
+        if let Some(view) = selected.get().and_then(|id| capture_.root.find(id)) {
+            s.absolute()
+                .margin_left(5.0 + view.layout.x0)
+                .margin_top(5.0 + view.layout.y0)
+                .width(view.layout.width())
+                .height(view.layout.height())
+                .background(Color::rgb8(186, 180, 216).with_alpha_factor(0.5))
+                .border_color(Color::rgb8(186, 180, 216).with_alpha_factor(0.7))
+                .border(1.0)
+        } else {
+            s
+        }
+    });
+
+    let capture_ = capture.clone();
+    let highlighted_overlay = empty().style(move |s| {
+        if let Some(view) = highlighted.get().and_then(|id| capture_.root.find(id)) {
+            s.absolute()
+                .margin_left(5.0 + view.layout.x0)
+                .margin_top(5.0 + view.layout.y0)
+                .width(view.layout.width())
+                .height(view.layout.height())
+                .background(Color::rgba8(228, 237, 216, 120))
+                .border_color(Color::rgba8(75, 87, 53, 120))
+                .border(1.0)
+        } else {
+            s
+        }
+    });
+
+    let image = stack((image, selected_overlay, highlighted_overlay));
+
+    let left_scroll = scroll(
+        stack((
+            header("Selected View"),
+            selected_view(capture, selected),
+            header("Stats"),
+            stats(capture),
+        ))
+        .style(|s| s.flex_col().width_full()),
+    );
+
+    let left = stack((
+        header("Captured Window"),
+        scroll(image).style(|s| s.max_height_pct(60.0)),
+        left_scroll,
+    ))
+    .style(|s| s.flex_col().height_full().max_width_pct(60.0));
+
+    let tree = stack((
+        header("View Tree"),
+        scroll(captured_view(&capture.root, 0, selected, highlighted))
+            .style(|s| s.width_full().height_full())
+            .on_event(EventListener::PointerLeave, move |_| {
+                highlighted.set(None);
+                false
+            })
+            .on_click(move |_| {
+                selected.set(None);
+                true
+            }),
+    ))
+    .style(|s| s.flex_col().width_full().height_full());
+
+    let seperator = empty().style(move |s| {
+        s.height_full()
+            .min_width(1.0)
+            .background(Color::BLACK.with_alpha_factor(0.2))
+    });
+
+    stack((left, seperator, tree)).style(|s| s.flex_row().width_full().height_full())
+}
+
+fn inspector_view(capture: &Option<Rc<Capture>>) -> impl View {
+    let view: Box<dyn View> = if let Some(capture) = capture {
+        Box::new(capture_view(capture))
+    } else {
+        Box::new(text("No capture"))
+    };
+
+    stack((view,))
+        .window_title(|| "Floem Inspector".to_owned())
+        .on_event(EventListener::WindowClosed, |_| {
+            RUNNING.set(false);
+            false
+        })
+        .style(|s| {
+            s.font_size(12.0)
+                .width_full()
+                .height_full()
+                .background(Color::WHITE)
+                .set(scroll::Thickness, 16.0)
+                .set(scroll::Rounded, false)
+                .set(scroll::HandleRadius, 4.0)
+                .set(scroll::HandleColor, Color::rgba8(166, 166, 166, 140))
+                .set(scroll::DragColor, Color::rgb8(166, 166, 166))
+                .set(scroll::HoverColor, Color::rgb8(184, 184, 184))
+                .set(scroll::BgActiveColor, Color::rgba8(166, 166, 166, 30))
+        })
+}
+
+thread_local! {
+    pub(crate) static RUNNING: Cell<bool> = Cell::new(false);
+    pub(crate) static CAPTURE: RwSignal<Option<Rc<Capture>>> = {
+        Scope::new().create_rw_signal(None)
+    };
+}
+
+pub fn capture(window_id: WindowId) {
+    let capture = CAPTURE.with(|c| *c);
+
+    if !RUNNING.get() {
+        RUNNING.set(true);
+        new_window(
+            move |_| {
+                let view = dyn_container(
+                    move || capture.get(),
+                    |capture| Box::new(inspector_view(&capture)),
+                );
+                let id = view.id();
+                view.style(|s| s.width_full().height_full()).on_event(
+                    EventListener::KeyUp,
+                    move |e| {
+                        if let Event::KeyUp(e) = e {
+                            if e.key.logical_key == Key::Named(NamedKey::F11)
+                                && e.modifiers.shift_key()
+                            {
+                                id.inspect();
+                                return true;
+                            }
+                        }
+                        false
+                    },
+                )
+            },
+            Some(WindowConfig {
+                size: Some(Size {
+                    width: 1200.0,
+                    height: 800.0,
+                }),
+                ..Default::default()
+            }),
+        );
+    }
+
+    add_app_update_event(AppUpdateEvent::CaptureWindow {
+        window_id,
+        capture: capture.write_only(),
+    })
+}
diff --git a/src/lib.rs b/src/lib.rs
index a7af5213..dd5ae7fe 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -98,6 +98,7 @@ pub mod event;
 pub mod ext_event;
 pub mod file;
 pub mod id;
+mod inspector;
 pub mod keyboard;
 pub mod menu;
 pub mod pointer;
diff --git a/src/renderer.rs b/src/renderer.rs
index 291b0a4f..8aa0efb8 100644
--- a/src/renderer.rs
+++ b/src/renderer.rs
@@ -51,6 +51,7 @@ use crate::cosmic_text::TextLayout;
 use floem_renderer::Img;
 use floem_tiny_skia::TinySkiaRenderer;
 use floem_vger::VgerRenderer;
+use image::DynamicImage;
 use kurbo::{Affine, Rect, Shape, Size};
 use peniko::BrushRef;
 
@@ -99,13 +100,13 @@ impl Renderer {
 }
 
 impl floem_renderer::Renderer for Renderer {
-    fn begin(&mut self) {
+    fn begin(&mut self, capture: bool) {
         match self {
             Renderer::Vger(r) => {
-                r.begin();
+                r.begin(capture);
             }
             Renderer::TinySkia(r) => {
-                r.begin();
+                r.begin(capture);
             }
         }
     }
@@ -219,14 +220,10 @@ impl floem_renderer::Renderer for Renderer {
         }
     }
 
-    fn finish(&mut self) {
+    fn finish(&mut self) -> Option<DynamicImage> {
         match self {
-            Renderer::Vger(r) => {
-                r.finish();
-            }
-            Renderer::TinySkia(r) => {
-                r.finish();
-            }
+            Renderer::Vger(r) => r.finish(),
+            Renderer::TinySkia(r) => r.finish(),
         }
     }
 }
diff --git a/src/style.rs b/src/style.rs
index f7ac1ed7..bd48369b 100644
--- a/src/style.rs
+++ b/src/style.rs
@@ -48,9 +48,88 @@ use taffy::{
 use crate::context::InteractionState;
 use crate::context::LayoutCx;
 use crate::unit::{Px, PxPct, PxPctAuto, UnitExt};
+use crate::view::View;
+use crate::views::{empty, stack, text, Decorators};
+
+pub trait StylePropValue: Clone + PartialEq + Debug {
+    fn debug_view(&self) -> Option<Box<dyn View>> {
+        None
+    }
+}
+
+impl StylePropValue for i32 {}
+impl StylePropValue for bool {}
+impl StylePropValue for f32 {}
+impl StylePropValue for f64 {}
+impl StylePropValue for Display {}
+impl StylePropValue for Position {}
+impl StylePropValue for FlexDirection {}
+impl StylePropValue for FlexWrap {}
+impl StylePropValue for AlignItems {}
+impl StylePropValue for AlignContent {}
+impl StylePropValue for CursorStyle {}
+impl StylePropValue for BoxShadow {}
+impl StylePropValue for String {}
+impl StylePropValue for Weight {}
+impl StylePropValue for cosmic_text::Style {}
+impl StylePropValue for TextOverflow {}
+impl StylePropValue for LineHeightValue {}
+impl StylePropValue for Size<LengthPercentage> {}
+
+impl<T: StylePropValue> StylePropValue for Option<T> {
+    fn debug_view(&self) -> Option<Box<dyn View>> {
+        self.as_ref().and_then(|v| v.debug_view())
+    }
+}
+impl StylePropValue for Px {
+    fn debug_view(&self) -> Option<Box<dyn View>> {
+        Some(Box::new(text(format!("{} px", self.0))))
+    }
+}
+impl StylePropValue for PxPctAuto {
+    fn debug_view(&self) -> Option<Box<dyn View>> {
+        let label = match self {
+            Self::Px(v) => format!("{} px", v),
+            Self::Pct(v) => format!("{}%", v),
+            Self::Auto => "auto".to_string(),
+        };
+        Some(Box::new(text(label)))
+    }
+}
+impl StylePropValue for PxPct {
+    fn debug_view(&self) -> Option<Box<dyn View>> {
+        let label = match self {
+            Self::Px(v) => format!("{} px", v),
+            Self::Pct(v) => format!("{}%", v),
+        };
+        Some(Box::new(text(label)))
+    }
+}
+impl StylePropValue for Color {
+    fn debug_view(&self) -> Option<Box<dyn View>> {
+        let color = *self;
+        let color = empty().style(move |s| {
+            s.background(color)
+                .width(22.0)
+                .height(14.0)
+                .border(1)
+                .border_color(Color::WHITE.with_alpha_factor(0.5))
+                .border_radius(5.0)
+        });
+        let color = stack((color,)).style(|s| {
+            s.border(1)
+                .border_color(Color::BLACK.with_alpha_factor(0.5))
+                .border_radius(5.0)
+                .margin_left(6.0)
+        });
+        Some(Box::new(
+            stack((text(format!("{self:?}")), color)).style(|s| s.align_items(AlignItems::Center)),
+        ))
+    }
+}
 
 pub trait StyleProp: Default + Copy + 'static {
-    type Type: Clone + PartialEq + Debug;
+    type Type: StylePropValue;
     fn prop_ref() -> StylePropRef;
     fn default_value() -> Self::Type;
 }
@@ -61,10 +140,11 @@ pub struct StylePropInfo {
     pub(crate) inherited: bool,
     pub(crate) default_as_any: fn() -> Rc<dyn Any>,
     pub(crate) debug_any: fn(val: &dyn Any) -> String,
+    pub(crate) debug_view: fn(val: &dyn Any) -> Option<Box<dyn View>>,
 }
 
 impl StylePropInfo {
-    pub const fn new<Name, T: Debug + 'static>(
+    pub const fn new<Name, T: StylePropValue + 'static>(
         inherited: bool,
         default_as_any: fn() -> Rc<dyn Any>,
     ) -> Self {
@@ -83,6 +163,17 @@ impl StylePropInfo {
                     )
                 }
             },
+            debug_view: |val| {
+                if let Some(v) = val.downcast_ref::<T>() {
+                    v.debug_view()
+                } else {
+                    panic!(
+                        "expected type {} for property {}",
+                        type_name::<T>(),
+                        std::any::type_name::<Name>(),
+                    )
+                }
+            },
         }
     }
 }
@@ -360,7 +451,7 @@ impl StyleMap {
         }
     }
 
-    fn apply(&mut self, over: StyleMap) {
+    pub(crate) fn apply(&mut self, over: StyleMap) {
         self.map.extend(over.map);
         for (selector, map) in over.selectors {
             self.set_selector(selector, map);
@@ -685,6 +776,19 @@ prop_extracter! {
     }
 }
 
+prop_extracter! {
+    pub(crate) LayoutProps {
+        pub border_left: BorderLeft,
+        pub border_top: BorderTop,
+        pub border_right: BorderRight,
+        pub border_bottom: BorderBottom,
+        pub padding_left: PaddingLeft,
+        pub padding_top: PaddingTop,
+        pub padding_right: PaddingRight,
+        pub padding_bottom: PaddingBottom,
+    }
+}
+
 impl Style {
     pub fn get<P: StyleProp>(&self, _prop: P) -> P::Type {
         if let Some(other) = &self.other {
diff --git a/src/update.rs b/src/update.rs
index 53521a22..3ebac7ff 100644
--- a/src/update.rs
+++ b/src/update.rs
@@ -114,6 +114,7 @@ pub(crate) enum UpdateMessage {
     SetWindowTitle {
         title: String,
     },
+    Inspect,
     FocusWindow,
     SetImeAllowed {
         allowed: bool,
diff --git a/src/view.rs b/src/view.rs
index b71e3b30..4a91b1d5 100644
--- a/src/view.rs
+++ b/src/view.rs
@@ -95,7 +95,10 @@ use crate::{
     context::{AppState, DragState, EventCx, LayoutCx, PaintCx, UpdateCx},
     event::{Event, EventListener},
     id::Id,
-    style::{BoxShadowProp, ComputedStyle, Outline, OutlineColor, Style, StyleMap, ZIndex},
+    inspector::CaptureState,
+    style::{
+        BoxShadowProp, ComputedStyle, LayoutProps, Outline, OutlineColor, Style, StyleMap, ZIndex,
+    },
 };
 
 bitflags! {
@@ -198,6 +201,13 @@ pub trait View {
 
         cx.style.direct = style.other.clone();
         StyleMap::apply_only_inherited(&mut cx.style.current, &cx.style.direct);
+        CaptureState::capture_style(self.id(), cx);
+
+        // Extract the relevant layout properties so the content rect can be calculated
+        // when painting.
+        let mut props = LayoutProps::default();
+        props.read(cx);
+        cx.app_state_mut().view_state(self.id()).layout_props = props;
 
         let node = self.layout(cx);
 
@@ -1053,8 +1063,8 @@ impl View for Box<dyn View> {
         (**self).children_mut()
     }
 
-    fn compute_layout(&mut self, cx: &mut LayoutCx) -> Option<Rect> {
-        (**self).compute_layout(cx)
+    fn debug_name(&self) -> std::borrow::Cow<'static, str> {
+        (**self).debug_name()
     }
 
     fn update(&mut self, cx: &mut UpdateCx, state: Box<dyn Any>) -> ChangeFlags {
@@ -1065,6 +1075,10 @@ impl View for Box<dyn View> {
         (**self).layout(cx)
     }
 
+    fn compute_layout(&mut self, cx: &mut LayoutCx) -> Option<Rect> {
+        (**self).compute_layout(cx)
+    }
+
     fn event(&mut self, cx: &mut EventCx, id_path: Option<&[Id]>, event: Event) -> bool {
         (**self).event(cx, id_path, event)
     }
diff --git a/src/views/img.rs b/src/views/img.rs
index af6fda6d..07299352 100644
--- a/src/views/img.rs
+++ b/src/views/img.rs
@@ -1,7 +1,8 @@
+use std::rc::Rc;
+
 use floem_reactive::create_effect;
 use floem_renderer::Renderer;
 use image::{DynamicImage, GenericImageView};
-use kurbo::Size;
 use sha2::{Digest, Sha256};
 
 use crate::{
@@ -87,22 +88,23 @@ impl ImageStyle {
 pub struct Img {
     id: Id,
     //FIXME: store the pixel format(once its added to vger), for now we only store RGBA(RGB is converted to RGBA)
-    pixels: Option<Vec<u8>>,
-    img: Option<DynamicImage>,
+    img: Option<Rc<DynamicImage>>,
     img_hash: Option<Vec<u8>>,
     img_dimensions: Option<(u32, u32)>,
     content_node: Option<Node>,
 }
 
 pub fn img(image: impl Fn() -> Vec<u8> + 'static) -> Img {
+    img_dynamic(move || image::load_from_memory(&image()).ok().map(Rc::new))
+}
+
+pub(crate) fn img_dynamic(image: impl Fn() -> Option<Rc<DynamicImage>> + 'static) -> Img {
     let id = Id::next();
     create_effect(move |_| {
-        let img_data = image();
-        id.update_state(img_data, false);
+        id.update_state(image(), false);
     });
     Img {
         id,
-        pixels: None,
         img: None,
         img_hash: None,
         img_dimensions: None,
@@ -140,23 +142,17 @@ impl View for Img {
         cx: &mut crate::context::UpdateCx,
         state: Box<dyn std::any::Any>,
     ) -> crate::view::ChangeFlags {
-        if let Ok(state) = state.downcast::<Vec<u8>>() {
-            let image = &*state;
-
-            let img = image::load_from_memory(image).ok();
-            self.img = img;
-            self.pixels = Some(image.clone());
+        if let Ok(img) = state.downcast::<Option<Rc<DynamicImage>>>() {
+            self.img_hash = (*img).as_ref().map(|img| {
+                let mut hasher = Sha256::new();
+                hasher.update(img.as_bytes());
+                hasher.finalize().to_vec()
+            });
+            self.img = *img;
             self.img_dimensions = self.img.as_ref().map(|img| img.dimensions());
-
-            let mut hasher = Sha256::new();
-            hasher.update(image);
-            let hash = hasher.finalize().to_vec();
-
-            self.img_hash = Some(hash);
             cx.request_layout(self.id());
             ChangeFlags::LAYOUT
         } else {
-            eprintln!("downcast failed");
             ChangeFlags::empty()
         }
     }
@@ -197,12 +193,11 @@ impl View for Img {
 
     fn paint(&mut self, cx: &mut crate::context::PaintCx) {
         if let Some(img) = self.img.as_ref() {
-            let size = cx.get_layout(self.id).unwrap().size;
-            let rect = Size::new(size.width as f64, size.height as f64).to_rect();
+            let rect = cx.get_content_rect(self.id);
             cx.draw_img(
                 floem_renderer::Img {
                     img,
-                    data: self.pixels.as_ref().unwrap(),
+                    data: img.as_bytes(),
                     hash: self.img_hash.as_ref().unwrap(),
                 },
                 rect,
diff --git a/src/views/scroll.rs b/src/views/scroll.rs
index 5ce2bf30..8c73bd96 100644
--- a/src/views/scroll.rs
+++ b/src/views/scroll.rs
@@ -46,6 +46,7 @@ prop!(pub DragColor: Color { inherited } = Color::rgba8(0, 0, 0, 160));
 prop!(pub Rounded: bool { inherited } = cfg!(target_os = "macos"));
 prop!(pub Thickness: Px { inherited } = Px(10.0));
 prop!(pub EdgeWidth: Px { inherited } = Px(0.0));
+prop!(pub HandleRadius: Px { inherited } = Px(0.0));
 prop!(pub BgActiveColor: Color { inherited } = Color::rgba8(0, 0, 0, 25));
 
 prop_extracter! {
@@ -53,6 +54,7 @@ prop_extracter! {
         handle_color: HandleColor,
         hover_color: Option<HoverColor>,
         drag_color: Option<DragColor>,
+        handle_radius: HandleRadius,
         rounded: Rounded,
         thickness: Thickness,
         edge_width: EdgeWidth,
@@ -329,7 +331,7 @@ impl<V: View> Scroll<V> {
                     (rect.y1 - rect.y0) / 2.
                 }
             } else {
-                0.
+                self.style.handle_radius().0
             }
         };
 
@@ -350,7 +352,7 @@ impl<V: View> Scroll<V> {
                 self.style.handle_color()
             };
             if self.vbar_whole_hover || matches!(self.held, BarHeldState::Vertical(..)) {
-                let mut bounds = bounds;
+                let mut bounds = bounds - scroll_offset;
                 bounds.y0 = self.actual_rect.y0;
                 bounds.y1 = self.actual_rect.y1;
                 if let Some(color) = self.style.bg_active_color() {
@@ -383,7 +385,7 @@ impl<V: View> Scroll<V> {
                 self.style.handle_color()
             };
             if self.hbar_whole_hover || matches!(self.held, BarHeldState::Horizontal(..)) {
-                let mut bounds = bounds;
+                let mut bounds = bounds - scroll_offset;
                 bounds.x0 = self.actual_rect.x0;
                 bounds.x1 = self.actual_rect.x1;
                 if let Some(color) = self.style.bg_active_color() {
diff --git a/src/window_handle.rs b/src/window_handle.rs
index f1b78b7a..a065bcc6 100644
--- a/src/window_handle.rs
+++ b/src/window_handle.rs
@@ -1,16 +1,17 @@
-use std::time::{Duration, Instant};
+use std::{
+    rc::Rc,
+    time::{Duration, Instant},
+};
 
 use floem_reactive::{with_scope, RwSignal, Scope};
 use floem_renderer::Renderer;
+use image::DynamicImage;
 use kurbo::{Affine, Point, Rect, Size, Vec2};
-
-#[cfg(target_os = "linux")]
-use winit::window::WindowId;
 use winit::{
     dpi::{LogicalPosition, LogicalSize},
     event::{ElementState, Ime, MouseButton, MouseScrollDelta},
     keyboard::{Key, ModifiersState, NamedKey},
-    window::{CursorIcon, Theme},
+    window::{CursorIcon, Theme, WindowId},
 };
 
 #[cfg(target_os = "linux")]
@@ -25,6 +26,7 @@ use crate::{
     },
     event::{Event, EventListener},
     id::{Id, IdPath, ID_PATHS},
+    inspector::{self, Capture, CaptureState, CapturedView},
     keyboard::KeyEvent,
     menu::Menu,
     pointer::{PointerButton, PointerInputEvent, PointerMoveEvent, PointerWheelEvent},
@@ -45,6 +47,7 @@ use crate::{
 /// - requesting a new animation frame from the backend
 pub(crate) struct WindowHandle {
     pub(crate) window: Option<winit::window::Window>,
+    window_id: WindowId,
     id: Id,
     /// Reactive Scope for this WindowHandle
     scope: Scope,
@@ -109,6 +112,7 @@ impl WindowHandle {
         let paint_state = PaintState::new(&window, scale, size.get_untracked() * scale);
         let mut window_handle = Self {
             window: Some(window),
+            window_id,
             id,
             scope,
             view,
@@ -445,11 +449,14 @@ impl WindowHandle {
         }
     }
 
-    fn layout(&mut self) {
+    fn layout(&mut self) -> Duration {
         let mut cx = LayoutCx::new(&mut self.app_state);
 
         cx.app_state_mut().root = Some(self.view.layout_main(&mut cx));
+
+        let start = Instant::now();
         cx.app_state_mut().compute_layout();
+        let taffy_duration = Instant::now().saturating_duration_since(start);
 
         cx.clear();
         self.view.compute_layout_main(&mut cx);
@@ -460,13 +467,17 @@ impl WindowHandle {
         let id = self.app_state.ids_with_anim_in_progress().get(0).cloned();
 
         if let Some(id) = id {
-            exec_after(Duration::from_millis(1), move |_| {
-                id.request_layout();
-            });
+            if self.app_state.capture.is_none() {
+                exec_after(Duration::from_millis(1), move |_| {
+                    id.request_layout();
+                });
+            }
         }
+
+        taffy_duration
     }
 
-    pub fn paint(&mut self) {
+    pub fn paint(&mut self) -> Option<DynamicImage> {
         let mut cx = PaintCx {
             app_state: &mut self.app_state,
             paint_state: &mut self.paint_state,
@@ -495,21 +506,74 @@ impl WindowHandle {
             saved_scroll_bar_thicknesses: Vec::new(),
             saved_scroll_bar_edge_widths: Vec::new(),
         };
-        cx.paint_state.renderer.begin();
+        cx.paint_state
+            .renderer
+            .begin(cx.app_state.capture.is_some());
         if !self.transparent {
+            let scale = cx.app_state.scale;
             // fill window with default white background if it's not transparent
             cx.fill(
-                &self.size.get_untracked().to_rect(),
+                &self
+                    .size
+                    .get_untracked()
+                    .to_rect()
+                    .scale_from_origin(1.0 / scale)
+                    .expand(),
                 peniko::Color::WHITE,
                 0.0,
             );
         }
         self.view.paint_main(&mut cx);
         if let Some(window) = self.window.as_ref() {
-            window.pre_present_notify();
+            if cx.app_state.capture.is_none() {
+                window.pre_present_notify();
+            }
         }
-        cx.paint_state.renderer.finish();
+        let image = cx.paint_state.renderer.finish();
+
+        if cx.app_state.capture.is_none() {
+            self.process_update();
+        }
+
+        image
+    }
+
+    pub(crate) fn capture(&mut self) -> Capture {
+        self.app_state.capture = Some(CaptureState::default());
+
+        // Trigger painting to create a Vger renderer which can capture the output.
+        // This can be expensive so it could skew the paint time measurement.
+        self.paint();
+
+        // Ensure we run layout again for accurate timing.
+        self.app_state
+            .view_states
+            .values_mut()
+            .for_each(|state| state.request_layout = true);
+
+        let start = Instant::now();
+
+        let taffy_duration = self.layout();
+        let post_layout = Instant::now();
+        let window = self.paint().map(Rc::new);
+        let end = Instant::now();
+
+        let root_layout = self.app_state.get_layout_rect(self.view.id());
+        let capture = Capture {
+            start,
+            post_layout,
+            end,
+            taffy_duration,
+            window,
+            window_size: self.size.get_untracked() / self.app_state.scale,
+            scale: self.scale * self.app_state.scale,
+            root: CapturedView::capture(&self.view, &mut self.app_state, root_layout),
+            state: self.app_state.capture.take().unwrap(),
+        };
+        // Process any updates produced by capturing
         self.process_update();
+
+        capture
     }
 
     pub(crate) fn process_update(&mut self) {
@@ -790,6 +854,9 @@ impl WindowHandle {
                             );
                         }
                     }
+                    UpdateMessage::Inspect => {
+                        inspector::capture(self.window_id);
+                    }
                 }
             }
         }
diff --git a/tiny_skia/src/lib.rs b/tiny_skia/src/lib.rs
index 32d69c1e..cd1fe82d 100644
--- a/tiny_skia/src/lib.rs
+++ b/tiny_skia/src/lib.rs
@@ -6,6 +6,7 @@ use floem_renderer::tiny_skia::{
 };
 use floem_renderer::Img;
 use floem_renderer::Renderer;
+use image::DynamicImage;
 use peniko::kurbo::PathEl;
 use peniko::{
     kurbo::{Affine, Point, Rect, Shape},
@@ -338,7 +339,7 @@ impl TinySkiaRenderer {
 }
 
 impl Renderer for TinySkiaRenderer {
-    fn begin(&mut self) {
+    fn begin(&mut self, _capture: bool) {
         self.transform = Affine::IDENTITY;
         self.pixmap.fill(tiny_skia::Color::WHITE);
         self.clip = None;
@@ -521,7 +522,7 @@ impl Renderer for TinySkiaRenderer {
         self.clip = None;
     }
 
-    fn finish(&mut self) {
+    fn finish(&mut self) -> Option<DynamicImage> {
         // Remove cache entries which were not accessed.
         self.image_cache.retain(|_, (c, _)| *c == self.cache_color);
         self.glyph_cache.retain(|_, (c, _)| *c == self.cache_color);
@@ -543,5 +544,7 @@ impl Renderer for TinySkiaRenderer {
         buffer
             .present()
             .expect("failed to present the surface buffer");
+
+        None
     }
 }
diff --git a/vger/src/lib.rs b/vger/src/lib.rs
index d819686d..0105612f 100644
--- a/vger/src/lib.rs
+++ b/vger/src/lib.rs
@@ -1,9 +1,11 @@
+use std::mem;
+use std::sync::mpsc::sync_channel;
 use std::sync::Arc;
 
 use anyhow::Result;
 use floem_renderer::cosmic_text::{SubpixelBin, SwashCache, TextLayout};
 use floem_renderer::{tiny_skia, Img, Renderer};
-use image::EncodableLayout;
+use image::{DynamicImage, EncodableLayout, RgbaImage};
 use peniko::{
     kurbo::{Affine, Point, Rect, Shape, Vec2},
     BrushRef, Color, GradientKind,
@@ -17,12 +19,21 @@ pub struct VgerRenderer {
     queue: Arc<Queue>,
     surface: Surface,
     vger: Vger,
+    alt_vger: Option<Vger>,
     config: SurfaceConfiguration,
     scale: f64,
     transform: Affine,
     clip: Option<Rect>,
+    capture: bool,
 }
 
+const CLEAR_COLOR: wgpu::Color = wgpu::Color {
+    r: 0.0,
+    g: 0.0,
+    b: 0.0,
+    a: 0.0,
+};
+
 impl VgerRenderer {
     pub fn new<
         W: raw_window_handle::HasRawDisplayHandle + raw_window_handle::HasRawWindowHandle,
@@ -97,10 +108,12 @@ impl VgerRenderer {
             queue,
             surface,
             vger,
+            alt_vger: None,
             scale,
             config,
             transform: Affine::IDENTITY,
             clip: None,
+            capture: false,
         })
     }
 
@@ -161,10 +174,113 @@ impl VgerRenderer {
         let size = (end - origin).to_size();
         vger::defs::LocalRect::new(origin, size)
     }
+
+    fn render_image(&mut self) -> Option<DynamicImage> {
+        let width_align = wgpu::COPY_BYTES_PER_ROW_ALIGNMENT - 1;
+        let width = (self.config.width + width_align) & !width_align;
+        let height = self.config.height;
+        let texture_desc = wgpu::TextureDescriptor {
+            size: wgpu::Extent3d {
+                width: self.config.width,
+                height,
+                depth_or_array_layers: 1,
+            },
+            mip_level_count: 1,
+            sample_count: 1,
+            dimension: wgpu::TextureDimension::D2,
+            format: wgpu::TextureFormat::Rgba8Unorm,
+            usage: wgpu::TextureUsages::RENDER_ATTACHMENT | wgpu::TextureUsages::COPY_SRC,
+            label: Some("render_texture"),
+            view_formats: &[wgpu::TextureFormat::Rgba8Unorm],
+        };
+        let texture = self.device.create_texture(&texture_desc);
+        let view = texture.create_view(&wgpu::TextureViewDescriptor::default());
+        let desc = wgpu::RenderPassDescriptor {
+            color_attachments: &[Some(wgpu::RenderPassColorAttachment {
+                view: &view,
+                resolve_target: None,
+                ops: wgpu::Operations {
+                    load: wgpu::LoadOp::Clear(CLEAR_COLOR),
+                    store: StoreOp::Store,
+                },
+            })],
+            ..Default::default()
+        };
+
+        self.vger.encode(&desc);
+
+        let bytes_per_pixel = 4;
+        let buffer = self.device.create_buffer(&wgpu::BufferDescriptor {
+            label: None,
+            size: (width as u64 * height as u64 * bytes_per_pixel),
+            usage: wgpu::BufferUsages::MAP_READ | wgpu::BufferUsages::COPY_DST,
+            mapped_at_creation: false,
+        });
+        let bytes_per_row = width * bytes_per_pixel as u32;
+        assert!(bytes_per_row % wgpu::COPY_BYTES_PER_ROW_ALIGNMENT == 0);
+
+        let mut encoder = self
+            .device
+            .create_command_encoder(&wgpu::CommandEncoderDescriptor { label: None });
+        encoder.copy_texture_to_buffer(
+            texture.as_image_copy(),
+            wgpu::ImageCopyBuffer {
+                buffer: &buffer,
+                layout: wgpu::ImageDataLayout {
+                    offset: 0,
+                    bytes_per_row: Some(bytes_per_row),
+                    rows_per_image: None,
+                },
+            },
+            texture_desc.size,
+        );
+        let command_buffer = encoder.finish();
+        self.queue.submit(Some(command_buffer));
+        self.device.poll(wgpu::Maintain::Wait);
+
+        let slice = buffer.slice(..);
+        let (tx, rx) = sync_channel(1);
+        slice.map_async(wgpu::MapMode::Read, move |r| tx.send(r).unwrap());
+
+        loop {
+            if let Ok(r) = rx.try_recv() {
+                break r.ok()?;
+            }
+            if self.device.poll(wgpu::MaintainBase::Wait) {
+                rx.recv().ok()?.ok()?;
+                break;
+            }
+        }
+
+        let mut cropped_buffer = Vec::new();
+        let buffer: Vec<u8> = slice.get_mapped_range().to_owned();
+
+        let mut cursor = 0;
+        let row_size = self.config.width as usize * bytes_per_pixel as usize;
+        for _ in 0..height {
+            cropped_buffer.extend_from_slice(&buffer[cursor..(cursor + row_size)]);
+            cursor += bytes_per_row as usize;
+        }
+
+        RgbaImage::from_raw(self.config.width, height, cropped_buffer).map(DynamicImage::ImageRgba8)
+    }
 }
 
 impl Renderer for VgerRenderer {
-    fn begin(&mut self) {
+    fn begin(&mut self, capture: bool) {
+        // Switch to the capture Vger if needed
+        if self.capture != capture {
+            self.capture = capture;
+            if self.alt_vger.is_none() {
+                self.alt_vger = Some(vger::Vger::new(
+                    self.device.clone(),
+                    self.queue.clone(),
+                    TextureFormat::Rgba8Unorm,
+                ));
+            }
+            mem::swap(&mut self.vger, self.alt_vger.as_mut().unwrap())
+        }
+
         self.transform = Affine::IDENTITY;
         self.vger.begin(
             self.config.width as f32,
@@ -431,33 +547,33 @@ impl Renderer for VgerRenderer {
         self.clip = None;
     }
 
-    fn finish(&mut self) {
-        if let Ok(frame) = self.surface.get_current_texture() {
-            let texture_view = frame
-                .texture
-                .create_view(&wgpu::TextureViewDescriptor::default());
-            let desc = wgpu::RenderPassDescriptor {
-                label: None,
-                color_attachments: &[Some(wgpu::RenderPassColorAttachment {
-                    view: &texture_view,
-                    resolve_target: None,
-                    ops: wgpu::Operations {
-                        load: wgpu::LoadOp::Clear(wgpu::Color {
-                            r: 0.0,
-                            g: 0.0,
-                            b: 0.0,
-                            a: 0.0,
-                        }),
-                        store: StoreOp::Store,
-                    },
-                })],
-                depth_stencil_attachment: None,
-                timestamp_writes: None,
-                occlusion_query_set: None,
-            };
-
-            self.vger.encode(&desc);
-            frame.present();
+    fn finish(&mut self) -> Option<DynamicImage> {
+        if self.capture {
+            self.render_image()
+        } else {
+            if let Ok(frame) = self.surface.get_current_texture() {
+                let texture_view = frame
+                    .texture
+                    .create_view(&wgpu::TextureViewDescriptor::default());
+                let desc = wgpu::RenderPassDescriptor {
+                    label: None,
+                    color_attachments: &[Some(wgpu::RenderPassColorAttachment {
+                        view: &texture_view,
+                        resolve_target: None,
+                        ops: wgpu::Operations {
+                            load: wgpu::LoadOp::Clear(CLEAR_COLOR),
+                            store: StoreOp::Store,
+                        },
+                    })],
+                    depth_stencil_attachment: None,
+                    timestamp_writes: None,
+                    occlusion_query_set: None,
+                };
+
+                self.vger.encode(&desc);
+                frame.present();
+            }
+            None
         }
     }
 }