diff --git a/render-wasm/src/render/ui.rs b/render-wasm/src/render/ui.rs
index 2d48cdda6d..a5a7ad411a 100644
--- a/render-wasm/src/render/ui.rs
+++ b/render-wasm/src/render/ui.rs
@@ -4,6 +4,8 @@ use super::{RenderState, ShapesPoolRef, SurfaceId};
 use crate::render::{grid_layout, rulers};
 use crate::shapes::{Layout, Type};
 
+pub mod guides;
+
 pub fn render(render_state: &mut RenderState, shapes: ShapesPoolRef) {
     let canvas = render_state.surfaces.canvas(SurfaceId::UI);
     let viewbox = render_state.viewbox;
@@ -63,6 +65,8 @@ pub fn render(render_state: &mut RenderState, shapes: ShapesPoolRef) {
     let viewbox = render_state.viewbox;
     let ruler_state = render_state.rulers;
     rulers::render(canvas, viewbox, &render_state.fonts, &ruler_state);
+    // TODO: pass guides data here
+    guides::render(canvas, zoom, viewbox.area);
 
     canvas.restore();
 
diff --git a/render-wasm/src/render/ui/guides.rs b/render-wasm/src/render/ui/guides.rs
new file mode 100644
index 0000000000..cc5adfdbff
--- /dev/null
+++ b/render-wasm/src/render/ui/guides.rs
@@ -0,0 +1,37 @@
+use skia_safe::{self as skia};
+
+use crate::math::Rect;
+use crate::state::Guide;
+
+const LABEL_TEXT_COLOR: Color = Color::new(255, 255, 255);
+const LABEL_FONT_SIZE: f32 = 12.0;
+
+/// Renders the ruler guides overlay.
+///
+/// NOTE: temporary hardcoded implementation while we figure out exactly which
+/// data we need to receive from ClojureScript. For now it draws a single
+/// vertical 1px magenta (#ff00ff) guide at x=100, spanning the visible area.
+pub fn render(canvas: &skia::Canvas, zoom: f32, area: Rect) {
+    let guides = vec![
+        Guide::new(GuideKind::Vertical(100.0), Color::new(255, 0, 255)),
+        Guide::new(GuideKind::Horizontal(200.0), Color::new(0, 255, 0)),
+    ];
+    for guide in guides {
+        render_guide(canvas, zoom, area, guide);
+    }
+}
+
+pub fn render_guide(canvas: &skia::Canvas, zoom: f32, area: Rect, guide: Guide) {
+    let mut paint = skia::Paint::default();
+    paint.set_style(skia::PaintStyle::Stroke);
+    paint.set_color(guide.color.into());
+    paint.set_anti_alias(true);
+    paint.set_stroke_width(1.0 / zoom);
+
+    let (x1, y1, x2, y2) = match guide {
+        Guide::Vertical(x) => (x, area.top, x, area.bottom),
+        Guide::Horizontal(y) => (area.left, y, area.right, y),
+    };
+
+    canvas.draw_line((x1, y1), (x2, y2), &paint);
+}
diff --git a/render-wasm/src/state.rs b/render-wasm/src/state.rs
index 1995ffe288..87ef279dc7 100644
--- a/render-wasm/src/state.rs
+++ b/render-wasm/src/state.rs
@@ -4,9 +4,11 @@ use std::collections::HashMap;
 mod rulers;
 mod shapes_pool;
 mod text_editor;
+mod ui;
 pub use rulers::RulerState;
 pub use shapes_pool::{ShapesPool, ShapesPoolMutRef, ShapesPoolRef};
 pub use text_editor::*;
+pub use ui::*;
 
 use crate::error::{Error, Result};
 use crate::render::FrameType;
diff --git a/render-wasm/src/state/ui.rs b/render-wasm/src/state/ui.rs
new file mode 100644
index 0000000000..51bcd018e4
--- /dev/null
+++ b/render-wasm/src/state/ui.rs
@@ -0,0 +1,19 @@
+use crate::shapes::Color;
+
+#[derive(Debug, Clone, PartialEq, Copy)]
+pub enum GuideKind {
+    Vertical(f32),
+    Horizontal(f32),
+}
+
+#[derive(Debug, Clone, PartialEq, Copy)]
+pub struct Guide {
+    pub kind: GuideKind,
+    pub color: Color,
+}
+
+impl Guide {
+    pub fn new(kind: GuideKind, color: Color) -> Self {
+        Self { kind, color }
+    }
+}