diff --git a/Cargo.toml b/Cargo.toml
index c3f151d..30c441b 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -4,6 +4,7 @@ members = [
     "terminal/display_server",
     "terminal/ansi_parser",
     "shell",
+    "sdf_editor",
     "math/str2int",
     "math/int2str",
     "math/radix_transform",
diff --git a/nested/src/integer/editor.rs b/nested/src/integer/editor.rs
index 0281a94..72d2678 100644
--- a/nested/src/integer/editor.rs
+++ b/nested/src/integer/editor.rs
@@ -6,7 +6,7 @@ use {
     crate::{
         core::{ViewPort, OuterViewPort, Observer},
         singleton::{SingletonView, SingletonBuffer},
-        sequence::{SequenceView},
+        sequence::{SequenceView, SequenceViewExt},
         vec::VecBuffer,
         terminal::{TerminalAtom, TerminalStyle, TerminalView, TerminalEvent, TerminalEditor, TerminalEditorResult},
         tree_nav::{TreeNav, TreeNavResult, TerminalTreeEditor, TreeCursor},
@@ -102,6 +102,17 @@ impl PosIntEditor {
         self.digits_editor.get_data_port()
             .filter_map(move |digit_editor| digit_editor.read().unwrap().data.get()?.to_digit(radix))
     }
+
+    pub fn get_value(&self) -> u32 {
+        let mut value = 0;
+        let mut weight = 1;
+        for digit_value in self.get_data_port().get_view().unwrap().iter() {
+            value += digit_value * weight;
+            weight *= self.radix;
+        }
+
+        value
+    }
 }
 
 impl TreeNav for PosIntEditor {
diff --git a/sdf_editor/Cargo.toml b/sdf_editor/Cargo.toml
new file mode 100644
index 0000000..44b1df3
--- /dev/null
+++ b/sdf_editor/Cargo.toml
@@ -0,0 +1,18 @@
+[package]
+name = "sdf_editor"
+version = "0.1.0"
+edition = "2018"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+nako = {git= "https://gitlab.com/tendsinmende/nako.git"}
+nako_std = {git= "https://gitlab.com/tendsinmende/nako.git"}
+nakorender = {git="https://gitlab.com/tendsinmende/nako.git", default-features = false}
+nested = { path = "../nested" }
+cgmath = "*"
+termion = "*"
+
+[dependencies.async-std]
+version = "1.9.0"
+features = ["unstable", "attributes"]
diff --git a/sdf_editor/src/main.rs b/sdf_editor/src/main.rs
new file mode 100644
index 0000000..0823b6d
--- /dev/null
+++ b/sdf_editor/src/main.rs
@@ -0,0 +1,124 @@
+use{
+    std::sync::{Arc, RwLock},
+    cgmath::{Point2, Vector2},
+    termion::event::{Event, Key},
+    nested::{
+        core::{
+            View,
+            ViewPort,
+            Observer,
+            OuterViewPort,
+            port::UpdateTask
+        },
+        singleton::{SingletonBuffer, SingletonView},
+        sequence::{SequenceView},
+        integer::{PosIntEditor},
+        terminal::{Terminal, TerminalCompositor, TerminalEvent, TerminalEditor},
+        list::{ListEditor},
+        tree_nav::{TreeNav}
+    }
+};
+
+
+// projects a Sequence of ints to a color tuple
+struct ColorCollector {
+    src_view: Option<Arc<dyn SequenceView<Item = u32>>>,
+    color: SingletonBuffer<(u8, u8, u8)>
+}
+
+impl ColorCollector {
+    fn update(&mut self) {
+        if let Some(l) = self.src_view.as_ref() {
+            let r = l.get(&0).unwrap_or(0);
+            let g = l.get(&1).unwrap_or(0);
+            let b = l.get(&2).unwrap_or(0);
+
+            self.color.set((r as u8, g as u8, b as u8));
+        }
+    }
+}
+
+impl Observer<dyn SequenceView<Item = u32>> for ColorCollector {
+    fn reset(&mut self, new_view: Option<Arc<dyn SequenceView<Item = u32>>>) {
+        self.src_view = new_view;
+        self.update();
+    }
+
+    fn notify(&mut self, idx: &usize) {
+        self.update();
+    }
+}
+
+
+#[async_std::main]
+async fn main() {
+    let term_port = ViewPort::new();
+    let compositor = TerminalCompositor::new(term_port.inner());
+
+    let mut term = Terminal::new(term_port.outer());
+    let term_writer = term.get_writer();
+
+    let mut color_editor = ListEditor::new(
+        || {
+            Arc::new(RwLock::new(PosIntEditor::new(16)))
+        },
+        nested::list::ListEditorStyle::Clist
+    );
+
+    color_editor.goto(nested::tree_nav::TreeCursor {
+        leaf_mode: nested::list::ListCursorMode::Insert,
+        tree_addr: vec![ 0 ]
+    });
+
+    let color_port = ViewPort::new();
+    let color_collector = Arc::new(RwLock::new(ColorCollector {
+        src_view: None,
+        color: SingletonBuffer::new((0, 0, 0), color_port.inner())
+    }));
+
+    color_editor.get_data_port().map(
+        |sub_editor| sub_editor.read().unwrap().get_value()
+    ).add_observer(
+        color_collector
+    );
+
+    compositor.write().unwrap().push(color_editor.get_term_view().offset(Vector2::new(2, 2)));
+    
+    async_std::task::spawn(
+        async move {
+            loop {
+                term_port.update();
+                match term.next_event().await {
+                    TerminalEvent::Input(Event::Key(Key::Ctrl('c'))) |
+                    TerminalEvent::Input(Event::Key(Key::Ctrl('g'))) |
+                    TerminalEvent::Input(Event::Key(Key::Ctrl('d'))) => break,
+
+                    TerminalEvent::Input(Event::Key(Key::Left)) => {
+                        color_editor.pxev();
+                    }
+                    TerminalEvent::Input(Event::Key(Key::Right)) => {
+                        color_editor.nexd();
+                    }
+                    TerminalEvent::Input(Event::Key(Key::Up)) => {
+                        color_editor.up();
+                    }
+                    TerminalEvent::Input(Event::Key(Key::Down)) => {
+                        color_editor.dn();
+                    }
+                    TerminalEvent::Input(Event::Key(Key::Home)) => {
+                        color_editor.goto_home();
+                    }
+                    TerminalEvent::Input(Event::Key(Key::End)) => {
+                        color_editor.goto_end();
+                    }
+                    event => {
+                        color_editor.handle_terminal_event(&event);
+                    }
+                }
+            }
+        }
+    );
+    
+    term_writer.show().await.expect("output error!");
+}
+