diff --git a/Cargo.lock b/Cargo.lock
index 4bf96896..60f667f6 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -391,6 +391,7 @@ version = "0.1.0"
 dependencies = [
  "egui 0.1.2",
  "js-sys 0.3.42 (registry+https://github.com/rust-lang/crates.io-index)",
+ "parking_lot 0.11.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde 1.0.114 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde_json 1.0.56 (registry+https://github.com/rust-lang/crates.io-index)",
  "wasm-bindgen 0.2.65 (registry+https://github.com/rust-lang/crates.io-index)",
@@ -420,11 +421,9 @@ dependencies = [
  "egui 0.1.2",
  "egui_web 0.1.0",
  "js-sys 0.3.42 (registry+https://github.com/rust-lang/crates.io-index)",
- "parking_lot 0.11.0 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde 1.0.114 (registry+https://github.com/rust-lang/crates.io-index)",
  "serde_json 1.0.56 (registry+https://github.com/rust-lang/crates.io-index)",
  "wasm-bindgen 0.2.65 (registry+https://github.com/rust-lang/crates.io-index)",
- "web-sys 0.3.42 (registry+https://github.com/rust-lang/crates.io-index)",
 ]
 
 [[package]]
diff --git a/docs/example_wasm.js b/docs/example_wasm.js
index 8b5a4b59..79fed762 100644
--- a/docs/example_wasm.js
+++ b/docs/example_wasm.js
@@ -207,39 +207,38 @@ function makeMutClosure(arg0, arg1, dtor, f) {
     real.original = state;
     return real;
 }
-function __wbg_adapter_26(arg0, arg1, arg2) {
-    wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h59314522206fe5c1(arg0, arg1, addHeapObject(arg2));
+function __wbg_adapter_26(arg0, arg1) {
+    wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h5402719cc6dde927(arg0, arg1);
 }
 
 function __wbg_adapter_29(arg0, arg1, arg2) {
-    wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h59314522206fe5c1(arg0, arg1, addHeapObject(arg2));
+    wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h22fd33d9f501a695(arg0, arg1, addHeapObject(arg2));
 }
 
 function __wbg_adapter_32(arg0, arg1, arg2) {
-    wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h59314522206fe5c1(arg0, arg1, addHeapObject(arg2));
+    wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h22fd33d9f501a695(arg0, arg1, addHeapObject(arg2));
 }
 
-function __wbg_adapter_35(arg0, arg1) {
-    wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h352b9cbf82e6c0ee(arg0, arg1);
+function __wbg_adapter_35(arg0, arg1, arg2) {
+    wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h22fd33d9f501a695(arg0, arg1, addHeapObject(arg2));
 }
 
 function __wbg_adapter_38(arg0, arg1) {
-    wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h1322780ee0c72b2c(arg0, arg1);
+    wasm._dyn_core__ops__function__FnMut_____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h84da5f062b972f09(arg0, arg1);
 }
 
 function __wbg_adapter_41(arg0, arg1, arg2) {
-    wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h59314522206fe5c1(arg0, arg1, addHeapObject(arg2));
+    wasm._dyn_core__ops__function__FnMut__A____Output___R_as_wasm_bindgen__closure__WasmClosure___describe__invoke__h22fd33d9f501a695(arg0, arg1, addHeapObject(arg2));
 }
 
 /**
+* This is the entry-point for all the web-assembly.
 * @param {string} canvas_id
-* @returns {StateRef}
 */
 __exports.start = function(canvas_id) {
     var ptr0 = passStringToWasm0(canvas_id, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
     var len0 = WASM_VECTOR_LEN;
-    var ret = wasm.start(ptr0, len0);
-    return StateRef.__wrap(ret);
+    wasm.start(ptr0, len0);
 };
 
 function handleError(f) {
@@ -256,25 +255,6 @@ function handleError(f) {
 function getArrayU8FromWasm0(ptr, len) {
     return getUint8Memory0().subarray(ptr / 1, ptr / 1 + len);
 }
-/**
-*/
-class StateRef {
-
-    static __wrap(ptr) {
-        const obj = Object.create(StateRef.prototype);
-        obj.ptr = ptr;
-
-        return obj;
-    }
-
-    free() {
-        const ptr = this.ptr;
-        this.ptr = 0;
-
-        wasm.__wbg_stateref_free(ptr);
-    }
-}
-__exports.StateRef = StateRef;
 
 async function load(module, imports) {
     if (typeof Response === 'function' && module instanceof Response) {
@@ -745,28 +725,28 @@ async function init(input) {
         var ret = wasm.memory;
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper176 = function(arg0, arg1, arg2) {
-        var ret = makeMutClosure(arg0, arg1, 38, __wbg_adapter_35);
+    imports.wbg.__wbindgen_closure_wrapper373 = function(arg0, arg1, arg2) {
+        var ret = makeMutClosure(arg0, arg1, 71, __wbg_adapter_35);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper170 = function(arg0, arg1, arg2) {
-        var ret = makeMutClosure(arg0, arg1, 38, __wbg_adapter_26);
+    imports.wbg.__wbindgen_closure_wrapper375 = function(arg0, arg1, arg2) {
+        var ret = makeMutClosure(arg0, arg1, 71, __wbg_adapter_29);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper166 = function(arg0, arg1, arg2) {
-        var ret = makeMutClosure(arg0, arg1, 38, __wbg_adapter_38);
+    imports.wbg.__wbindgen_closure_wrapper371 = function(arg0, arg1, arg2) {
+        var ret = makeMutClosure(arg0, arg1, 71, __wbg_adapter_38);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper172 = function(arg0, arg1, arg2) {
-        var ret = makeMutClosure(arg0, arg1, 38, __wbg_adapter_41);
+    imports.wbg.__wbindgen_closure_wrapper365 = function(arg0, arg1, arg2) {
+        var ret = makeMutClosure(arg0, arg1, 71, __wbg_adapter_26);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper168 = function(arg0, arg1, arg2) {
-        var ret = makeMutClosure(arg0, arg1, 38, __wbg_adapter_29);
+    imports.wbg.__wbindgen_closure_wrapper369 = function(arg0, arg1, arg2) {
+        var ret = makeMutClosure(arg0, arg1, 71, __wbg_adapter_41);
         return addHeapObject(ret);
     };
-    imports.wbg.__wbindgen_closure_wrapper174 = function(arg0, arg1, arg2) {
-        var ret = makeMutClosure(arg0, arg1, 38, __wbg_adapter_32);
+    imports.wbg.__wbindgen_closure_wrapper366 = function(arg0, arg1, arg2) {
+        var ret = makeMutClosure(arg0, arg1, 71, __wbg_adapter_32);
         return addHeapObject(ret);
     };
 
diff --git a/docs/example_wasm_bg.wasm b/docs/example_wasm_bg.wasm
index 4757512c..e761843c 100644
Binary files a/docs/example_wasm_bg.wasm and b/docs/example_wasm_bg.wasm differ
diff --git a/egui/src/widgets.rs b/egui/src/widgets.rs
index 53382efb..1486a592 100644
--- a/egui/src/widgets.rs
+++ b/egui/src/widgets.rs
@@ -120,6 +120,12 @@ impl Into<Label> for &str {
     }
 }
 
+impl Into<Label> for &String {
+    fn into(self) -> Label {
+        Label::new(self)
+    }
+}
+
 impl Into<Label> for String {
     fn into(self) -> Label {
         Label::new(self)
diff --git a/egui_web/Cargo.toml b/egui_web/Cargo.toml
index 08785b0e..afbb9eee 100644
--- a/egui_web/Cargo.toml
+++ b/egui_web/Cargo.toml
@@ -10,6 +10,7 @@ crate-type = ["cdylib", "rlib"]
 
 [dependencies]
 js-sys = "0.3"
+parking_lot = "0.11"
 serde = "1"
 serde_json = "1"
 wasm-bindgen = "0.2"
@@ -26,7 +27,9 @@ features = [
   'Element',
   'HtmlCanvasElement',
   'HtmlElement',
+  'KeyboardEvent',
   'Location',
+  'MouseEvent',
   'Performance',
   'Storage',
   'Touch',
diff --git a/egui_web/src/lib.rs b/egui_web/src/lib.rs
index 9c7bfb62..2530b5ef 100644
--- a/egui_web/src/lib.rs
+++ b/egui_web/src/lib.rs
@@ -3,25 +3,43 @@
 
 pub mod webgl;
 
+use parking_lot::Mutex;
+use std::sync::Arc;
+use wasm_bindgen::prelude::*;
+
 // ----------------------------------------------------------------------------
 
-use std::sync::Arc;
-use wasm_bindgen::JsValue;
+pub struct BackendInfo {
+    pub painter_debug_info: String,
+    /// excludes call to paint backend
+    pub cpu_time: f32,
+    pub fps: f32,
 
-pub struct EguiWeb {
+    /// e.g. "#fragment" part of "www.example.com/index.html#fragment"
+    pub web_location_hash: String,
+}
+
+/// Implement this and use `egui_web::AppRunner` to run your app.
+pub trait App {
+    fn ui(&mut self, ui: &mut egui::Ui, info: &BackendInfo);
+}
+
+// ----------------------------------------------------------------------------
+
+pub struct Backend {
     ctx: Arc<egui::Context>,
-    webgl_painter: webgl::Painter,
+    painter: webgl::Painter,
     frame_times: egui::MovementTracker<f32>,
     frame_start: Option<f64>,
 }
 
-impl EguiWeb {
-    pub fn new(canvas_id: &str) -> Result<EguiWeb, JsValue> {
+impl Backend {
+    pub fn new(canvas_id: &str) -> Result<Backend, JsValue> {
         let ctx = egui::Context::new();
         load_memory(&ctx);
-        Ok(EguiWeb {
+        Ok(Backend {
             ctx,
-            webgl_painter: webgl::Painter::new(canvas_id)?,
+            painter: webgl::Painter::new(canvas_id)?,
             frame_times: egui::MovementTracker::new(1000, 1.0),
             frame_start: None,
         })
@@ -29,7 +47,7 @@ impl EguiWeb {
 
     /// id of the canvas html element containing the rendering
     pub fn canvas_id(&self) -> &str {
-        self.webgl_painter.canvas_id()
+        self.painter.canvas_id()
     }
 
     pub fn begin_frame(&mut self, raw_input: egui::RawInput) -> egui::Ui {
@@ -49,7 +67,7 @@ impl EguiWeb {
         let now = now_sec();
         self.frame_times.add(now, (now - frame_start) as f32);
 
-        self.webgl_painter.paint_batches(
+        self.painter.paint_batches(
             bg_color,
             batches,
             self.ctx.texture(),
@@ -62,11 +80,11 @@ impl EguiWeb {
     }
 
     pub fn painter_debug_info(&self) -> String {
-        self.webgl_painter.debug_info()
+        self.painter.debug_info()
     }
 
     /// excludes painting
-    pub fn cpu_usage(&self) -> f32 {
+    pub fn cpu_time(&self) -> f32 {
         self.frame_times.average().unwrap_or_default()
     }
 
@@ -75,6 +93,87 @@ impl EguiWeb {
     }
 }
 
+// ----------------------------------------------------------------------------
+
+/// Data gathered between frames.
+/// Is translated to `egui::RawInput` at the start of each frame.
+#[derive(Default)]
+pub struct WebInput {
+    pub mouse_pos: Option<egui::Pos2>,
+    pub mouse_down: bool, // TODO: which button
+    pub is_touch: bool,
+    pub scroll_delta: egui::Vec2,
+    pub events: Vec<egui::Event>,
+}
+
+impl WebInput {
+    pub fn new_frame(&mut self) -> egui::RawInput {
+        egui::RawInput {
+            mouse_down: self.mouse_down,
+            mouse_pos: self.mouse_pos,
+            scroll_delta: std::mem::take(&mut self.scroll_delta),
+            screen_size: screen_size().unwrap(),
+            pixels_per_point: Some(pixels_per_point()),
+            time: now_sec(),
+            seconds_since_midnight: Some(seconds_since_midnight()),
+            events: std::mem::take(&mut self.events),
+        }
+    }
+}
+
+// ----------------------------------------------------------------------------
+
+pub struct AppRunner {
+    pub backend: Backend,
+    pub web_input: WebInput,
+    pub app: Box<dyn App>,
+}
+
+impl AppRunner {
+    pub fn new(canvas_id: &str, app: Box<dyn App>) -> Result<Self, JsValue> {
+        Ok(Self {
+            backend: Backend::new(canvas_id)?,
+            web_input: Default::default(),
+            app,
+        })
+    }
+
+    pub fn canvas_id(&self) -> &str {
+        self.backend.canvas_id()
+    }
+
+    pub fn paint(&mut self) -> Result<(), JsValue> {
+        resize_to_screen_size(self.backend.canvas_id());
+
+        let raw_input = self.web_input.new_frame();
+
+        let info = BackendInfo {
+            painter_debug_info: self.backend.painter_debug_info(),
+            cpu_time: self.backend.cpu_time(),
+            fps: self.backend.fps(),
+            web_location_hash: location_hash().unwrap_or_default(),
+        };
+
+        let mut ui = self.backend.begin_frame(raw_input);
+        self.app.ui(&mut ui, &info);
+        let output = self.backend.end_frame()?;
+
+        handle_output(&output);
+
+        Ok(())
+    }
+}
+
+/// Install event listeners to register different input events
+/// and starts running the given `AppRunner`.
+pub fn run(runner: AppRunner) -> Result<AppRunnerRef, JsValue> {
+    let runner = AppRunnerRef(Arc::new(Mutex::new(runner)));
+    install_canvas_events(&runner)?;
+    install_document_events(&runner)?;
+    paint_and_schedule(runner.clone())?;
+    Ok(runner)
+}
+
 // ----------------------------------------------------------------------------
 // Helpers to hide some of the verbosity of web_sys
 
@@ -272,3 +371,228 @@ pub fn translate_key(key: &str) -> Option<egui::Key> {
         _ => None,
     }
 }
+
+// ----------------------------------------------------------------------------
+
+#[derive(Clone)]
+pub struct AppRunnerRef(Arc<Mutex<AppRunner>>);
+
+/// If true, paint at full framerate always.
+/// If false, only paint on input.
+/// TODO: if this is turned off we must turn off animations too (which hasn't been implemented yet).
+const ANIMATION_FRAME: bool = true;
+
+fn paint_and_schedule(runner: AppRunnerRef) -> Result<(), JsValue> {
+    runner.0.lock().paint()?;
+    if ANIMATION_FRAME {
+        request_animation_frame(runner)?;
+    }
+    Ok(())
+}
+
+fn request_animation_frame(runner: AppRunnerRef) -> Result<(), JsValue> {
+    use wasm_bindgen::JsCast;
+    let window = web_sys::window().unwrap();
+    let closure = Closure::once(move || paint_and_schedule(runner));
+    window.request_animation_frame(closure.as_ref().unchecked_ref())?;
+    closure.forget(); // We must forget it, or else the callback is canceled on drop
+    Ok(())
+}
+
+fn invalidate(runner: &mut AppRunner) -> Result<(), JsValue> {
+    if ANIMATION_FRAME {
+        Ok(()) // No need to invalidate - we repaint all the time
+    } else {
+        runner.paint() // TODO: schedule repaint instead?
+    }
+}
+
+fn install_document_events(runner: &AppRunnerRef) -> Result<(), JsValue> {
+    use wasm_bindgen::JsCast;
+    let document = web_sys::window().unwrap().document().unwrap();
+
+    {
+        // keydown
+        let runner = runner.clone();
+        let closure = Closure::wrap(Box::new(move |event: web_sys::KeyboardEvent| {
+            let mut runner = runner.0.lock();
+            let key = event.key();
+            if let Some(key) = translate_key(&key) {
+                runner
+                    .web_input
+                    .events
+                    .push(egui::Event::Key { key, pressed: true });
+            } else {
+                runner.web_input.events.push(egui::Event::Text(key));
+            }
+            invalidate(&mut runner).unwrap();
+        }) as Box<dyn FnMut(_)>);
+        document.add_event_listener_with_callback("keydown", closure.as_ref().unchecked_ref())?;
+        closure.forget();
+    }
+
+    {
+        // keyup
+        let runner = runner.clone();
+        let closure = Closure::wrap(Box::new(move |event: web_sys::KeyboardEvent| {
+            let mut runner = runner.0.lock();
+            let key = event.key();
+            if let Some(key) = translate_key(&key) {
+                runner.web_input.events.push(egui::Event::Key {
+                    key,
+                    pressed: false,
+                });
+                invalidate(&mut runner).unwrap();
+            }
+        }) as Box<dyn FnMut(_)>);
+        document.add_event_listener_with_callback("keyup", closure.as_ref().unchecked_ref())?;
+        closure.forget();
+    }
+
+    for event_name in &["load", "pagehide", "pageshow", "resize"] {
+        let runner = runner.clone();
+        let closure = Closure::wrap(Box::new(move || {
+            invalidate(&mut runner.0.lock()).unwrap();
+        }) as Box<dyn FnMut()>);
+        document.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
+        closure.forget();
+    }
+
+    Ok(())
+}
+
+fn install_canvas_events(runner: &AppRunnerRef) -> Result<(), JsValue> {
+    use wasm_bindgen::JsCast;
+    let canvas = canvas_element(runner.0.lock().canvas_id()).unwrap();
+
+    {
+        let event_name = "mousedown";
+        let runner = runner.clone();
+        let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
+            let mut runner = runner.0.lock();
+            if !runner.web_input.is_touch {
+                runner.web_input.mouse_pos = Some(pos_from_mouse_event(runner.canvas_id(), &event));
+                runner.web_input.mouse_down = true;
+                invalidate(&mut runner).unwrap();
+                event.stop_propagation();
+                event.prevent_default();
+            }
+        }) as Box<dyn FnMut(_)>);
+        canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
+        closure.forget();
+    }
+
+    {
+        let event_name = "mousemove";
+        let runner = runner.clone();
+        let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
+            let mut runner = runner.0.lock();
+            if !runner.web_input.is_touch {
+                runner.web_input.mouse_pos = Some(pos_from_mouse_event(runner.canvas_id(), &event));
+                invalidate(&mut runner).unwrap();
+                event.stop_propagation();
+                event.prevent_default();
+            }
+        }) as Box<dyn FnMut(_)>);
+        canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
+        closure.forget();
+    }
+
+    {
+        let event_name = "mouseup";
+        let runner = runner.clone();
+        let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
+            let mut runner = runner.0.lock();
+            if !runner.web_input.is_touch {
+                runner.web_input.mouse_pos = Some(pos_from_mouse_event(runner.canvas_id(), &event));
+                runner.web_input.mouse_down = false;
+                invalidate(&mut runner).unwrap();
+                event.stop_propagation();
+                event.prevent_default();
+            }
+        }) as Box<dyn FnMut(_)>);
+        canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
+        closure.forget();
+    }
+
+    {
+        let event_name = "mouseleave";
+        let runner = runner.clone();
+        let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
+            let mut runner = runner.0.lock();
+            if !runner.web_input.is_touch {
+                runner.web_input.mouse_pos = None;
+                invalidate(&mut runner).unwrap();
+                event.stop_propagation();
+                event.prevent_default();
+            }
+        }) as Box<dyn FnMut(_)>);
+        canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
+        closure.forget();
+    }
+
+    {
+        let event_name = "touchstart";
+        let runner = runner.clone();
+        let closure = Closure::wrap(Box::new(move |event: web_sys::TouchEvent| {
+            let mut runner = runner.0.lock();
+            runner.web_input.is_touch = true;
+            runner.web_input.mouse_pos = Some(pos_from_touch_event(&event));
+            runner.web_input.mouse_down = true;
+            invalidate(&mut runner).unwrap();
+            event.stop_propagation();
+            event.prevent_default();
+        }) as Box<dyn FnMut(_)>);
+        canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
+        closure.forget();
+    }
+
+    {
+        let event_name = "touchmove";
+        let runner = runner.clone();
+        let closure = Closure::wrap(Box::new(move |event: web_sys::TouchEvent| {
+            let mut runner = runner.0.lock();
+            runner.web_input.is_touch = true;
+            runner.web_input.mouse_pos = Some(pos_from_touch_event(&event));
+            invalidate(&mut runner).unwrap();
+            event.stop_propagation();
+            event.prevent_default();
+        }) as Box<dyn FnMut(_)>);
+        canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
+        closure.forget();
+    }
+
+    {
+        let event_name = "touchend";
+        let runner = runner.clone();
+        let closure = Closure::wrap(Box::new(move |event: web_sys::TouchEvent| {
+            let mut runner = runner.0.lock();
+            runner.web_input.is_touch = true;
+            runner.web_input.mouse_down = false; // First release mouse to click...
+            runner.paint().unwrap(); // ...do the clicking...
+            runner.web_input.mouse_pos = None; // ...remove hover effect
+            invalidate(&mut runner).unwrap();
+            event.stop_propagation();
+            event.prevent_default();
+        }) as Box<dyn FnMut(_)>);
+        canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
+        closure.forget();
+    }
+
+    {
+        let event_name = "wheel";
+        let runner = runner.clone();
+        let closure = Closure::wrap(Box::new(move |event: web_sys::WheelEvent| {
+            let mut runner = runner.0.lock();
+            runner.web_input.scroll_delta.x -= event.delta_x() as f32;
+            runner.web_input.scroll_delta.y -= event.delta_y() as f32;
+            invalidate(&mut runner).unwrap();
+            event.stop_propagation();
+            event.prevent_default();
+        }) as Box<dyn FnMut(_)>);
+        canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
+        closure.forget();
+    }
+
+    Ok(())
+}
diff --git a/example_wasm/Cargo.toml b/example_wasm/Cargo.toml
index bf4c7ba7..8d892d1b 100644
--- a/example_wasm/Cargo.toml
+++ b/example_wasm/Cargo.toml
@@ -10,33 +10,9 @@ crate-type = ["cdylib", "rlib"]
 
 [dependencies]
 js-sys = "0.3"
-parking_lot = "0.11"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 wasm-bindgen = "0.2"
 
 egui = { path = "../egui" }
 egui_web = { path = "../egui_web" }
-
-[dependencies.web-sys]
-version = "0.3"
-features = [
-  'console',
-  'CssStyleDeclaration',
-  'Document',
-  'Element',
-  'HtmlCanvasElement',
-  'HtmlElement',
-  'KeyboardEvent',
-  'Location',
-  'MouseEvent',
-  'Performance',
-  'Storage',
-  'WebGlBuffer',
-  'WebGlProgram',
-  'WebGlRenderingContext',
-  'WebGlShader',
-  'WebGlTexture',
-  'WebGlUniformLocation',
-  'Window',
-]
diff --git a/example_wasm/src/lib.rs b/example_wasm/src/lib.rs
index 81e6280e..6f5c0192 100644
--- a/example_wasm/src/lib.rs
+++ b/example_wasm/src/lib.rs
@@ -1,68 +1,32 @@
 #![deny(warnings)]
 #![warn(clippy::all)]
 
-use egui::{examples::ExampleApp, label, widgets::Separator, Align, RawInput, TextStyle, *};
+use egui::{label, widgets::Separator, Align, TextStyle, *};
 
 use wasm_bindgen::prelude::*;
 
 // ----------------------------------------------------------------------------
 
-/// Data gathered between frames.
-/// Is translated to `egui::RawInput` at the start of each frame.
-#[derive(Default)]
-pub struct WebInput {
-    pub mouse_pos: Option<Pos2>,
-    pub mouse_down: bool, // TODO: which button
-    pub is_touch: bool,
-    pub scroll_delta: Vec2,
-    pub events: Vec<Event>,
-}
-
-impl WebInput {
-    pub fn new_frame(&mut self) -> egui::RawInput {
-        egui::RawInput {
-            mouse_down: self.mouse_down,
-            mouse_pos: self.mouse_pos,
-            scroll_delta: std::mem::take(&mut self.scroll_delta),
-            screen_size: egui_web::screen_size().unwrap(),
-            pixels_per_point: Some(egui_web::pixels_per_point()),
-            time: egui_web::now_sec(),
-            seconds_since_midnight: Some(egui_web::seconds_since_midnight()),
-            events: std::mem::take(&mut self.events),
-        }
-    }
+/// This is the entry-point for all the web-assembly.
+#[wasm_bindgen]
+pub fn start(canvas_id: &str) -> Result<(), JsValue> {
+    let app = Box::new(MyApp::default());
+    let runner = egui_web::AppRunner::new(canvas_id, app)?;
+    egui_web::run(runner)?;
+    Ok(())
 }
 
 // ----------------------------------------------------------------------------
 
-pub struct State {
-    egui_web: egui_web::EguiWeb,
-    web_input: WebInput,
-    example_app: ExampleApp,
+#[derive(Default)]
+pub struct MyApp {
+    example_app: egui::examples::ExampleApp,
 }
 
-impl State {
-    fn new(canvas_id: &str) -> Result<State, JsValue> {
-        Ok(State {
-            egui_web: egui_web::EguiWeb::new(canvas_id)?,
-            web_input: Default::default(),
-            example_app: Default::default(),
-        })
-    }
+impl egui_web::App for MyApp {
+    fn ui(&mut self, ui: &mut egui::Ui, info: &egui_web::BackendInfo) {
+        self.example_app.ui(ui, &info.web_location_hash);
 
-    /// id of the canvas html element containing the rendering
-    pub fn canvas_id(&self) -> &str {
-        self.egui_web.canvas_id()
-    }
-
-    fn run(&mut self, raw_input: RawInput, web_location_hash: &str) -> Result<Output, JsValue> {
-        let mut ui = self.egui_web.begin_frame(raw_input);
-        self.ui(&mut ui, web_location_hash);
-        self.egui_web.end_frame()
-    }
-
-    fn ui(&mut self, ui: &mut egui::Ui, web_location_hash: &str) {
-        self.example_app.ui(ui, web_location_hash);
         let mut ui = ui.centered_column(ui.available().width().min(480.0));
         ui.set_layout(Layout::vertical(Align::Min));
         ui.add(label!("Egui!").text_style(TextStyle::Heading));
@@ -80,266 +44,16 @@ impl State {
 
         ui.label("WebGl painter info:");
         ui.indent("webgl region id", |ui| {
-            ui.label(self.egui_web.painter_debug_info());
+            ui.label(&info.painter_debug_info);
         });
 
         ui.add(
             label!(
                 "CPU usage: {:.2} ms (excludes painting)",
-                1e3 * self.egui_web.cpu_usage()
+                1e3 * info.cpu_time
             )
             .text_style(TextStyle::Monospace),
         );
-        ui.add(label!("FPS: {:.1}", self.egui_web.fps()).text_style(TextStyle::Monospace));
+        ui.add(label!("FPS: {:.1}", info.fps).text_style(TextStyle::Monospace));
     }
 }
-
-// ----------------------------------------------------------------------------
-use parking_lot::Mutex;
-use std::sync::Arc;
-
-#[wasm_bindgen]
-#[derive(Clone)]
-pub struct StateRef(Arc<Mutex<State>>);
-
-/// If true, paint at full framerate always.
-/// If false, only paint on input.
-/// TODO: if this is turned off we must turn off animations too (which hasn't been implemented yet).
-const ANIMATION_FRAME: bool = true;
-
-#[wasm_bindgen]
-pub fn start(canvas_id: &str) -> Result<StateRef, JsValue> {
-    let state = State::new(canvas_id)?;
-    let state = StateRef(Arc::new(Mutex::new(state)));
-
-    install_canvas_events(&state)?;
-    install_document_events(&state)?;
-    paint_and_schedule(state.clone())?;
-
-    Ok(state)
-}
-
-fn paint_and_schedule(state: StateRef) -> Result<(), JsValue> {
-    paint(&mut state.0.lock())?;
-    if ANIMATION_FRAME {
-        request_animation_frame(state)?;
-    }
-    Ok(())
-}
-
-fn request_animation_frame(state: StateRef) -> Result<(), JsValue> {
-    use wasm_bindgen::JsCast;
-    let window = web_sys::window().unwrap();
-    let closure = Closure::once(move || paint_and_schedule(state));
-    window.request_animation_frame(closure.as_ref().unchecked_ref())?;
-    closure.forget(); // We must forget it, or else the callback is canceled on drop
-    Ok(())
-}
-
-fn paint(state: &mut State) -> Result<(), JsValue> {
-    egui_web::resize_to_screen_size(state.canvas_id());
-    let raw_input = state.web_input.new_frame();
-    let web_location_hash = egui_web::location_hash().unwrap_or_default();
-    let output = state.run(raw_input, &web_location_hash)?;
-    egui_web::handle_output(&output);
-    Ok(())
-}
-
-fn invalidate(state: &mut State) -> Result<(), JsValue> {
-    if ANIMATION_FRAME {
-        Ok(()) // No need to invalidate - we repaint all the time
-    } else {
-        paint(state) // TODO: schedule repaint instead?
-    }
-}
-
-fn install_document_events(state: &StateRef) -> Result<(), JsValue> {
-    use wasm_bindgen::JsCast;
-    let document = web_sys::window().unwrap().document().unwrap();
-
-    {
-        // keydown
-        let state = state.clone();
-        let closure = Closure::wrap(Box::new(move |event: web_sys::KeyboardEvent| {
-            let mut state = state.0.lock();
-            let key = event.key();
-            if let Some(key) = egui_web::translate_key(&key) {
-                state
-                    .web_input
-                    .events
-                    .push(Event::Key { key, pressed: true });
-            } else {
-                state.web_input.events.push(Event::Text(key));
-            }
-            invalidate(&mut state).unwrap();
-        }) as Box<dyn FnMut(_)>);
-        document.add_event_listener_with_callback("keydown", closure.as_ref().unchecked_ref())?;
-        closure.forget();
-    }
-
-    {
-        // keyup
-        let state = state.clone();
-        let closure = Closure::wrap(Box::new(move |event: web_sys::KeyboardEvent| {
-            let mut state = state.0.lock();
-            let key = event.key();
-            if let Some(key) = egui_web::translate_key(&key) {
-                state.web_input.events.push(Event::Key {
-                    key,
-                    pressed: false,
-                });
-                invalidate(&mut state).unwrap();
-            }
-        }) as Box<dyn FnMut(_)>);
-        document.add_event_listener_with_callback("keyup", closure.as_ref().unchecked_ref())?;
-        closure.forget();
-    }
-
-    for event_name in &["load", "pagehide", "pageshow", "resize"] {
-        let state = state.clone();
-        let closure = Closure::wrap(Box::new(move || {
-            invalidate(&mut state.0.lock()).unwrap();
-        }) as Box<dyn FnMut()>);
-        document.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
-        closure.forget();
-    }
-
-    Ok(())
-}
-
-fn install_canvas_events(state: &StateRef) -> Result<(), JsValue> {
-    use egui_web::pos_from_mouse_event;
-    use wasm_bindgen::JsCast;
-    let canvas = egui_web::canvas_element(state.0.lock().canvas_id()).unwrap();
-
-    {
-        let event_name = "mousedown";
-        let state = state.clone();
-        let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
-            let mut state = state.0.lock();
-            if !state.web_input.is_touch {
-                state.web_input.mouse_pos = Some(pos_from_mouse_event(state.canvas_id(), &event));
-                state.web_input.mouse_down = true;
-                invalidate(&mut state).unwrap();
-                event.stop_propagation();
-                event.prevent_default();
-            }
-        }) as Box<dyn FnMut(_)>);
-        canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
-        closure.forget();
-    }
-
-    {
-        let event_name = "mousemove";
-        let state = state.clone();
-        let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
-            let mut state = state.0.lock();
-            if !state.web_input.is_touch {
-                state.web_input.mouse_pos = Some(pos_from_mouse_event(state.canvas_id(), &event));
-                invalidate(&mut state).unwrap();
-                event.stop_propagation();
-                event.prevent_default();
-            }
-        }) as Box<dyn FnMut(_)>);
-        canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
-        closure.forget();
-    }
-
-    {
-        let event_name = "mouseup";
-        let state = state.clone();
-        let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
-            let mut state = state.0.lock();
-            if !state.web_input.is_touch {
-                state.web_input.mouse_pos = Some(pos_from_mouse_event(state.canvas_id(), &event));
-                state.web_input.mouse_down = false;
-                invalidate(&mut state).unwrap();
-                event.stop_propagation();
-                event.prevent_default();
-            }
-        }) as Box<dyn FnMut(_)>);
-        canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
-        closure.forget();
-    }
-
-    {
-        let event_name = "mouseleave";
-        let state = state.clone();
-        let closure = Closure::wrap(Box::new(move |event: web_sys::MouseEvent| {
-            let mut state = state.0.lock();
-            if !state.web_input.is_touch {
-                state.web_input.mouse_pos = None;
-                invalidate(&mut state).unwrap();
-                event.stop_propagation();
-                event.prevent_default();
-            }
-        }) as Box<dyn FnMut(_)>);
-        canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
-        closure.forget();
-    }
-
-    {
-        let event_name = "touchstart";
-        let state = state.clone();
-        let closure = Closure::wrap(Box::new(move |event: web_sys::TouchEvent| {
-            let mut state = state.0.lock();
-            state.web_input.is_touch = true;
-            state.web_input.mouse_pos = Some(egui_web::pos_from_touch_event(&event));
-            state.web_input.mouse_down = true;
-            invalidate(&mut state).unwrap();
-            event.stop_propagation();
-            event.prevent_default();
-        }) as Box<dyn FnMut(_)>);
-        canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
-        closure.forget();
-    }
-
-    {
-        let event_name = "touchmove";
-        let state = state.clone();
-        let closure = Closure::wrap(Box::new(move |event: web_sys::TouchEvent| {
-            let mut state = state.0.lock();
-            state.web_input.is_touch = true;
-            state.web_input.mouse_pos = Some(egui_web::pos_from_touch_event(&event));
-            invalidate(&mut state).unwrap();
-            event.stop_propagation();
-            event.prevent_default();
-        }) as Box<dyn FnMut(_)>);
-        canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
-        closure.forget();
-    }
-
-    {
-        let event_name = "touchend";
-        let state = state.clone();
-        let closure = Closure::wrap(Box::new(move |event: web_sys::TouchEvent| {
-            let mut state = state.0.lock();
-            state.web_input.is_touch = true;
-            state.web_input.mouse_down = false; // First release mouse to click...
-            paint(&mut state).unwrap(); // ...do the clicking...
-            state.web_input.mouse_pos = None; // ...remove hover effect
-            invalidate(&mut state).unwrap();
-            event.stop_propagation();
-            event.prevent_default();
-        }) as Box<dyn FnMut(_)>);
-        canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
-        closure.forget();
-    }
-
-    {
-        let event_name = "wheel";
-        let state = state.clone();
-        let closure = Closure::wrap(Box::new(move |event: web_sys::WheelEvent| {
-            let mut state = state.0.lock();
-            state.web_input.scroll_delta.x -= event.delta_x() as f32;
-            state.web_input.scroll_delta.y -= event.delta_y() as f32;
-            invalidate(&mut state).unwrap();
-            event.stop_propagation();
-            event.prevent_default();
-        }) as Box<dyn FnMut(_)>);
-        canvas.add_event_listener_with_callback(event_name, closure.as_ref().unchecked_ref())?;
-        closure.forget();
-    }
-
-    Ok(())
-}