diff --git a/examples/inputs.rs b/examples/inputs.rs
index 9b6ec104f..4b3dea56a 100644
--- a/examples/inputs.rs
+++ b/examples/inputs.rs
@@ -2,7 +2,8 @@
 //!
 //! There is some conversion happening when input types are checkbox/radio/select/textarea etc.
 
-use dioxus::{events::FormEvent, prelude::*};
+use dioxus::events::FormEvent;
+use dioxus::prelude::*;
 
 fn main() {
     dioxus_desktop::launch(app);
diff --git a/packages/core/src/arena.rs b/packages/core/src/arena.rs
index fbfd9cd8f..827e0d903 100644
--- a/packages/core/src/arena.rs
+++ b/packages/core/src/arena.rs
@@ -1,5 +1,6 @@
 use crate::{nodes::VNode, virtual_dom::VirtualDom};
 
+#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
 #[derive(Clone, Copy, Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Default)]
 pub struct ElementId(pub usize);
 
diff --git a/packages/core/src/create.rs b/packages/core/src/create.rs
index ce28d53a3..ccbdce71c 100644
--- a/packages/core/src/create.rs
+++ b/packages/core/src/create.rs
@@ -87,10 +87,14 @@ impl VirtualDom {
                             value,
                             id,
                         }),
+                        AttributeValue::Bool(value) => mutations.push(SetBoolAttribute {
+                            name: attribute.name,
+                            value,
+                            id,
+                        }),
                         AttributeValue::Listener(_) => todo!("create listener attributes"),
                         AttributeValue::Float(_) => todo!(),
                         AttributeValue::Int(_) => todo!(),
-                        AttributeValue::Bool(_) => todo!(),
                         AttributeValue::Any(_) => todo!(),
                         AttributeValue::None => todo!(),
                     }
@@ -138,11 +142,13 @@ impl VirtualDom {
             TemplateNode::DynamicText { .. } => mutations.push(CreateText {
                 value: "placeholder",
             }),
+
             TemplateNode::Element {
                 attrs,
                 children,
                 namespace,
                 tag,
+                inner_opt,
             } => {
                 let id = self.next_element(template);
 
@@ -159,6 +165,10 @@ impl VirtualDom {
                     _ => None,
                 }));
 
+                if children.is_empty() && inner_opt {
+                    return;
+                }
+
                 children
                     .into_iter()
                     .for_each(|child| self.create_static_node(mutations, template, child));
@@ -176,7 +186,7 @@ impl VirtualDom {
         idx: usize,
     ) -> usize {
         match &node {
-            DynamicNode::Text { id, value } => {
+            DynamicNode::Text { id, value, inner } => {
                 let new_id = self.next_element(template);
                 id.set(new_id);
                 mutations.push(HydrateText {
@@ -188,11 +198,17 @@ impl VirtualDom {
             }
 
             DynamicNode::Component {
-                props, placeholder, ..
+                props,
+                placeholder,
+                scope: scope_slot,
+                ..
             } => {
                 let scope = self
                     .new_scope(unsafe { std::mem::transmute(props.get()) })
                     .id;
+
+                scope_slot.set(Some(scope));
+
                 let return_nodes = unsafe { self.run_scope(scope).extend_lifetime_ref() };
 
                 match return_nodes {
@@ -247,7 +263,7 @@ impl VirtualDom {
                 }
             }
 
-            DynamicNode::Fragment(children) => children
+            DynamicNode::Fragment { nodes, .. } => nodes
                 .iter()
                 .fold(0, |acc, child| acc + self.create(mutations, child)),
 
diff --git a/packages/core/src/diff.rs b/packages/core/src/diff.rs
index 3b7a10106..7e9e10e44 100644
--- a/packages/core/src/diff.rs
+++ b/packages/core/src/diff.rs
@@ -177,7 +177,7 @@ impl<'b> VirtualDom {
                     todo!()
                 },
 
-                (DynamicNode::Text { id: lid, value: lvalue }, DynamicNode::Text { id: rid, value: rvalue }) => {
+                (DynamicNode::Text { id: lid, value: lvalue, .. }, DynamicNode::Text { id: rid, value: rvalue, .. }) => {
                     rid.set(lid.get());
                     if lvalue != rvalue {
                         muts.push(Mutation::SetText {
@@ -196,7 +196,7 @@ impl<'b> VirtualDom {
                 (DynamicNode::Placeholder(_), _) => todo!(),
 
 
-                (DynamicNode::Fragment (l), DynamicNode::Fragment (r)) => {
+                (DynamicNode::Fragment { nodes: lnodes, ..}, DynamicNode::Fragment { nodes: rnodes, ..}) => {
 
 
                     // match (old, new) {
diff --git a/packages/core/src/events.rs b/packages/core/src/events.rs
index 6cb098e60..074a93e34 100644
--- a/packages/core/src/events.rs
+++ b/packages/core/src/events.rs
@@ -1,50 +1,5 @@
-use crate::{arena::ElementId, virtual_dom::VirtualDom, Attribute, AttributeValue};
-use std::cell::Cell;
-
-/// User Events are events that are shuttled from the renderer into the [`VirtualDom`] through the scheduler channel.
-///
-/// These events will be passed to the appropriate Element given by `mounted_dom_id` and then bubbled up through the tree
-/// where each listener is checked and fired if the event name matches.
-///
-/// It is the expectation that the event name matches the corresponding event listener, otherwise Dioxus will panic in
-/// attempting to downcast the event data.
-///
-/// Because Event Data is sent across threads, it must be `Send + Sync`. We are hoping to lift the `Sync` restriction but
-/// `Send` will not be lifted. The entire `UserEvent` must also be `Send + Sync` due to its use in the scheduler channel.
-///
-/// # Example
-/// ```rust, ignore
-/// fn App(cx: Scope) -> Element {
-///     render!(div {
-///         onclick: move |_| println!("Clicked!")
-///     })
-/// }
-///
-/// let mut dom = VirtualDom::new(App);
-/// let mut scheduler = dom.get_scheduler_channel();
-/// scheduler.unbounded_send(SchedulerMsg::UiEvent(
-///     UserEvent {
-///         scope_id: None,
-///         priority: EventPriority::Medium,
-///         name: "click",
-///         element: Some(ElementId(0)),
-///         data: Arc::new(ClickEvent { .. })
-///     }
-/// )).unwrap();
-/// ```
-#[derive(Debug)]
-pub struct UiEvent<T> {
-    /// The priority of the event to be scheduled around ongoing work
-    pub priority: EventPriority,
-
-    /// The optional real node associated with the trigger
-    pub element: ElementId,
-
-    /// The event type IE "onclick" or "onmouseover"
-    pub name: &'static str,
-    pub bubble: Cell<bool>,
-    pub event: T,
-}
+use bumpalo::boxed::Box as BumpBox;
+use std::{any::Any, cell::RefCell};
 
 /// Priority of Event Triggers.
 ///
@@ -108,6 +63,65 @@ pub fn is_path_ascendant(small: &[u8], big: &[u8]) -> bool {
     small == &big[..small.len()]
 }
 
+pub type InternalHandler<'bump> = &'bump RefCell<Option<InternalListenerCallback<'bump>>>;
+type InternalListenerCallback<'bump> = BumpBox<'bump, dyn FnMut(&'bump dyn Any) + 'bump>;
+type ExternalListenerCallback<'bump, T> = BumpBox<'bump, dyn FnMut(T) + 'bump>;
+
+/// The callback type generated by the `rsx!` macro when an `on` field is specified for components.
+///
+/// This makes it possible to pass `move |evt| {}` style closures into components as property fields.
+///
+///
+/// # Example
+///
+/// ```rust, ignore
+///
+/// rsx!{
+///     MyComponent { onclick: move |evt| log::info!("clicked"), }
+/// }
+///
+/// #[derive(Props)]
+/// struct MyProps<'a> {
+///     onclick: EventHandler<'a, MouseEvent>,
+/// }
+///
+/// fn MyComponent(cx: Scope<'a, MyProps<'a>>) -> Element {
+///     cx.render(rsx!{
+///         button {
+///             onclick: move |evt| cx.props.onclick.call(evt),
+///         }
+///     })
+/// }
+///
+/// ```
+pub struct EventHandler<'bump, T = ()> {
+    /// The (optional) callback that the user specified
+    /// Uses a `RefCell` to allow for interior mutability, and FnMut closures.
+    pub callback: RefCell<Option<ExternalListenerCallback<'bump, T>>>,
+}
+
+impl<'a, T> Default for EventHandler<'a, T> {
+    fn default() -> Self {
+        Self {
+            callback: RefCell::new(None),
+        }
+    }
+}
+
+impl<T> EventHandler<'_, T> {
+    /// Call this event handler with the appropriate event type
+    pub fn call(&self, event: T) {
+        if let Some(callback) = self.callback.borrow_mut().as_mut() {
+            callback(event);
+        }
+    }
+
+    /// Forcibly drop the internal handler callback, releasing memory
+    pub fn release(&self) {
+        self.callback.replace(None);
+    }
+}
+
 #[test]
 fn matches_slice() {
     let left = &[1, 2, 3];
diff --git a/packages/core/src/factory.rs b/packages/core/src/factory.rs
index fbe6bdf57..3996b123e 100644
--- a/packages/core/src/factory.rs
+++ b/packages/core/src/factory.rs
@@ -18,6 +18,7 @@ impl ScopeState {
         DynamicNode::Text {
             id: Cell::new(ElementId(0)),
             value: text,
+            inner: false,
         }
     }
 
@@ -37,27 +38,32 @@ impl ScopeState {
         }
     }
 
-    pub fn fragment_from_iter<'a, I, F: IntoVnode<'a, I>>(
+    pub fn fragment_from_iter<'a, 'c, I, J>(
         &'a self,
-        it: impl IntoIterator<Item = F>,
+        node_iter: impl IntoVNode<'a, I, J> + 'c,
     ) -> DynamicNode {
-        let mut bump_vec = bumpalo::vec![in self.bump();];
+        node_iter.into_vnode(self)
 
-        for item in it {
-            bump_vec.push(item.into_dynamic_node(self));
-        }
+        // let mut bump_vec = bumpalo::vec![in self.bump();];
 
-        match bump_vec.len() {
-            0 => DynamicNode::Placeholder(Cell::new(ElementId(0))),
-            _ => DynamicNode::Fragment(bump_vec.into_bump_slice()),
-        }
+        // for item in it {
+        //     bump_vec.push(item.into_vnode(self));
+        // }
+
+        // match bump_vec.len() {
+        //     0 => DynamicNode::Placeholder(Cell::new(ElementId(0))),
+        //     _ => DynamicNode::Fragment {
+        //         inner: false,
+        //         nodes: bump_vec.into_bump_slice(),
+        //     },
+        // }
     }
 
     /// Create a new [`Attribute`]
     pub fn attr<'a>(
         &'a self,
         name: &'static str,
-        val: impl IntoAttributeValue<'a>,
+        value: impl IntoAttributeValue<'a>,
         namespace: Option<&'static str>,
         volatile: bool,
     ) -> Attribute<'a> {
@@ -65,7 +71,7 @@ impl ScopeState {
             name,
             namespace,
             volatile,
-            value: val.into_value(self.bump()),
+            value: value.into_value(self.bump()),
             mounted_element: Cell::new(ElementId(0)),
         }
     }
@@ -97,6 +103,7 @@ impl ScopeState {
             static_props: P::IS_STATIC,
             props: Cell::new(detached_dyn),
             placeholder: Cell::new(None),
+            scope: Cell::new(None),
         }
     }
 }
@@ -137,39 +144,100 @@ impl<'a> RenderReturn<'a> {
     }
 }
 
-pub trait IntoVnode<'a, A = ()> {
-    fn into_dynamic_node(self, cx: &'a ScopeState) -> VNode<'a>;
+pub trait IntoVNode<'a, A = (), J = ()> {
+    fn into_vnode(self, cx: &'a ScopeState) -> DynamicNode<'a>;
 }
 
-impl<'a, 'b> IntoVnode<'a> for LazyNodes<'a, 'b> {
-    fn into_dynamic_node(self, cx: &'a ScopeState) -> VNode<'a> {
-        self.call(cx)
+impl<'a, 'b> IntoVNode<'a> for VNode<'a> {
+    fn into_vnode(self, _cx: &'a ScopeState) -> DynamicNode<'a> {
+        todo!()
+        // self
     }
 }
 
-impl<'a, 'b> IntoVnode<'a> for VNode<'a> {
-    fn into_dynamic_node(self, _cx: &'a ScopeState) -> VNode<'a> {
-        self
+impl<'a, 'b> IntoVNode<'a> for LazyNodes<'a, 'b> {
+    fn into_vnode(self, cx: &'a ScopeState) -> DynamicNode<'a> {
+        todo!()
+        // self.call(cx)
     }
 }
 
-impl<'a, 'b> IntoVnode<'a> for Option<VNode<'a>> {
-    fn into_dynamic_node(self, _cx: &'a ScopeState) -> VNode<'a> {
-        self.expect("please allow optional nodes in")
+impl<'b> IntoVNode<'_> for &'b str {
+    fn into_vnode(self, cx: &ScopeState) -> DynamicNode {
+        // cx.text(format_args!("{}", self))
+        todo!()
     }
 }
 
-impl<'a, 'b> IntoVnode<'a> for &'a VNode<'a> {
-    fn into_dynamic_node(self, _cx: &'a ScopeState) -> VNode<'a> {
-        VNode {
-            node_id: self.node_id.clone(),
-            parent: self.parent,
-            template: self.template,
-            root_ids: self.root_ids,
-            key: self.key,
-            dynamic_nodes: self.dynamic_nodes,
-            dynamic_attrs: self.dynamic_attrs,
+impl IntoVNode<'_> for String {
+    fn into_vnode(self, cx: &ScopeState) -> DynamicNode {
+        // cx.text(format_args!("{}", self))
+        todo!()
+    }
+}
+
+impl<'b> IntoVNode<'b> for Arguments<'_> {
+    fn into_vnode(self, cx: &'b ScopeState) -> DynamicNode<'b> {
+        // cx.text(self)
+        todo!()
+    }
+}
+
+impl<'a, 'b> IntoVNode<'a> for &VNode<'a> {
+    fn into_vnode(self, _cx: &'a ScopeState) -> DynamicNode<'a> {
+        todo!()
+        // VNode {
+        //     node_id: self.node_id.clone(),
+        //     parent: self.parent,
+        //     template: self.template,
+        //     root_ids: self.root_ids,
+        //     key: self.key,
+        //     dynamic_nodes: self.dynamic_nodes,
+        //     dynamic_attrs: self.dynamic_attrs,
+        // }
+    }
+}
+
+// Note that we're using the E as a generic but this is never crafted anyways.
+pub struct FromNodeIterator;
+impl<'a, T, I, E> IntoVNode<'a, FromNodeIterator, E> for T
+where
+    T: IntoIterator<Item = I>,
+    I: IntoVNode<'a, E>,
+{
+    fn into_vnode(self, cx: &'a ScopeState) -> DynamicNode<'a> {
+        let mut nodes = bumpalo::collections::Vec::new_in(cx.bump());
+
+        for node in self {
+            nodes.push(node.into_vnode(cx));
         }
+
+        let children = nodes.into_bump_slice();
+
+        // if cfg!(debug_assertions) && children.len() > 1 && children.last().unwrap().key().is_none()
+        // {
+        // let bt = backtrace::Backtrace::new();
+        // let bt = "no backtrace available";
+
+        // // todo: make the backtrace prettier or remove it altogether
+        // log::error!(
+        //     r#"
+        //     Warning: Each child in an array or iterator should have a unique "key" prop.
+        //     Not providing a key will lead to poor performance with lists.
+        //     See docs.rs/dioxus for more information.
+        //     -------------
+        //     {:?}
+        //     "#,
+        //     bt
+        // );
+        // }
+
+        todo!()
+        // VNode::Fragment(cx.bump.alloc(VFragment {
+        //     children,
+        //     placeholder: Default::default(),
+        //     key: None,
+        // }))
     }
 }
 
diff --git a/packages/core/src/garbage.rs b/packages/core/src/garbage.rs
index 2f77dba8d..5f8c422f0 100644
--- a/packages/core/src/garbage.rs
+++ b/packages/core/src/garbage.rs
@@ -25,8 +25,9 @@ impl<'b> VirtualDom {
                     todo!()
                 }
 
-                DynamicNode::Fragment(children) => {}
+                DynamicNode::Fragment { inner, nodes } => {}
                 DynamicNode::Placeholder(_) => todo!(),
+                _ => todo!(),
             }
         }
     }
diff --git a/packages/core/src/lib.rs b/packages/core/src/lib.rs
index 77f9146e4..dd5c44103 100644
--- a/packages/core/src/lib.rs
+++ b/packages/core/src/lib.rs
@@ -92,7 +92,6 @@ pub use crate::innerlude::{
     Template,
     TemplateAttribute,
     TemplateNode,
-    UiEvent,
     VNode,
     VirtualDom,
 };
@@ -102,9 +101,9 @@ pub use crate::innerlude::{
 /// This includes types like [`Scope`], [`Element`], and [`Component`].
 pub mod prelude {
     pub use crate::innerlude::{
-        fc_to_builder, Element, EventPriority, Fragment, LazyNodes, NodeFactory, Properties, Scope,
-        ScopeId, ScopeState, Scoped, TaskId, Template, TemplateAttribute, TemplateNode, UiEvent,
-        VNode, VirtualDom,
+        fc_to_builder, Element, EventHandler, EventPriority, Fragment, LazyNodes, NodeFactory,
+        Properties, Scope, ScopeId, ScopeState, Scoped, TaskId, Template, TemplateAttribute,
+        TemplateNode, VNode, VirtualDom,
     };
 }
 
diff --git a/packages/core/src/mutations.rs b/packages/core/src/mutations.rs
index 8e8affae0..4d0c10079 100644
--- a/packages/core/src/mutations.rs
+++ b/packages/core/src/mutations.rs
@@ -35,6 +35,7 @@ impl std::ops::DerefMut for Mutations<'_> {
 each subtree has its own numbering scheme
 */
 
+#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
 #[derive(Debug, PartialEq, Eq)]
 pub enum Mutation<'a> {
     SetAttribute {
@@ -43,6 +44,12 @@ pub enum Mutation<'a> {
         id: ElementId,
     },
 
+    SetBoolAttribute {
+        name: &'a str,
+        value: bool,
+        id: ElementId,
+    },
+
     LoadTemplate {
         name: &'static str,
         index: usize,
@@ -86,6 +93,10 @@ pub enum Mutation<'a> {
         id: ElementId,
     },
 
+    SetInnerText {
+        value: &'a str,
+    },
+
     CreateText {
         value: &'a str,
     },
diff --git a/packages/core/src/nodes.rs b/packages/core/src/nodes.rs
index 3388dff97..8fc38e34e 100644
--- a/packages/core/src/nodes.rs
+++ b/packages/core/src/nodes.rs
@@ -1,4 +1,4 @@
-use crate::{any_props::AnyProps, arena::ElementId, ScopeState};
+use crate::{any_props::AnyProps, arena::ElementId, ScopeId, ScopeState};
 use std::{
     any::{Any, TypeId},
     cell::{Cell, RefCell},
@@ -15,7 +15,7 @@ pub struct VNode<'a> {
     pub key: Option<&'a str>,
 
     // When rendered, this template will be linked to its parent manually
-    pub parent: Option<(*mut VNode<'static>, usize)>,
+    pub parent: Option<*const DynamicNode<'a>>,
 
     pub template: Template<'static>,
 
@@ -98,6 +98,7 @@ pub enum TemplateNode<'a> {
         namespace: Option<&'a str>,
         attrs: &'a [TemplateAttribute<'a>],
         children: &'a [TemplateNode<'a>],
+        inner_opt: bool,
     },
     Text(&'a str),
     Dynamic(usize),
@@ -110,12 +111,17 @@ pub enum DynamicNode<'a> {
         static_props: bool,
         props: Cell<*mut dyn AnyProps<'a>>,
         placeholder: Cell<Option<ElementId>>,
+        scope: Cell<Option<ScopeId>>,
     },
     Text {
         id: Cell<ElementId>,
         value: &'a str,
+        inner: bool,
+    },
+    Fragment {
+        nodes: &'a [VNode<'a>],
+        inner: bool,
     },
-    Fragment(&'a [VNode<'a>]),
     Placeholder(Cell<ElementId>),
 }
 
@@ -215,3 +221,54 @@ fn what_are_the_sizes() {
     dbg!(std::mem::size_of::<Template>());
     dbg!(std::mem::size_of::<TemplateNode>());
 }
+
+/*
+
+
+SSR includes data-id which allows O(1) hydration
+
+
+we read the edit stream dn then we can just rehydare
+
+
+
+ideas:
+- IDs for lookup
+- use edit stream to hydrate
+- write comments to dom that specify size of children
+
+IDs for lookups
+- adds noise to generated html
+- doesnt work for text nodes
+- suspense could cause ordering to be weird
+
+Names for lookups:
+- label each root or something with the template name
+- label each dynamic node with a path
+- noisy too
+- allows reverse lookups
+
+Ideal:
+- no noise in the dom
+- fast, ideally O(1)
+- able to pick apart text nodes that get merged during SSR
+
+
+--> render vdom
+--> traverse vdom and real dom simultaneously
+
+IE
+
+div {
+    div {
+        div {
+            "thing"
+        }
+    }
+}
+
+
+
+
+
+*/
diff --git a/packages/core/src/scope_arena.rs b/packages/core/src/scope_arena.rs
index 251a3de66..b0b9de04b 100644
--- a/packages/core/src/scope_arena.rs
+++ b/packages/core/src/scope_arena.rs
@@ -17,7 +17,7 @@ use std::{
 };
 
 impl VirtualDom {
-    pub fn new_scope(&mut self, props: *mut dyn AnyProps<'static>) -> &mut ScopeState {
+    pub(super) fn new_scope(&mut self, props: *mut dyn AnyProps<'static>) -> &mut ScopeState {
         let parent = self.acquire_current_scope_raw();
         let container = self.acquire_current_container();
         let entry = self.scopes.vacant_entry();
diff --git a/packages/core/src/virtual_dom.rs b/packages/core/src/virtual_dom.rs
index c5632b06f..373813a8c 100644
--- a/packages/core/src/virtual_dom.rs
+++ b/packages/core/src/virtual_dom.rs
@@ -4,18 +4,21 @@ use crate::{
     arena::ElementPath,
     diff::DirtyScope,
     factory::RenderReturn,
-    innerlude::{is_path_ascendant, Mutations, Scheduler, SchedulerMsg},
+    innerlude::{Mutations, Scheduler, SchedulerMsg},
     mutations::Mutation,
     nodes::{Template, TemplateId},
     scheduler::{SuspenseBoundary, SuspenseId},
     scopes::{ScopeId, ScopeState},
-    Attribute, AttributeValue, Element, Scope, SuspenseContext, UiEvent,
+    Attribute, AttributeValue, Element, EventPriority, Scope, SuspenseContext,
 };
 use futures_util::{pin_mut, FutureExt, StreamExt};
 use slab::Slab;
-use std::collections::{BTreeSet, HashMap};
 use std::future::Future;
 use std::rc::Rc;
+use std::{
+    any::Any,
+    collections::{BTreeSet, HashMap},
+};
 
 /// A virtual node system that progresses user events and diffs UI trees.
 ///
@@ -275,42 +278,68 @@ impl VirtualDom {
         !self.scheduler.leaves.borrow().is_empty()
     }
 
-    /// Returns None if no element could be found
-    pub fn handle_event<T: 'static>(&mut self, event: &UiEvent<T>) -> Option<()> {
-        let path = self.elements.get(event.element.0)?;
+    /// Call a listener inside the VirtualDom with data from outside the VirtualDom.
+    ///
+    /// This method will identify the appropriate element
+    ///
+    ///
+    ///
+    ///
+    ///
+    ///
+    ///
+    pub fn handle_event(
+        &mut self,
+        name: &str,
+        event: &dyn Any,
+        element: ElementId,
+        bubbles: bool,
+        priority: EventPriority,
+    ) -> Option<()> {
+        /*
+        - click registers
+        - walk upwards until first element with onclick listener
+        - get template from ElementID
+        - break out of wait loop
+        - send event to virtualdom
+        */
 
-        let location = unsafe { &mut *path.template }
+        let path = &self.elements[element.0];
+        let template = unsafe { &*path.template };
+        let dynamic = &template.dynamic_nodes[path.element];
+
+        let location = template
             .dynamic_attrs
             .iter()
-            .position(|attr| attr.mounted_element.get() == event.element)?;
+            .position(|attr| attr.mounted_element.get() == element)?;
 
-        let mut index = Some((path.template, location));
+        // let mut index = Some((path.template, location));
 
         let mut listeners = Vec::<&Attribute>::new();
 
-        while let Some((raw_parent, dyn_index)) = index {
-            let parent = unsafe { &mut *raw_parent };
-            let path = parent.template.node_paths[dyn_index];
+        // while let Some((raw_parent, dyn_index)) = index {
+        //     let parent = unsafe { &mut *raw_parent };
+        //     let path = parent.template.node_paths[dyn_index];
 
-            listeners.extend(
-                parent
-                    .dynamic_attrs
-                    .iter()
-                    .enumerate()
-                    .filter_map(|(idx, attr)| {
-                        match is_path_ascendant(parent.template.node_paths[idx], path) {
-                            true if attr.name == event.name => Some(attr),
-                            _ => None,
-                        }
-                    }),
-            );
+        //     listeners.extend(
+        //         parent
+        //             .dynamic_attrs
+        //             .iter()
+        //             .enumerate()
+        //             .filter_map(|(idx, attr)| {
+        //                 match is_path_ascendant(parent.template.node_paths[idx], path) {
+        //                     true if attr.name == event.name => Some(attr),
+        //                     _ => None,
+        //                 }
+        //             }),
+        //     );
 
-            index = parent.parent;
-        }
+        //     index = parent.parent;
+        // }
 
         for listener in listeners {
             if let AttributeValue::Listener(listener) = &listener.value {
-                (listener.borrow_mut())(&event.event)
+                (listener.borrow_mut())(event)
             }
         }
 
diff --git a/packages/desktop/src/controller.rs b/packages/desktop/src/controller.rs
index 2b1e105bf..edbc8c0c4 100644
--- a/packages/desktop/src/controller.rs
+++ b/packages/desktop/src/controller.rs
@@ -14,7 +14,6 @@ use wry::{
 
 pub(super) struct DesktopController {
     pub(super) webviews: HashMap<WindowId, WebView>,
-    pub(super) sender: futures_channel::mpsc::UnboundedSender<SchedulerMsg>,
     pub(super) pending_edits: Arc<Mutex<Vec<String>>>,
     pub(super) quit_app_on_close: bool,
     pub(super) is_ready: Arc<AtomicBool>,
@@ -29,10 +28,8 @@ impl DesktopController {
         proxy: EventLoopProxy<UserWindowEvent>,
     ) -> Self {
         let edit_queue = Arc::new(Mutex::new(Vec::new()));
-        let (sender, receiver) = futures_channel::mpsc::unbounded::<SchedulerMsg>();
 
         let pending_edits = edit_queue.clone();
-        let return_sender = sender.clone();
         let desktop_context_proxy = proxy.clone();
 
         std::thread::spawn(move || {
@@ -43,49 +40,54 @@ impl DesktopController {
                 .unwrap();
 
             runtime.block_on(async move {
-                let mut dom =
-                    VirtualDom::new_with_props_and_scheduler(root, props, (sender, receiver));
+                let mut dom = VirtualDom::new_with_props(root, props);
 
                 let window_context = DesktopContext::new(desktop_context_proxy);
 
                 dom.base_scope().provide_context(window_context);
 
-                todo!()
-
                 // // allow other proccesses to send the new rsx text to the @dioxusin ipc channel and recieve erros on the @dioxusout channel
                 // #[cfg(any(feature = "hot-reload", debug_assertions))]
                 // crate::hot_reload::init(&dom);
 
-                // let edits = dom.rebuild();
+                let edits = dom.rebuild();
+                let mut queue = edit_queue.lock().unwrap();
 
-                // edit_queue
-                //     .lock()
-                //     .unwrap()
-                //     .push(serde_json::to_string(&edits.edits).unwrap());
+                queue.push(serde_json::to_string(&edits.template_mutations).unwrap());
+                queue.push(serde_json::to_string(&edits.edits).unwrap());
 
-                // // Make sure the window is ready for any new updates
-                // proxy.send_event(UserWindowEvent::Update).unwrap();
+                // Make sure the window is ready for any new updates
+                proxy.send_event(UserWindowEvent::Update).unwrap();
 
-                // loop {
-                //     dom.wait_for_work().await;
+                loop {
+                    // todo: add the channel of the event loop in
+                    tokio::select! {
+                        _ = dom.wait_for_work() => {}
+                    }
 
-                //     let muts = dom.work_with_deadline(|| false);
+                    let muts = dom
+                        .render_with_deadline(tokio::time::sleep(
+                            tokio::time::Duration::from_millis(100),
+                        ))
+                        .await;
 
-                //     for edit in muts {
-                //         edit_queue
-                //             .lock()
-                //             .unwrap()
-                //             .push(serde_json::to_string(&edit.edits).unwrap());
-                //     }
+                    let mut queue = edit_queue.lock().unwrap();
 
-                //     let _ = proxy.send_event(UserWindowEvent::Update);
-                // }
+                    for edit in muts.template_mutations {
+                        queue.push(serde_json::to_string(&edit).unwrap());
+                    }
+
+                    for edit in muts.edits {
+                        queue.push(serde_json::to_string(&edit).unwrap());
+                    }
+
+                    let _ = proxy.send_event(UserWindowEvent::Update);
+                }
             })
         });
 
         Self {
             pending_edits,
-            sender: return_sender,
             webviews: HashMap::new(),
             is_ready: Arc::new(AtomicBool::new(false)),
             quit_app_on_close: true,
diff --git a/packages/desktop/src/events.rs b/packages/desktop/src/events.rs
index cf2c49727..0e5bcac85 100644
--- a/packages/desktop/src/events.rs
+++ b/packages/desktop/src/events.rs
@@ -4,9 +4,8 @@ use std::any::Any;
 use std::sync::Arc;
 
 use dioxus_core::ElementId;
-use dioxus_core::{EventPriority, UserEvent};
-use dioxus_html::event_bubbles;
-use dioxus_html::on::*;
+use dioxus_core::EventPriority;
+use dioxus_html::events::*;
 use serde::{Deserialize, Serialize};
 
 #[derive(Deserialize, Serialize)]
@@ -41,181 +40,3 @@ struct ImEvent {
     mounted_dom_id: ElementId,
     contents: serde_json::Value,
 }
-
-pub fn trigger_from_serialized(val: serde_json::Value) -> UserEvent {
-    let ImEvent {
-        event,
-        mounted_dom_id,
-        contents,
-    } = serde_json::from_value(val).unwrap();
-
-    let mounted_dom_id = Some(mounted_dom_id);
-    let name = event_name_from_type(&event);
-
-    let event = make_synthetic_event(&event, contents);
-
-    UserEvent {
-        name,
-        priority: EventPriority::Low,
-        scope_id: None,
-        element: mounted_dom_id,
-        bubbles: event_bubbles(name),
-        data: event,
-    }
-}
-
-fn make_synthetic_event(name: &str, val: serde_json::Value) -> Arc<dyn Any + Send + Sync> {
-    match name {
-        "copy" | "cut" | "paste" => {
-            //
-            Arc::new(ClipboardData {})
-        }
-        "compositionend" | "compositionstart" | "compositionupdate" => {
-            Arc::new(serde_json::from_value::<CompositionData>(val).unwrap())
-        }
-        "keydown" | "keypress" | "keyup" => {
-            let evt = serde_json::from_value::<KeyboardData>(val).unwrap();
-            Arc::new(evt)
-        }
-        "focus" | "blur" | "focusout" | "focusin" => {
-            //
-            Arc::new(FocusData {})
-        }
-
-        // todo: these handlers might get really slow if the input box gets large and allocation pressure is heavy
-        // don't have a good solution with the serialized event problem
-        "change" | "input" | "invalid" | "reset" | "submit" => {
-            Arc::new(serde_json::from_value::<FormData>(val).unwrap())
-        }
-
-        "click" | "contextmenu" | "dblclick" | "doubleclick" | "drag" | "dragend" | "dragenter"
-        | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "mousedown"
-        | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" => {
-            Arc::new(serde_json::from_value::<MouseData>(val).unwrap())
-        }
-        "pointerdown" | "pointermove" | "pointerup" | "pointercancel" | "gotpointercapture"
-        | "lostpointercapture" | "pointerenter" | "pointerleave" | "pointerover" | "pointerout" => {
-            Arc::new(serde_json::from_value::<PointerData>(val).unwrap())
-        }
-        "select" => {
-            //
-            Arc::new(serde_json::from_value::<SelectionData>(val).unwrap())
-        }
-
-        "touchcancel" | "touchend" | "touchmove" | "touchstart" => {
-            Arc::new(serde_json::from_value::<TouchData>(val).unwrap())
-        }
-
-        "scroll" => Arc::new(ScrollData {}),
-
-        "wheel" => Arc::new(serde_json::from_value::<WheelData>(val).unwrap()),
-
-        "animationstart" | "animationend" | "animationiteration" => {
-            Arc::new(serde_json::from_value::<AnimationData>(val).unwrap())
-        }
-
-        "transitionend" => Arc::new(serde_json::from_value::<TransitionData>(val).unwrap()),
-
-        "abort" | "canplay" | "canplaythrough" | "durationchange" | "emptied" | "encrypted"
-        | "ended" | "error" | "loadeddata" | "loadedmetadata" | "loadstart" | "pause" | "play"
-        | "playing" | "progress" | "ratechange" | "seeked" | "seeking" | "stalled" | "suspend"
-        | "timeupdate" | "volumechange" | "waiting" => {
-            //
-            Arc::new(MediaData {})
-        }
-
-        "toggle" => Arc::new(ToggleData {}),
-
-        _ => Arc::new(()),
-    }
-}
-
-fn event_name_from_type(typ: &str) -> &'static str {
-    match typ {
-        "copy" => "copy",
-        "cut" => "cut",
-        "paste" => "paste",
-        "compositionend" => "compositionend",
-        "compositionstart" => "compositionstart",
-        "compositionupdate" => "compositionupdate",
-        "keydown" => "keydown",
-        "keypress" => "keypress",
-        "keyup" => "keyup",
-        "focus" => "focus",
-        "focusout" => "focusout",
-        "focusin" => "focusin",
-        "blur" => "blur",
-        "change" => "change",
-        "input" => "input",
-        "invalid" => "invalid",
-        "reset" => "reset",
-        "submit" => "submit",
-        "click" => "click",
-        "contextmenu" => "contextmenu",
-        "doubleclick" => "doubleclick",
-        "dblclick" => "dblclick",
-        "drag" => "drag",
-        "dragend" => "dragend",
-        "dragenter" => "dragenter",
-        "dragexit" => "dragexit",
-        "dragleave" => "dragleave",
-        "dragover" => "dragover",
-        "dragstart" => "dragstart",
-        "drop" => "drop",
-        "mousedown" => "mousedown",
-        "mouseenter" => "mouseenter",
-        "mouseleave" => "mouseleave",
-        "mousemove" => "mousemove",
-        "mouseout" => "mouseout",
-        "mouseover" => "mouseover",
-        "mouseup" => "mouseup",
-        "pointerdown" => "pointerdown",
-        "pointermove" => "pointermove",
-        "pointerup" => "pointerup",
-        "pointercancel" => "pointercancel",
-        "gotpointercapture" => "gotpointercapture",
-        "lostpointercapture" => "lostpointercapture",
-        "pointerenter" => "pointerenter",
-        "pointerleave" => "pointerleave",
-        "pointerover" => "pointerover",
-        "pointerout" => "pointerout",
-        "select" => "select",
-        "touchcancel" => "touchcancel",
-        "touchend" => "touchend",
-        "touchmove" => "touchmove",
-        "touchstart" => "touchstart",
-        "scroll" => "scroll",
-        "wheel" => "wheel",
-        "animationstart" => "animationstart",
-        "animationend" => "animationend",
-        "animationiteration" => "animationiteration",
-        "transitionend" => "transitionend",
-        "abort" => "abort",
-        "canplay" => "canplay",
-        "canplaythrough" => "canplaythrough",
-        "durationchange" => "durationchange",
-        "emptied" => "emptied",
-        "encrypted" => "encrypted",
-        "ended" => "ended",
-        "error" => "error",
-        "loadeddata" => "loadeddata",
-        "loadedmetadata" => "loadedmetadata",
-        "loadstart" => "loadstart",
-        "pause" => "pause",
-        "play" => "play",
-        "playing" => "playing",
-        "progress" => "progress",
-        "ratechange" => "ratechange",
-        "seeked" => "seeked",
-        "seeking" => "seeking",
-        "stalled" => "stalled",
-        "suspend" => "suspend",
-        "timeupdate" => "timeupdate",
-        "volumechange" => "volumechange",
-        "waiting" => "waiting",
-        "toggle" => "toggle",
-        a => {
-            panic!("unsupported event type {:?}", a);
-        }
-    }
-}
diff --git a/packages/desktop/src/hot_reload.rs b/packages/desktop/src/hot_reload.rs
index c9e57df5e..5a6962d5d 100644
--- a/packages/desktop/src/hot_reload.rs
+++ b/packages/desktop/src/hot_reload.rs
@@ -1,4 +1,4 @@
-use dioxus_core::{SchedulerMsg, VirtualDom};
+use dioxus_core::VirtualDom;
 use interprocess::local_socket::{LocalSocketListener, LocalSocketStream};
 use std::io::{BufRead, BufReader};
 use std::time::Duration;
@@ -24,8 +24,6 @@ pub(crate) fn init(dom: &VirtualDom) {
         }
     });
 
-    let mut channel = dom.get_scheduler_channel();
-
     std::thread::spawn(move || {
         loop {
             if let Some(conn) = &mut *latest_in_connection.lock().unwrap() {
diff --git a/packages/desktop/src/lib.rs b/packages/desktop/src/lib.rs
index e218570f4..a19633b8a 100644
--- a/packages/desktop/src/lib.rs
+++ b/packages/desktop/src/lib.rs
@@ -17,7 +17,6 @@ pub use desktop_context::{use_eval, use_window, DesktopContext};
 pub use wry;
 pub use wry::application as tao;
 
-use crate::events::trigger_from_serialized;
 pub use cfg::Config;
 use controller::DesktopController;
 use dioxus_core::*;
@@ -126,7 +125,8 @@ pub fn launch_with_props<P: 'static + Send>(root: Component<P>, props: P, mut cf
                 let window = builder.build(event_loop).unwrap();
                 let window_id = window.id();
 
-                let (is_ready, sender) = (desktop.is_ready.clone(), desktop.sender.clone());
+                let (is_ready, _) = (desktop.is_ready.clone(), ());
+                // let (is_ready, sender) = (desktop.is_ready.clone(), desktop.sender.clone());
 
                 let proxy = proxy.clone();
 
@@ -144,9 +144,10 @@ pub fn launch_with_props<P: 'static + Send>(root: Component<P>, props: P, mut cf
                         parse_ipc_message(&payload)
                             .map(|message| match message.method() {
                                 "user_event" => {
-                                    let event = trigger_from_serialized(message.params());
-                                    log::trace!("User event: {:?}", event);
-                                    sender.unbounded_send(SchedulerMsg::Event(event)).unwrap();
+                                    println!("user event!");
+                                    // let event = trigger_from_serialized(message.params());
+                                    // log::trace!("User event: {:?}", event);
+                                    // sender.unbounded_send(SchedulerMsg::Event(event)).unwrap();
                                 }
                                 "initialize" => {
                                     is_ready.store(true, std::sync::atomic::Ordering::Relaxed);
diff --git a/packages/dioxus/src/lib.rs b/packages/dioxus/src/lib.rs
index 779369662..d6e5c523d 100644
--- a/packages/dioxus/src/lib.rs
+++ b/packages/dioxus/src/lib.rs
@@ -7,7 +7,7 @@ pub use dioxus_hooks as hooks;
 
 pub mod events {
     #[cfg(feature = "html")]
-    pub use dioxus_html::{on::*, KeyCode};
+    pub use dioxus_html::{AnimationEvent, FormEvent, KeyCode, MouseEvent};
 }
 
 #[cfg(feature = "html")]
diff --git a/packages/dioxus/tests/boolattrs.rs b/packages/dioxus/tests/boolattrs.rs
new file mode 100644
index 000000000..4c1834ba0
--- /dev/null
+++ b/packages/dioxus/tests/boolattrs.rs
@@ -0,0 +1,24 @@
+fn component(cx: Scope) -> Element {
+    cx.render(rsx! {
+        div { hidden: false }
+    })
+}
+
+use dioxus::prelude::*;
+
+#[test]
+fn bool_test() {
+    let mut app = VirtualDom::new(component);
+    let edits = app.rebuild();
+
+    use dioxus_core::{ElementId, Mutation::*};
+    assert_eq!(
+        edits.edits,
+        vec![
+            LoadTemplate { name: "packages/dioxus/tests/boolattrs.rs:2:15:66", index: 0 },
+            AssignId { path: &[], id: ElementId(2,) },
+            SetBoolAttribute { name: "hidden", value: false, id: ElementId(2,) },
+            AppendChildren { m: 1 },
+        ]
+    )
+}
diff --git a/packages/html/Cargo.toml b/packages/html/Cargo.toml
index 8464189ea..446da9303 100644
--- a/packages/html/Cargo.toml
+++ b/packages/html/Cargo.toml
@@ -18,6 +18,7 @@ wasm-bindgen = { version = "0.2.79", optional = true }
 euclid = "0.22.7"
 enumset = "1.0.11"
 keyboard-types = "0.6.2"
+async-trait = "0.1.58"
 
 [dependencies.web-sys]
 optional = true
diff --git a/packages/html/src/events.old.rs b/packages/html/src/events.old.rs
new file mode 100644
index 000000000..d059ccb89
--- /dev/null
+++ b/packages/html/src/events.old.rs
@@ -0,0 +1,1587 @@
+use bumpalo::boxed::Box as BumpBox;
+use dioxus_core::exports::bumpalo;
+use dioxus_core::*;
+
+pub mod on {
+    //! Input events and associated data
+
+    use crate::geometry::{
+        ClientPoint, Coordinates, ElementPoint, LinesVector, PagePoint, PagesVector, PixelsVector,
+        ScreenPoint, WheelDelta,
+    };
+    use crate::input_data::{
+        decode_key_location, decode_mouse_button_set, encode_key_location, encode_mouse_button_set,
+        MouseButton, MouseButtonSet,
+    };
+    use euclid::UnknownUnit;
+    use keyboard_types::{Code, Key, Location, Modifiers};
+    use std::cell::Cell;
+    use std::collections::HashMap;
+    use std::convert::TryInto;
+    use std::fmt::{Debug, Formatter};
+    use std::str::FromStr;
+
+    use super::*;
+    macro_rules! event_directory {
+        ( $(
+            $( #[$attr:meta] )*
+            $wrapper:ident($data:ident): [
+                $(
+                    $( #[$method_attr:meta] )*
+                    $name:ident
+                )*
+            ];
+        )* ) => {
+            $(
+                $(
+                    $(#[$method_attr])*
+                    pub fn $name<'a>(
+                        factory: NodeFactory<'a>,
+                        mut callback: impl FnMut($wrapper) + 'a,
+                        // mut callback: impl FnMut(UiEvent<$data>) + 'a,
+                    ) -> Attribute<'a>
+                    {
+                        // let bump = &factory.bump();
+
+
+                        // // we can't allocate unsized in bumpalo's box, so we need to craft the box manually
+                        // // safety: this is essentially the same as calling Box::new() but manually
+                        // // The box is attached to the lifetime of the bumpalo allocator
+                        // let cb: &mut dyn FnMut(AnyEvent) = bump.alloc(move |evt: AnyEvent| {
+                        //     let event = evt.downcast::<$data>().unwrap();
+                        //     callback(event)
+                        // });
+
+                        // let callback: BumpBox<dyn FnMut(AnyEvent) + 'a> = unsafe { BumpBox::from_raw(cb) };
+
+                        // // ie oncopy
+                        // let event_name = stringify!($name);
+
+                        // // ie copy
+                        // let shortname: &'static str = &event_name[2..];
+
+                        // let handler = bump.alloc(std::cell::RefCell::new(Some(callback)));
+                        // factory.listener(shortname, handler)
+
+                        // pub struct Attribute<'a> {
+                        //     pub name: &'a str,
+                        //     pub value: AttributeValue<'a>,
+                        //     pub namespace: Option<&'static str>,
+                        //     pub mounted_element: Cell<ElementId>,
+                        //     pub volatile: bool,
+                        // }
+                        Attribute {
+                            name: stringify!($name),
+                            value: AttributeValue::Text("asd"),
+                            namespace: None,
+                            mounted_element: Cell::new(ElementId(0)),
+                            volatile: false,
+                        }
+                    }
+                )*
+            )*
+        };
+    }
+
+    // The Dioxus Synthetic event system
+    // todo: move these into the html event system. dioxus accepts *any* event, so having these here doesn't make sense.
+    event_directory! {
+        ClipboardEvent(ClipboardData): [
+            /// Called when "copy"
+            oncopy
+
+            /// oncut
+            oncut
+
+            /// onpaste
+            onpaste
+        ];
+
+        CompositionEvent(CompositionData): [
+            /// oncompositionend
+            oncompositionend
+
+            /// oncompositionstart
+            oncompositionstart
+
+            /// oncompositionupdate
+            oncompositionupdate
+        ];
+
+        KeyboardEvent(KeyboardData): [
+            /// onkeydown
+            onkeydown
+
+            /// onkeypress
+            onkeypress
+
+            /// onkeyup
+            onkeyup
+        ];
+
+        FocusEvent(FocusData): [
+            /// onfocus
+            onfocus
+
+            // onfocusout
+            onfocusout
+
+            // onfocusin
+            onfocusin
+
+            /// onblur
+            onblur
+        ];
+
+        FormEvent(FormData): [
+            /// onchange
+            onchange
+
+            /// oninput handler
+            oninput
+
+            /// oninvalid
+            oninvalid
+
+            /// onreset
+            onreset
+
+            /// onsubmit
+            onsubmit
+        ];
+
+        /// A synthetic event that wraps a web-style [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
+        ///
+        ///
+        /// The MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse).
+        ///
+        /// ## Trait implementation:
+        /// ```rust, ignore
+        ///     fn alt_key(&self) -> bool;
+        ///     fn button(&self) -> i16;
+        ///     fn buttons(&self) -> u16;
+        ///     fn client_x(&self) -> i32;
+        ///     fn client_y(&self) -> i32;
+        ///     fn ctrl_key(&self) -> bool;
+        ///     fn meta_key(&self) -> bool;
+        ///     fn page_x(&self) -> i32;
+        ///     fn page_y(&self) -> i32;
+        ///     fn screen_x(&self) -> i32;
+        ///     fn screen_y(&self) -> i32;
+        ///     fn shift_key(&self) -> bool;
+        ///     fn get_modifier_state(&self, key_code: &str) -> bool;
+        /// ```
+        ///
+        /// ## Event Handlers
+        /// - [`onclick`]
+        /// - [`oncontextmenu`]
+        /// - [`ondoubleclick`]
+        /// - [`ondrag`]
+        /// - [`ondragend`]
+        /// - [`ondragenter`]
+        /// - [`ondragexit`]
+        /// - [`ondragleave`]
+        /// - [`ondragover`]
+        /// - [`ondragstart`]
+        /// - [`ondrop`]
+        /// - [`onmousedown`]
+        /// - [`onmouseenter`]
+        /// - [`onmouseleave`]
+        /// - [`onmousemove`]
+        /// - [`onmouseout`]
+        /// - [`onmouseover`]
+        /// - [`onmouseup`]
+        MouseEvent(MouseData): [
+            /// Execute a callback when a button is clicked.
+            ///
+            /// ## Description
+            ///
+            /// An element receives a click event when a pointing device button (such as a mouse's primary mouse button)
+            /// is both pressed and released while the pointer is located inside the element.
+            ///
+            /// - Bubbles: Yes
+            /// - Cancelable: Yes
+            /// - Interface(InteData): [`MouseEvent`]
+            ///
+            /// If the button is pressed on one element and the pointer is moved outside the element before the button
+            /// is released, the event is fired on the most specific ancestor element that contained both elements.
+            /// `click` fires after both the `mousedown` and `mouseup` events have fired, in that order.
+            ///
+            /// ## Example
+            /// ```rust, ignore
+            /// rsx!( button { "click me", onclick: move |_| log::info!("Clicked!`") } )
+            /// ```
+            ///
+            /// ## Reference
+            /// - <https://www.w3schools.com/tags/ev_onclick.asp>
+            /// - <https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event>
+            onclick
+
+            /// oncontextmenu
+            oncontextmenu
+
+            /// ondoubleclick
+            ondoubleclick
+
+            /// ondoubleclick
+            ondblclick
+
+            /// ondrag
+            ondrag
+
+            /// ondragend
+            ondragend
+
+            /// ondragenter
+            ondragenter
+
+            /// ondragexit
+            ondragexit
+
+            /// ondragleave
+            ondragleave
+
+            /// ondragover
+            ondragover
+
+            /// ondragstart
+            ondragstart
+
+            /// ondrop
+            ondrop
+
+            /// onmousedown
+            onmousedown
+
+            /// onmouseenter
+            onmouseenter
+
+            /// onmouseleave
+            onmouseleave
+
+            /// onmousemove
+            onmousemove
+
+            /// onmouseout
+            onmouseout
+
+            /// onmouseover
+            ///
+            /// Triggered when the users's mouse hovers over an element.
+            onmouseover
+
+            /// onmouseup
+            onmouseup
+        ];
+
+        ScrollEvent(ScrollData): [
+            ///
+            onscroll
+        ];
+
+        PointerEvent(PointerData): [
+            /// pointerdown
+            onpointerdown
+
+            /// pointermove
+            onpointermove
+
+            /// pointerup
+            onpointerup
+
+            /// pointercancel
+            onpointercancel
+
+            /// gotpointercapture
+            ongotpointercapture
+
+            /// lostpointercapture
+            onlostpointercapture
+
+            /// pointerenter
+            onpointerenter
+
+            /// pointerleave
+            onpointerleave
+
+            /// pointerover
+            onpointerover
+
+            /// pointerout
+            onpointerout
+        ];
+
+        SelectionEvent(SelectionData): [
+            /// onselect
+            onselect
+        ];
+
+        TouchEvent(TouchData): [
+            /// ontouchcancel
+            ontouchcancel
+
+            /// ontouchend
+            ontouchend
+
+            /// ontouchmove
+            ontouchmove
+
+            /// ontouchstart
+            ontouchstart
+        ];
+
+        WheelEvent(WheelData): [
+            ///
+            onwheel
+        ];
+
+        MediaEvent(MediaData): [
+            ///abort
+            onabort
+
+            ///canplay
+            oncanplay
+
+            ///canplaythrough
+            oncanplaythrough
+
+            ///durationchange
+            ondurationchange
+
+            ///emptied
+            onemptied
+
+            ///encrypted
+            onencrypted
+
+            ///ended
+            onended
+
+            ///error
+            onerror
+
+            ///loadeddata
+            onloadeddata
+
+            ///loadedmetadata
+            onloadedmetadata
+
+            ///loadstart
+            onloadstart
+
+            ///pause
+            onpause
+
+            ///play
+            onplay
+
+            ///playing
+            onplaying
+
+            ///progress
+            onprogress
+
+            ///ratechange
+            onratechange
+
+            ///seeked
+            onseeked
+
+            ///seeking
+            onseeking
+
+            ///stalled
+            onstalled
+
+            ///suspend
+            onsuspend
+
+            ///timeupdate
+            ontimeupdate
+
+            ///volumechange
+            onvolumechange
+
+            ///waiting
+            onwaiting
+        ];
+
+        AnimationEvent(AnimationData): [
+            /// onanimationstart
+            onanimationstart
+
+            /// onanimationend
+            onanimationend
+
+            /// onanimationiteration
+            onanimationiteration
+        ];
+
+        TransitionEvent(TransitionData): [
+            ///
+            ontransitionend
+        ];
+
+        ToggleEvent(ToggleData): [
+            ///
+            ontoggle
+        ];
+    }
+
+    pub type ClipboardEvent = UiEvent<ClipboardData>;
+    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+    #[derive(Debug, Clone)]
+    pub struct ClipboardData {
+        // DOMDataTransfer clipboardData
+    }
+
+    pub type CompositionEvent = UiEvent<CompositionData>;
+    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+    #[derive(Debug, Clone)]
+    pub struct CompositionData {
+        pub data: String,
+    }
+
+    pub type KeyboardEvent = UiEvent<KeyboardData>;
+    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+    #[derive(Clone)]
+    pub struct KeyboardData {
+        #[deprecated(
+            since = "0.3.0",
+            note = "This may not work in all environments. Use key() instead."
+        )]
+        pub char_code: u32,
+
+        /// Identify which "key" was entered.
+        #[deprecated(since = "0.3.0", note = "use key() instead")]
+        pub key: String,
+
+        /// Get the key code as an enum Variant.
+        #[deprecated(
+            since = "0.3.0",
+            note = "This may not work in all environments. Use code() instead."
+        )]
+        pub key_code: KeyCode,
+
+        /// the physical key on the keyboard
+        code: Code,
+
+        /// Indicate if the `alt` modifier key was pressed during this keyboard event
+        #[deprecated(since = "0.3.0", note = "use modifiers() instead")]
+        pub alt_key: bool,
+
+        /// Indicate if the `ctrl` modifier key was pressed during this keyboard event
+        #[deprecated(since = "0.3.0", note = "use modifiers() instead")]
+        pub ctrl_key: bool,
+
+        /// Indicate if the `meta` modifier key was pressed during this keyboard event
+        #[deprecated(since = "0.3.0", note = "use modifiers() instead")]
+        pub meta_key: bool,
+
+        /// Indicate if the `shift` modifier key was pressed during this keyboard event
+        #[deprecated(since = "0.3.0", note = "use modifiers() instead")]
+        pub shift_key: bool,
+
+        #[deprecated(since = "0.3.0", note = "use location() instead")]
+        pub location: usize,
+
+        #[deprecated(since = "0.3.0", note = "use is_auto_repeating() instead")]
+        pub repeat: bool,
+
+        #[deprecated(since = "0.3.0", note = "use code() or key() instead")]
+        pub which: usize,
+    }
+
+    impl KeyboardData {
+        pub fn new(
+            key: Key,
+            code: Code,
+            location: Location,
+            is_auto_repeating: bool,
+            modifiers: Modifiers,
+        ) -> Self {
+            #[allow(deprecated)]
+            KeyboardData {
+                char_code: key.legacy_charcode(),
+                key: key.to_string(),
+                key_code: KeyCode::from_raw_code(
+                    key.legacy_keycode()
+                        .try_into()
+                        .expect("could not convert keycode to u8"),
+                ),
+                code,
+                alt_key: modifiers.contains(Modifiers::ALT),
+                ctrl_key: modifiers.contains(Modifiers::CONTROL),
+                meta_key: modifiers.contains(Modifiers::META),
+                shift_key: modifiers.contains(Modifiers::SHIFT),
+                location: encode_key_location(location),
+                repeat: is_auto_repeating,
+                which: key
+                    .legacy_charcode()
+                    .try_into()
+                    .expect("could not convert charcode to usize"),
+            }
+        }
+
+        /// The value of the key pressed by the user, taking into consideration the state of modifier keys such as Shift as well as the keyboard locale and layout.
+        pub fn key(&self) -> Key {
+            #[allow(deprecated)]
+            FromStr::from_str(&self.key).expect("could not parse")
+        }
+
+        /// A physical key on the keyboard (as opposed to the character generated by pressing the key). In other words, this property returns a value that isn't altered by keyboard layout or the state of the modifier keys.
+        pub fn code(&self) -> Code {
+            self.code
+        }
+
+        /// The set of modifier keys which were pressed when the event occurred
+        pub fn modifiers(&self) -> Modifiers {
+            let mut modifiers = Modifiers::empty();
+
+            #[allow(deprecated)]
+            {
+                if self.alt_key {
+                    modifiers.insert(Modifiers::ALT);
+                }
+                if self.ctrl_key {
+                    modifiers.insert(Modifiers::CONTROL);
+                }
+                if self.meta_key {
+                    modifiers.insert(Modifiers::META);
+                }
+                if self.shift_key {
+                    modifiers.insert(Modifiers::SHIFT);
+                }
+            }
+
+            modifiers
+        }
+
+        /// The location of the key on the keyboard or other input device.
+        pub fn location(&self) -> Location {
+            #[allow(deprecated)]
+            decode_key_location(self.location)
+        }
+
+        /// `true` iff the key is being held down such that it is automatically repeating.
+        pub fn is_auto_repeating(&self) -> bool {
+            #[allow(deprecated)]
+            self.repeat
+        }
+    }
+
+    impl Debug for KeyboardData {
+        fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+            f.debug_struct("KeyboardData")
+                .field("key", &self.key())
+                .field("code", &self.code())
+                .field("modifiers", &self.modifiers())
+                .field("location", &self.location())
+                .field("is_auto_repeating", &self.is_auto_repeating())
+                .finish()
+        }
+    }
+
+    pub type FocusEvent = UiEvent<FocusData>;
+    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+    #[derive(Debug, Clone)]
+    pub struct FocusData {/* DOMEventInner:  Send + SyncTarget relatedTarget */}
+
+    pub type FormEvent = UiEvent<FormData>;
+    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+    #[derive(Debug, Clone)]
+    pub struct FormData {
+        pub value: String,
+        pub values: HashMap<String, String>,
+        /* DOMEvent:  Send + SyncTarget relatedTarget */
+    }
+
+    pub type MouseEvent = UiEvent<MouseData>;
+    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+    #[derive(Clone)]
+    /// Data associated with a mouse event
+    ///
+    /// Do not use the deprecated fields; they may change or become private in the future.
+    pub struct MouseData {
+        /// True if the alt key was down when the mouse event was fired.
+        #[deprecated(since = "0.3.0", note = "use modifiers() instead")]
+        pub alt_key: bool,
+        /// The button number that was pressed (if applicable) when the mouse event was fired.
+        #[deprecated(since = "0.3.0", note = "use trigger_button() instead")]
+        pub button: i16,
+        /// Indicates which buttons are pressed on the mouse (or other input device) when a mouse event is triggered.
+        ///
+        /// Each button that can be pressed is represented by a given number (see below). If more than one button is pressed, the button values are added together to produce a new number. For example, if the secondary (2) and auxiliary (4) buttons are pressed simultaneously, the value is 6 (i.e., 2 + 4).
+        ///
+        /// - 1: Primary button (usually the left button)
+        /// - 2: Secondary button (usually the right button)
+        /// - 4: Auxiliary button (usually the mouse wheel button or middle button)
+        /// - 8: 4th button (typically the "Browser Back" button)
+        /// - 16 : 5th button (typically the "Browser Forward" button)
+        #[deprecated(since = "0.3.0", note = "use held_buttons() instead")]
+        pub buttons: u16,
+        /// The horizontal coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page).
+        ///
+        /// For example, clicking on the left edge of the viewport will always result in a mouse event with a clientX value of 0, regardless of whether the page is scrolled horizontally.
+        #[deprecated(since = "0.3.0", note = "use client_coordinates() instead")]
+        pub client_x: i32,
+        /// The vertical coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page).
+        ///
+        /// For example, clicking on the top edge of the viewport will always result in a mouse event with a clientY value of 0, regardless of whether the page is scrolled vertically.
+        #[deprecated(since = "0.3.0", note = "use client_coordinates() instead")]
+        pub client_y: i32,
+        /// True if the control key was down when the mouse event was fired.
+        #[deprecated(since = "0.3.0", note = "use modifiers() instead")]
+        pub ctrl_key: bool,
+        /// True if the meta key was down when the mouse event was fired.
+        #[deprecated(since = "0.3.0", note = "use modifiers() instead")]
+        pub meta_key: bool,
+        /// The offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node.
+        #[deprecated(since = "0.3.0", note = "use element_coordinates() instead")]
+        pub offset_x: i32,
+        /// The offset in the Y coordinate of the mouse pointer between that event and the padding edge of the target node.
+        #[deprecated(since = "0.3.0", note = "use element_coordinates() instead")]
+        pub offset_y: i32,
+        /// The X (horizontal) coordinate (in pixels) of the mouse, relative to the left edge of the entire document. This includes any portion of the document not currently visible.
+        ///
+        /// Being based on the edge of the document as it is, this property takes into account any horizontal scrolling of the page. For example, if the page is scrolled such that 200 pixels of the left side of the document are scrolled out of view, and the mouse is clicked 100 pixels inward from the left edge of the view, the value returned by pageX will be 300.
+        #[deprecated(since = "0.3.0", note = "use page_coordinates() instead")]
+        pub page_x: i32,
+        /// The Y (vertical) coordinate in pixels of the event relative to the whole document.
+        ///
+        /// See `page_x`.
+        #[deprecated(since = "0.3.0", note = "use page_coordinates() instead")]
+        pub page_y: i32,
+        /// The X coordinate of the mouse pointer in global (screen) coordinates.
+        #[deprecated(since = "0.3.0", note = "use screen_coordinates() instead")]
+        pub screen_x: i32,
+        /// The Y coordinate of the mouse pointer in global (screen) coordinates.
+        #[deprecated(since = "0.3.0", note = "use screen_coordinates() instead")]
+        pub screen_y: i32,
+        /// True if the shift key was down when the mouse event was fired.
+        #[deprecated(since = "0.3.0", note = "use modifiers() instead")]
+        pub shift_key: bool,
+        // fn get_modifier_state(&self, key_code: &str) -> bool;
+    }
+
+    impl MouseData {
+        /// Construct MouseData with the specified properties
+        ///
+        /// Note: the current implementation truncates coordinates. In the future, when we change the internal representation, it may also support a fractional part.
+        pub fn new(
+            coordinates: Coordinates,
+            trigger_button: Option<MouseButton>,
+            held_buttons: MouseButtonSet,
+            modifiers: Modifiers,
+        ) -> Self {
+            let alt_key = modifiers.contains(Modifiers::ALT);
+            let ctrl_key = modifiers.contains(Modifiers::CONTROL);
+            let meta_key = modifiers.contains(Modifiers::META);
+            let shift_key = modifiers.contains(Modifiers::SHIFT);
+
+            let [client_x, client_y]: [i32; 2] = coordinates.client().cast().into();
+            let [offset_x, offset_y]: [i32; 2] = coordinates.element().cast().into();
+            let [page_x, page_y]: [i32; 2] = coordinates.page().cast().into();
+            let [screen_x, screen_y]: [i32; 2] = coordinates.screen().cast().into();
+
+            #[allow(deprecated)]
+            Self {
+                alt_key,
+                ctrl_key,
+                meta_key,
+                shift_key,
+
+                button: trigger_button.map_or(0, |b| b.into_web_code()),
+                buttons: encode_mouse_button_set(held_buttons),
+
+                client_x,
+                client_y,
+                offset_x,
+                offset_y,
+                page_x,
+                page_y,
+                screen_x,
+                screen_y,
+            }
+        }
+
+        /// The event's coordinates relative to the application's viewport (as opposed to the coordinate within the page).
+        ///
+        /// For example, clicking in the top left corner of the viewport will always result in a mouse event with client coordinates (0., 0.), regardless of whether the page is scrolled horizontally.
+        pub fn client_coordinates(&self) -> ClientPoint {
+            #[allow(deprecated)]
+            ClientPoint::new(self.client_x.into(), self.client_y.into())
+        }
+
+        /// The event's coordinates relative to the padding edge of the target element
+        ///
+        /// For example, clicking in the top left corner of an element will result in element coordinates (0., 0.)
+        pub fn element_coordinates(&self) -> ElementPoint {
+            #[allow(deprecated)]
+            ElementPoint::new(self.offset_x.into(), self.offset_y.into())
+        }
+
+        /// The event's coordinates relative to the entire document. This includes any portion of the document not currently visible.
+        ///
+        /// For example, if the page is scrolled 200 pixels to the right and 300 pixels down, clicking in the top left corner of the viewport would result in page coordinates (200., 300.)
+        pub fn page_coordinates(&self) -> PagePoint {
+            #[allow(deprecated)]
+            PagePoint::new(self.page_x.into(), self.page_y.into())
+        }
+
+        /// The event's coordinates relative to the entire screen. This takes into account the window's offset.
+        pub fn screen_coordinates(&self) -> ScreenPoint {
+            #[allow(deprecated)]
+            ScreenPoint::new(self.screen_x.into(), self.screen_y.into())
+        }
+
+        pub fn coordinates(&self) -> Coordinates {
+            Coordinates::new(
+                self.screen_coordinates(),
+                self.client_coordinates(),
+                self.element_coordinates(),
+                self.page_coordinates(),
+            )
+        }
+
+        /// The set of modifier keys which were pressed when the event occurred
+        pub fn modifiers(&self) -> Modifiers {
+            let mut modifiers = Modifiers::empty();
+
+            #[allow(deprecated)]
+            {
+                if self.alt_key {
+                    modifiers.insert(Modifiers::ALT);
+                }
+                if self.ctrl_key {
+                    modifiers.insert(Modifiers::CONTROL);
+                }
+                if self.meta_key {
+                    modifiers.insert(Modifiers::META);
+                }
+                if self.shift_key {
+                    modifiers.insert(Modifiers::SHIFT);
+                }
+            }
+
+            modifiers
+        }
+
+        /// The set of mouse buttons which were held when the event occurred.
+        pub fn held_buttons(&self) -> MouseButtonSet {
+            #[allow(deprecated)]
+            decode_mouse_button_set(self.buttons)
+        }
+
+        /// The mouse button that triggered the event
+        ///
+        // todo the following is kind of bad; should we just return None when the trigger_button is unreliable (and frankly irrelevant)? i guess we would need the event_type here
+        /// This is only guaranteed to indicate which button was pressed during events caused by pressing or releasing a button. As such, it is not reliable for events such as mouseenter, mouseleave, mouseover, mouseout, or mousemove. For example, a value of MouseButton::Primary may also indicate that no button was pressed.
+        pub fn trigger_button(&self) -> Option<MouseButton> {
+            #[allow(deprecated)]
+            Some(MouseButton::from_web_code(self.button))
+        }
+    }
+
+    impl Debug for MouseData {
+        fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+            f.debug_struct("MouseData")
+                .field("coordinates", &self.coordinates())
+                .field("modifiers", &self.modifiers())
+                .field("held_buttons", &self.held_buttons())
+                .field("trigger_button", &self.trigger_button())
+                .finish()
+        }
+    }
+
+    pub type PointerEvent = UiEvent<PointerData>;
+    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+    #[derive(Debug, Clone)]
+    pub struct PointerData {
+        // Mouse only
+        pub alt_key: bool,
+        pub button: i16,
+        pub buttons: u16,
+        pub client_x: i32,
+        pub client_y: i32,
+        pub ctrl_key: bool,
+        pub meta_key: bool,
+        pub page_x: i32,
+        pub page_y: i32,
+        pub screen_x: i32,
+        pub screen_y: i32,
+        pub shift_key: bool,
+        pub pointer_id: i32,
+        pub width: i32,
+        pub height: i32,
+        pub pressure: f32,
+        pub tangential_pressure: f32,
+        pub tilt_x: i32,
+        pub tilt_y: i32,
+        pub twist: i32,
+        pub pointer_type: String,
+        pub is_primary: bool,
+        // pub get_modifier_state: bool,
+    }
+
+    pub type SelectionEvent = UiEvent<SelectionData>;
+    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+    #[derive(Debug, Clone)]
+    pub struct SelectionData {}
+
+    pub type TouchEvent = UiEvent<TouchData>;
+    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+    #[derive(Debug, Clone)]
+    pub struct TouchData {
+        pub alt_key: bool,
+        pub ctrl_key: bool,
+        pub meta_key: bool,
+        pub shift_key: bool,
+        // get_modifier_state: bool,
+        // changedTouches: DOMTouchList,
+        // targetTouches: DOMTouchList,
+        // touches: DOMTouchList,
+    }
+
+    pub type WheelEvent = UiEvent<WheelData>;
+    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+    #[derive(Clone)]
+    pub struct WheelData {
+        #[deprecated(since = "0.3.0", note = "use delta() instead")]
+        pub delta_mode: u32,
+        #[deprecated(since = "0.3.0", note = "use delta() instead")]
+        pub delta_x: f64,
+        #[deprecated(since = "0.3.0", note = "use delta() instead")]
+        pub delta_y: f64,
+        #[deprecated(since = "0.3.0", note = "use delta() instead")]
+        pub delta_z: f64,
+    }
+
+    impl WheelData {
+        /// Construct a new WheelData with the specified wheel movement delta
+        pub fn new(delta: WheelDelta) -> Self {
+            let (delta_mode, vector) = match delta {
+                WheelDelta::Pixels(v) => (0, v.cast_unit::<UnknownUnit>()),
+                WheelDelta::Lines(v) => (1, v.cast_unit::<UnknownUnit>()),
+                WheelDelta::Pages(v) => (2, v.cast_unit::<UnknownUnit>()),
+            };
+
+            #[allow(deprecated)]
+            WheelData {
+                delta_mode,
+                delta_x: vector.x,
+                delta_y: vector.y,
+                delta_z: vector.z,
+            }
+        }
+
+        /// Construct from the attributes of the web wheel event
+        pub fn from_web_attributes(
+            delta_mode: u32,
+            delta_x: f64,
+            delta_y: f64,
+            delta_z: f64,
+        ) -> Self {
+            #[allow(deprecated)]
+            Self {
+                delta_mode,
+                delta_x,
+                delta_y,
+                delta_z,
+            }
+        }
+
+        /// The amount of wheel movement
+        #[allow(deprecated)]
+        pub fn delta(&self) -> WheelDelta {
+            let x = self.delta_x;
+            let y = self.delta_y;
+            let z = self.delta_z;
+            match self.delta_mode {
+                0 => WheelDelta::Pixels(PixelsVector::new(x, y, z)),
+                1 => WheelDelta::Lines(LinesVector::new(x, y, z)),
+                2 => WheelDelta::Pages(PagesVector::new(x, y, z)),
+                _ => panic!("Invalid delta mode, {:?}", self.delta_mode),
+            }
+        }
+    }
+
+    impl Debug for WheelData {
+        fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+            f.debug_struct("WheelData")
+                .field("delta", &self.delta())
+                .finish()
+        }
+    }
+
+    pub type ScrollEvent = UiEvent<ScrollData>;
+    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+    #[derive(Debug, Clone)]
+    pub struct ScrollData {}
+
+    pub type MediaEvent = UiEvent<MediaData>;
+    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+    #[derive(Debug, Clone)]
+    pub struct MediaData {}
+
+    pub type ImageEvent = UiEvent<ImageData>;
+    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+    #[derive(Debug, Clone)]
+    pub struct ImageData {
+        pub load_error: bool,
+    }
+
+    pub type AnimationEvent = UiEvent<AnimationData>;
+    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+    #[derive(Debug, Clone)]
+    pub struct AnimationData {
+        pub animation_name: String,
+        pub pseudo_element: String,
+        pub elapsed_time: f32,
+    }
+
+    pub type TransitionEvent = UiEvent<TransitionData>;
+    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+    #[derive(Debug, Clone)]
+    pub struct TransitionData {
+        pub property_name: String,
+        pub pseudo_element: String,
+        pub elapsed_time: f32,
+    }
+
+    pub type ToggleEvent = UiEvent<ToggleData>;
+    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+    #[derive(Debug, Clone)]
+    pub struct ToggleData {}
+}
+
+#[cfg_attr(
+    feature = "serialize",
+    derive(serde_repr::Serialize_repr, serde_repr::Deserialize_repr)
+)]
+#[derive(Clone, Copy, Debug, Eq, PartialEq)]
+#[repr(u8)]
+pub enum KeyCode {
+    // That key has no keycode, = 0
+    // break, = 3
+    // backspace / delete, = 8
+    // tab, = 9
+    // clear, = 12
+    // enter, = 13
+    // shift, = 16
+    // ctrl, = 17
+    // alt, = 18
+    // pause/break, = 19
+    // caps lock, = 20
+    // hangul, = 21
+    // hanja, = 25
+    // escape, = 27
+    // conversion, = 28
+    // non-conversion, = 29
+    // spacebar, = 32
+    // page up, = 33
+    // page down, = 34
+    // end, = 35
+    // home, = 36
+    // left arrow, = 37
+    // up arrow, = 38
+    // right arrow, = 39
+    // down arrow, = 40
+    // select, = 41
+    // print, = 42
+    // execute, = 43
+    // Print Screen, = 44
+    // insert, = 45
+    // delete, = 46
+    // help, = 47
+    // 0, = 48
+    // 1, = 49
+    // 2, = 50
+    // 3, = 51
+    // 4, = 52
+    // 5, = 53
+    // 6, = 54
+    // 7, = 55
+    // 8, = 56
+    // 9, = 57
+    // :, = 58
+    // semicolon (firefox), equals, = 59
+    // <, = 60
+    // equals (firefox), = 61
+    // ß, = 63
+    // @ (firefox), = 64
+    // a, = 65
+    // b, = 66
+    // c, = 67
+    // d, = 68
+    // e, = 69
+    // f, = 70
+    // g, = 71
+    // h, = 72
+    // i, = 73
+    // j, = 74
+    // k, = 75
+    // l, = 76
+    // m, = 77
+    // n, = 78
+    // o, = 79
+    // p, = 80
+    // q, = 81
+    // r, = 82
+    // s, = 83
+    // t, = 84
+    // u, = 85
+    // v, = 86
+    // w, = 87
+    // x, = 88
+    // y, = 89
+    // z, = 90
+    // Windows Key / Left ⌘ / Chromebook Search key, = 91
+    // right window key, = 92
+    // Windows Menu / Right ⌘, = 93
+    // sleep, = 95
+    // numpad 0, = 96
+    // numpad 1, = 97
+    // numpad 2, = 98
+    // numpad 3, = 99
+    // numpad 4, = 100
+    // numpad 5, = 101
+    // numpad 6, = 102
+    // numpad 7, = 103
+    // numpad 8, = 104
+    // numpad 9, = 105
+    // multiply, = 106
+    // add, = 107
+    // numpad period (firefox), = 108
+    // subtract, = 109
+    // decimal point, = 110
+    // divide, = 111
+    // f1, = 112
+    // f2, = 113
+    // f3, = 114
+    // f4, = 115
+    // f5, = 116
+    // f6, = 117
+    // f7, = 118
+    // f8, = 119
+    // f9, = 120
+    // f10, = 121
+    // f11, = 122
+    // f12, = 123
+    // f13, = 124
+    // f14, = 125
+    // f15, = 126
+    // f16, = 127
+    // f17, = 128
+    // f18, = 129
+    // f19, = 130
+    // f20, = 131
+    // f21, = 132
+    // f22, = 133
+    // f23, = 134
+    // f24, = 135
+    // f25, = 136
+    // f26, = 137
+    // f27, = 138
+    // f28, = 139
+    // f29, = 140
+    // f30, = 141
+    // f31, = 142
+    // f32, = 143
+    // num lock, = 144
+    // scroll lock, = 145
+    // airplane mode, = 151
+    // ^, = 160
+    // !, = 161
+    // ؛ (arabic semicolon), = 162
+    // #, = 163
+    // $, = 164
+    // ù, = 165
+    // page backward, = 166
+    // page forward, = 167
+    // refresh, = 168
+    // closing paren (AZERTY), = 169
+    // *, = 170
+    // ~ + * key, = 171
+    // home key, = 172
+    // minus (firefox), mute/unmute, = 173
+    // decrease volume level, = 174
+    // increase volume level, = 175
+    // next, = 176
+    // previous, = 177
+    // stop, = 178
+    // play/pause, = 179
+    // e-mail, = 180
+    // mute/unmute (firefox), = 181
+    // decrease volume level (firefox), = 182
+    // increase volume level (firefox), = 183
+    // semi-colon / ñ, = 186
+    // equal sign, = 187
+    // comma, = 188
+    // dash, = 189
+    // period, = 190
+    // forward slash / ç, = 191
+    // grave accent / ñ / æ / ö, = 192
+    // ?, / or °, = 193
+    // numpad period (chrome), = 194
+    // open bracket, = 219
+    // back slash, = 220
+    // close bracket / å, = 221
+    // single quote / ø / ä, = 222
+    // `, = 223
+    // left or right ⌘ key (firefox), = 224
+    // altgr, = 225
+    // < /git >, left back slash, = 226
+    // GNOME Compose Key, = 230
+    // ç, = 231
+    // XF86Forward, = 233
+    // XF86Back, = 234
+    // non-conversion, = 235
+    // alphanumeric, = 240
+    // hiragana/katakana, = 242
+    // half-width/full-width, = 243
+    // kanji, = 244
+    // unlock trackpad (Chrome/Edge), = 251
+    // toggle touchpad, = 255
+    NA = 0,
+    Break = 3,
+    Backspace = 8,
+    Tab = 9,
+    Clear = 12,
+    Enter = 13,
+    Shift = 16,
+    Ctrl = 17,
+    Alt = 18,
+    Pause = 19,
+    CapsLock = 20,
+    // hangul, = 21
+    // hanja, = 25
+    Escape = 27,
+    // conversion, = 28
+    // non-conversion, = 29
+    Space = 32,
+    PageUp = 33,
+    PageDown = 34,
+    End = 35,
+    Home = 36,
+    LeftArrow = 37,
+    UpArrow = 38,
+    RightArrow = 39,
+    DownArrow = 40,
+    // select, = 41
+    // print, = 42
+    // execute, = 43
+    // Print Screen, = 44
+    Insert = 45,
+    Delete = 46,
+    // help, = 47
+    Num0 = 48,
+    Num1 = 49,
+    Num2 = 50,
+    Num3 = 51,
+    Num4 = 52,
+    Num5 = 53,
+    Num6 = 54,
+    Num7 = 55,
+    Num8 = 56,
+    Num9 = 57,
+    // :, = 58
+    // semicolon (firefox), equals, = 59
+    // <, = 60
+    // equals (firefox), = 61
+    // ß, = 63
+    // @ (firefox), = 64
+    A = 65,
+    B = 66,
+    C = 67,
+    D = 68,
+    E = 69,
+    F = 70,
+    G = 71,
+    H = 72,
+    I = 73,
+    J = 74,
+    K = 75,
+    L = 76,
+    M = 77,
+    N = 78,
+    O = 79,
+    P = 80,
+    Q = 81,
+    R = 82,
+    S = 83,
+    T = 84,
+    U = 85,
+    V = 86,
+    W = 87,
+    X = 88,
+    Y = 89,
+    Z = 90,
+    LeftWindow = 91,
+    RightWindow = 92,
+    SelectKey = 93,
+    Numpad0 = 96,
+    Numpad1 = 97,
+    Numpad2 = 98,
+    Numpad3 = 99,
+    Numpad4 = 100,
+    Numpad5 = 101,
+    Numpad6 = 102,
+    Numpad7 = 103,
+    Numpad8 = 104,
+    Numpad9 = 105,
+    Multiply = 106,
+    Add = 107,
+    Subtract = 109,
+    DecimalPoint = 110,
+    Divide = 111,
+    F1 = 112,
+    F2 = 113,
+    F3 = 114,
+    F4 = 115,
+    F5 = 116,
+    F6 = 117,
+    F7 = 118,
+    F8 = 119,
+    F9 = 120,
+    F10 = 121,
+    F11 = 122,
+    F12 = 123,
+    // f13, = 124
+    // f14, = 125
+    // f15, = 126
+    // f16, = 127
+    // f17, = 128
+    // f18, = 129
+    // f19, = 130
+    // f20, = 131
+    // f21, = 132
+    // f22, = 133
+    // f23, = 134
+    // f24, = 135
+    // f25, = 136
+    // f26, = 137
+    // f27, = 138
+    // f28, = 139
+    // f29, = 140
+    // f30, = 141
+    // f31, = 142
+    // f32, = 143
+    NumLock = 144,
+    ScrollLock = 145,
+    // airplane mode, = 151
+    // ^, = 160
+    // !, = 161
+    // ؛ (arabic semicolon), = 162
+    // #, = 163
+    // $, = 164
+    // ù, = 165
+    // page backward, = 166
+    // page forward, = 167
+    // refresh, = 168
+    // closing paren (AZERTY), = 169
+    // *, = 170
+    // ~ + * key, = 171
+    // home key, = 172
+    // minus (firefox), mute/unmute, = 173
+    // decrease volume level, = 174
+    // increase volume level, = 175
+    // next, = 176
+    // previous, = 177
+    // stop, = 178
+    // play/pause, = 179
+    // e-mail, = 180
+    // mute/unmute (firefox), = 181
+    // decrease volume level (firefox), = 182
+    // increase volume level (firefox), = 183
+    Semicolon = 186,
+    EqualSign = 187,
+    Comma = 188,
+    Dash = 189,
+    Period = 190,
+    ForwardSlash = 191,
+    GraveAccent = 192,
+    // ?, / or °, = 193
+    // numpad period (chrome), = 194
+    OpenBracket = 219,
+    BackSlash = 220,
+    CloseBraket = 221,
+    SingleQuote = 222,
+    // `, = 223
+    // left or right ⌘ key (firefox), = 224
+    // altgr, = 225
+    // < /git >, left back slash, = 226
+    // GNOME Compose Key, = 230
+    // ç, = 231
+    // XF86Forward, = 233
+    // XF86Back, = 234
+    // non-conversion, = 235
+    // alphanumeric, = 240
+    // hiragana/katakana, = 242
+    // half-width/full-width, = 243
+    // kanji, = 244
+    // unlock trackpad (Chrome/Edge), = 251
+    // toggle touchpad, = 255
+    #[cfg_attr(feature = "serialize", serde(other))]
+    Unknown,
+}
+
+impl KeyCode {
+    pub fn from_raw_code(i: u8) -> Self {
+        use KeyCode::*;
+        match i {
+            8 => Backspace,
+            9 => Tab,
+            13 => Enter,
+            16 => Shift,
+            17 => Ctrl,
+            18 => Alt,
+            19 => Pause,
+            20 => CapsLock,
+            27 => Escape,
+            33 => PageUp,
+            34 => PageDown,
+            35 => End,
+            36 => Home,
+            37 => LeftArrow,
+            38 => UpArrow,
+            39 => RightArrow,
+            40 => DownArrow,
+            45 => Insert,
+            46 => Delete,
+            48 => Num0,
+            49 => Num1,
+            50 => Num2,
+            51 => Num3,
+            52 => Num4,
+            53 => Num5,
+            54 => Num6,
+            55 => Num7,
+            56 => Num8,
+            57 => Num9,
+            65 => A,
+            66 => B,
+            67 => C,
+            68 => D,
+            69 => E,
+            70 => F,
+            71 => G,
+            72 => H,
+            73 => I,
+            74 => J,
+            75 => K,
+            76 => L,
+            77 => M,
+            78 => N,
+            79 => O,
+            80 => P,
+            81 => Q,
+            82 => R,
+            83 => S,
+            84 => T,
+            85 => U,
+            86 => V,
+            87 => W,
+            88 => X,
+            89 => Y,
+            90 => Z,
+            91 => LeftWindow,
+            92 => RightWindow,
+            93 => SelectKey,
+            96 => Numpad0,
+            97 => Numpad1,
+            98 => Numpad2,
+            99 => Numpad3,
+            100 => Numpad4,
+            101 => Numpad5,
+            102 => Numpad6,
+            103 => Numpad7,
+            104 => Numpad8,
+            105 => Numpad9,
+            106 => Multiply,
+            107 => Add,
+            109 => Subtract,
+            110 => DecimalPoint,
+            111 => Divide,
+            112 => F1,
+            113 => F2,
+            114 => F3,
+            115 => F4,
+            116 => F5,
+            117 => F6,
+            118 => F7,
+            119 => F8,
+            120 => F9,
+            121 => F10,
+            122 => F11,
+            123 => F12,
+            144 => NumLock,
+            145 => ScrollLock,
+            186 => Semicolon,
+            187 => EqualSign,
+            188 => Comma,
+            189 => Dash,
+            190 => Period,
+            191 => ForwardSlash,
+            192 => GraveAccent,
+            219 => OpenBracket,
+            220 => BackSlash,
+            221 => CloseBraket,
+            222 => SingleQuote,
+            _ => Unknown,
+        }
+    }
+
+    // get the raw code
+    pub fn raw_code(&self) -> u32 {
+        *self as u32
+    }
+}
+
+pub(crate) fn _event_meta<T>(event: &UiEvent<T>) -> (bool, EventPriority) {
+    use EventPriority::*;
+
+    match event.name {
+        // clipboard
+        "copy" | "cut" | "paste" => (true, Medium),
+
+        // Composition
+        "compositionend" | "compositionstart" | "compositionupdate" => (true, Low),
+
+        // Keyboard
+        "keydown" | "keypress" | "keyup" => (true, High),
+
+        // Focus
+        "focus" | "blur" | "focusout" | "focusin" => (true, Low),
+
+        // Form
+        "change" | "input" | "invalid" | "reset" | "submit" => (true, Medium),
+
+        // Mouse
+        "click" | "contextmenu" | "doubleclick" | "drag" | "dragend" | "dragenter" | "dragexit"
+        | "dragleave" | "dragover" | "dragstart" | "drop" | "mousedown" | "mouseenter"
+        | "mouseleave" | "mouseout" | "mouseover" | "mouseup" => (true, High),
+
+        "mousemove" => (false, Medium),
+
+        // Pointer
+        "pointerdown" | "pointermove" | "pointerup" | "pointercancel" | "gotpointercapture"
+        | "lostpointercapture" | "pointerenter" | "pointerleave" | "pointerover" | "pointerout" => {
+            (true, Medium)
+        }
+
+        // Selection
+        "select" | "touchcancel" | "touchend" => (true, Medium),
+
+        // Touch
+        "touchmove" | "touchstart" => (true, Medium),
+
+        // Wheel
+        "scroll" | "wheel" => (false, Medium),
+
+        // Media
+        "abort" | "canplay" | "canplaythrough" | "durationchange" | "emptied" | "encrypted"
+        | "ended" | "error" | "loadeddata" | "loadedmetadata" | "loadstart" | "pause" | "play"
+        | "playing" | "progress" | "ratechange" | "seeked" | "seeking" | "stalled" | "suspend"
+        | "timeupdate" | "volumechange" | "waiting" => (true, Medium),
+
+        // Animation
+        "animationstart" | "animationend" | "animationiteration" => (true, Medium),
+
+        // Transition
+        "transitionend" => (true, Medium),
+
+        // Toggle
+        "toggle" => (true, Medium),
+
+        _ => (true, Low),
+    }
+}
+
+pub fn event_bubbles(evt: &str) -> bool {
+    match evt {
+        "copy" => true,
+        "cut" => true,
+        "paste" => true,
+        "compositionend" => true,
+        "compositionstart" => true,
+        "compositionupdate" => true,
+        "keydown" => true,
+        "keypress" => true,
+        "keyup" => true,
+        "focus" => false,
+        "focusout" => true,
+        "focusin" => true,
+        "blur" => false,
+        "change" => true,
+        "input" => true,
+        "invalid" => true,
+        "reset" => true,
+        "submit" => true,
+        "click" => true,
+        "contextmenu" => true,
+        "doubleclick" => true,
+        "dblclick" => true,
+        "drag" => true,
+        "dragend" => true,
+        "dragenter" => false,
+        "dragexit" => false,
+        "dragleave" => true,
+        "dragover" => true,
+        "dragstart" => true,
+        "drop" => true,
+        "mousedown" => true,
+        "mouseenter" => false,
+        "mouseleave" => false,
+        "mousemove" => true,
+        "mouseout" => true,
+        "scroll" => false,
+        "mouseover" => true,
+        "mouseup" => true,
+        "pointerdown" => true,
+        "pointermove" => true,
+        "pointerup" => true,
+        "pointercancel" => true,
+        "gotpointercapture" => true,
+        "lostpointercapture" => true,
+        "pointerenter" => false,
+        "pointerleave" => false,
+        "pointerover" => true,
+        "pointerout" => true,
+        "select" => true,
+        "touchcancel" => true,
+        "touchend" => true,
+        "touchmove" => true,
+        "touchstart" => true,
+        "wheel" => true,
+        "abort" => false,
+        "canplay" => false,
+        "canplaythrough" => false,
+        "durationchange" => false,
+        "emptied" => false,
+        "encrypted" => true,
+        "ended" => false,
+        "error" => false,
+        "loadeddata" => false,
+        "loadedmetadata" => false,
+        "loadstart" => false,
+        "pause" => false,
+        "play" => false,
+        "playing" => false,
+        "progress" => false,
+        "ratechange" => false,
+        "seeked" => false,
+        "seeking" => false,
+        "stalled" => false,
+        "suspend" => false,
+        "timeupdate" => false,
+        "volumechange" => false,
+        "waiting" => false,
+        "animationstart" => true,
+        "animationend" => true,
+        "animationiteration" => true,
+        "transitionend" => true,
+        "toggle" => true,
+        _ => panic!("unsupported event type {:?}", evt),
+    }
+}
diff --git a/packages/html/src/events.rs b/packages/html/src/events.rs
index d059ccb89..e62ad7d94 100644
--- a/packages/html/src/events.rs
+++ b/packages/html/src/events.rs
@@ -1,1587 +1,64 @@
-use bumpalo::boxed::Box as BumpBox;
-use dioxus_core::exports::bumpalo;
-use dioxus_core::*;
+mod keys;
+pub use keys::*;
 
-pub mod on {
-    //! Input events and associated data
-
-    use crate::geometry::{
-        ClientPoint, Coordinates, ElementPoint, LinesVector, PagePoint, PagesVector, PixelsVector,
-        ScreenPoint, WheelDelta,
-    };
-    use crate::input_data::{
-        decode_key_location, decode_mouse_button_set, encode_key_location, encode_mouse_button_set,
-        MouseButton, MouseButtonSet,
-    };
-    use euclid::UnknownUnit;
-    use keyboard_types::{Code, Key, Location, Modifiers};
-    use std::cell::Cell;
-    use std::collections::HashMap;
-    use std::convert::TryInto;
-    use std::fmt::{Debug, Formatter};
-    use std::str::FromStr;
-
-    use super::*;
-    macro_rules! event_directory {
-        ( $(
+macro_rules! impl_event {
+    (
+        $data:ty;
+        $(
             $( #[$attr:meta] )*
-            $wrapper:ident($data:ident): [
-                $(
-                    $( #[$method_attr:meta] )*
-                    $name:ident
-                )*
-            ];
-        )* ) => {
-            $(
-                $(
-                    $(#[$method_attr])*
-                    pub fn $name<'a>(
-                        factory: NodeFactory<'a>,
-                        mut callback: impl FnMut($wrapper) + 'a,
-                        // mut callback: impl FnMut(UiEvent<$data>) + 'a,
-                    ) -> Attribute<'a>
-                    {
-                        // let bump = &factory.bump();
-
-
-                        // // we can't allocate unsized in bumpalo's box, so we need to craft the box manually
-                        // // safety: this is essentially the same as calling Box::new() but manually
-                        // // The box is attached to the lifetime of the bumpalo allocator
-                        // let cb: &mut dyn FnMut(AnyEvent) = bump.alloc(move |evt: AnyEvent| {
-                        //     let event = evt.downcast::<$data>().unwrap();
-                        //     callback(event)
-                        // });
-
-                        // let callback: BumpBox<dyn FnMut(AnyEvent) + 'a> = unsafe { BumpBox::from_raw(cb) };
-
-                        // // ie oncopy
-                        // let event_name = stringify!($name);
-
-                        // // ie copy
-                        // let shortname: &'static str = &event_name[2..];
-
-                        // let handler = bump.alloc(std::cell::RefCell::new(Some(callback)));
-                        // factory.listener(shortname, handler)
-
-                        // pub struct Attribute<'a> {
-                        //     pub name: &'a str,
-                        //     pub value: AttributeValue<'a>,
-                        //     pub namespace: Option<&'static str>,
-                        //     pub mounted_element: Cell<ElementId>,
-                        //     pub volatile: bool,
-                        // }
-                        Attribute {
-                            name: stringify!($name),
-                            value: AttributeValue::Text("asd"),
-                            namespace: None,
-                            mounted_element: Cell::new(ElementId(0)),
-                            volatile: false,
-                        }
-                    }
-                )*
-            )*
-        };
-    }
-
-    // The Dioxus Synthetic event system
-    // todo: move these into the html event system. dioxus accepts *any* event, so having these here doesn't make sense.
-    event_directory! {
-        ClipboardEvent(ClipboardData): [
-            /// Called when "copy"
-            oncopy
-
-            /// oncut
-            oncut
-
-            /// onpaste
-            onpaste
-        ];
-
-        CompositionEvent(CompositionData): [
-            /// oncompositionend
-            oncompositionend
-
-            /// oncompositionstart
-            oncompositionstart
-
-            /// oncompositionupdate
-            oncompositionupdate
-        ];
-
-        KeyboardEvent(KeyboardData): [
-            /// onkeydown
-            onkeydown
-
-            /// onkeypress
-            onkeypress
-
-            /// onkeyup
-            onkeyup
-        ];
-
-        FocusEvent(FocusData): [
-            /// onfocus
-            onfocus
-
-            // onfocusout
-            onfocusout
-
-            // onfocusin
-            onfocusin
-
-            /// onblur
-            onblur
-        ];
-
-        FormEvent(FormData): [
-            /// onchange
-            onchange
-
-            /// oninput handler
-            oninput
-
-            /// oninvalid
-            oninvalid
-
-            /// onreset
-            onreset
-
-            /// onsubmit
-            onsubmit
-        ];
-
-        /// A synthetic event that wraps a web-style [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
-        ///
-        ///
-        /// The MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse).
-        ///
-        /// ## Trait implementation:
-        /// ```rust, ignore
-        ///     fn alt_key(&self) -> bool;
-        ///     fn button(&self) -> i16;
-        ///     fn buttons(&self) -> u16;
-        ///     fn client_x(&self) -> i32;
-        ///     fn client_y(&self) -> i32;
-        ///     fn ctrl_key(&self) -> bool;
-        ///     fn meta_key(&self) -> bool;
-        ///     fn page_x(&self) -> i32;
-        ///     fn page_y(&self) -> i32;
-        ///     fn screen_x(&self) -> i32;
-        ///     fn screen_y(&self) -> i32;
-        ///     fn shift_key(&self) -> bool;
-        ///     fn get_modifier_state(&self, key_code: &str) -> bool;
-        /// ```
-        ///
-        /// ## Event Handlers
-        /// - [`onclick`]
-        /// - [`oncontextmenu`]
-        /// - [`ondoubleclick`]
-        /// - [`ondrag`]
-        /// - [`ondragend`]
-        /// - [`ondragenter`]
-        /// - [`ondragexit`]
-        /// - [`ondragleave`]
-        /// - [`ondragover`]
-        /// - [`ondragstart`]
-        /// - [`ondrop`]
-        /// - [`onmousedown`]
-        /// - [`onmouseenter`]
-        /// - [`onmouseleave`]
-        /// - [`onmousemove`]
-        /// - [`onmouseout`]
-        /// - [`onmouseover`]
-        /// - [`onmouseup`]
-        MouseEvent(MouseData): [
-            /// Execute a callback when a button is clicked.
-            ///
-            /// ## Description
-            ///
-            /// An element receives a click event when a pointing device button (such as a mouse's primary mouse button)
-            /// is both pressed and released while the pointer is located inside the element.
-            ///
-            /// - Bubbles: Yes
-            /// - Cancelable: Yes
-            /// - Interface(InteData): [`MouseEvent`]
-            ///
-            /// If the button is pressed on one element and the pointer is moved outside the element before the button
-            /// is released, the event is fired on the most specific ancestor element that contained both elements.
-            /// `click` fires after both the `mousedown` and `mouseup` events have fired, in that order.
-            ///
-            /// ## Example
-            /// ```rust, ignore
-            /// rsx!( button { "click me", onclick: move |_| log::info!("Clicked!`") } )
-            /// ```
-            ///
-            /// ## Reference
-            /// - <https://www.w3schools.com/tags/ev_onclick.asp>
-            /// - <https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event>
-            onclick
-
-            /// oncontextmenu
-            oncontextmenu
-
-            /// ondoubleclick
-            ondoubleclick
-
-            /// ondoubleclick
-            ondblclick
-
-            /// ondrag
-            ondrag
-
-            /// ondragend
-            ondragend
-
-            /// ondragenter
-            ondragenter
-
-            /// ondragexit
-            ondragexit
-
-            /// ondragleave
-            ondragleave
-
-            /// ondragover
-            ondragover
-
-            /// ondragstart
-            ondragstart
-
-            /// ondrop
-            ondrop
-
-            /// onmousedown
-            onmousedown
-
-            /// onmouseenter
-            onmouseenter
-
-            /// onmouseleave
-            onmouseleave
-
-            /// onmousemove
-            onmousemove
-
-            /// onmouseout
-            onmouseout
-
-            /// onmouseover
-            ///
-            /// Triggered when the users's mouse hovers over an element.
-            onmouseover
-
-            /// onmouseup
-            onmouseup
-        ];
-
-        ScrollEvent(ScrollData): [
-            ///
-            onscroll
-        ];
-
-        PointerEvent(PointerData): [
-            /// pointerdown
-            onpointerdown
-
-            /// pointermove
-            onpointermove
-
-            /// pointerup
-            onpointerup
-
-            /// pointercancel
-            onpointercancel
-
-            /// gotpointercapture
-            ongotpointercapture
-
-            /// lostpointercapture
-            onlostpointercapture
-
-            /// pointerenter
-            onpointerenter
-
-            /// pointerleave
-            onpointerleave
-
-            /// pointerover
-            onpointerover
-
-            /// pointerout
-            onpointerout
-        ];
-
-        SelectionEvent(SelectionData): [
-            /// onselect
-            onselect
-        ];
-
-        TouchEvent(TouchData): [
-            /// ontouchcancel
-            ontouchcancel
-
-            /// ontouchend
-            ontouchend
-
-            /// ontouchmove
-            ontouchmove
-
-            /// ontouchstart
-            ontouchstart
-        ];
-
-        WheelEvent(WheelData): [
-            ///
-            onwheel
-        ];
-
-        MediaEvent(MediaData): [
-            ///abort
-            onabort
-
-            ///canplay
-            oncanplay
-
-            ///canplaythrough
-            oncanplaythrough
-
-            ///durationchange
-            ondurationchange
-
-            ///emptied
-            onemptied
-
-            ///encrypted
-            onencrypted
-
-            ///ended
-            onended
-
-            ///error
-            onerror
-
-            ///loadeddata
-            onloadeddata
-
-            ///loadedmetadata
-            onloadedmetadata
-
-            ///loadstart
-            onloadstart
-
-            ///pause
-            onpause
-
-            ///play
-            onplay
-
-            ///playing
-            onplaying
-
-            ///progress
-            onprogress
-
-            ///ratechange
-            onratechange
-
-            ///seeked
-            onseeked
-
-            ///seeking
-            onseeking
-
-            ///stalled
-            onstalled
-
-            ///suspend
-            onsuspend
-
-            ///timeupdate
-            ontimeupdate
-
-            ///volumechange
-            onvolumechange
-
-            ///waiting
-            onwaiting
-        ];
-
-        AnimationEvent(AnimationData): [
-            /// onanimationstart
-            onanimationstart
-
-            /// onanimationend
-            onanimationend
-
-            /// onanimationiteration
-            onanimationiteration
-        ];
-
-        TransitionEvent(TransitionData): [
-            ///
-            ontransitionend
-        ];
-
-        ToggleEvent(ToggleData): [
-            ///
-            ontoggle
-        ];
-    }
-
-    pub type ClipboardEvent = UiEvent<ClipboardData>;
-    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
-    #[derive(Debug, Clone)]
-    pub struct ClipboardData {
-        // DOMDataTransfer clipboardData
-    }
-
-    pub type CompositionEvent = UiEvent<CompositionData>;
-    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
-    #[derive(Debug, Clone)]
-    pub struct CompositionData {
-        pub data: String,
-    }
-
-    pub type KeyboardEvent = UiEvent<KeyboardData>;
-    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
-    #[derive(Clone)]
-    pub struct KeyboardData {
-        #[deprecated(
-            since = "0.3.0",
-            note = "This may not work in all environments. Use key() instead."
-        )]
-        pub char_code: u32,
-
-        /// Identify which "key" was entered.
-        #[deprecated(since = "0.3.0", note = "use key() instead")]
-        pub key: String,
-
-        /// Get the key code as an enum Variant.
-        #[deprecated(
-            since = "0.3.0",
-            note = "This may not work in all environments. Use code() instead."
-        )]
-        pub key_code: KeyCode,
-
-        /// the physical key on the keyboard
-        code: Code,
-
-        /// Indicate if the `alt` modifier key was pressed during this keyboard event
-        #[deprecated(since = "0.3.0", note = "use modifiers() instead")]
-        pub alt_key: bool,
-
-        /// Indicate if the `ctrl` modifier key was pressed during this keyboard event
-        #[deprecated(since = "0.3.0", note = "use modifiers() instead")]
-        pub ctrl_key: bool,
-
-        /// Indicate if the `meta` modifier key was pressed during this keyboard event
-        #[deprecated(since = "0.3.0", note = "use modifiers() instead")]
-        pub meta_key: bool,
-
-        /// Indicate if the `shift` modifier key was pressed during this keyboard event
-        #[deprecated(since = "0.3.0", note = "use modifiers() instead")]
-        pub shift_key: bool,
-
-        #[deprecated(since = "0.3.0", note = "use location() instead")]
-        pub location: usize,
-
-        #[deprecated(since = "0.3.0", note = "use is_auto_repeating() instead")]
-        pub repeat: bool,
-
-        #[deprecated(since = "0.3.0", note = "use code() or key() instead")]
-        pub which: usize,
-    }
-
-    impl KeyboardData {
-        pub fn new(
-            key: Key,
-            code: Code,
-            location: Location,
-            is_auto_repeating: bool,
-            modifiers: Modifiers,
-        ) -> Self {
-            #[allow(deprecated)]
-            KeyboardData {
-                char_code: key.legacy_charcode(),
-                key: key.to_string(),
-                key_code: KeyCode::from_raw_code(
-                    key.legacy_keycode()
-                        .try_into()
-                        .expect("could not convert keycode to u8"),
-                ),
-                code,
-                alt_key: modifiers.contains(Modifiers::ALT),
-                ctrl_key: modifiers.contains(Modifiers::CONTROL),
-                meta_key: modifiers.contains(Modifiers::META),
-                shift_key: modifiers.contains(Modifiers::SHIFT),
-                location: encode_key_location(location),
-                repeat: is_auto_repeating,
-                which: key
-                    .legacy_charcode()
-                    .try_into()
-                    .expect("could not convert charcode to usize"),
+            $name:ident
+        )*
+    ) => {
+        $(
+            $( #[$attr] )*
+            pub fn $name<'a>(_cx: &'a ::dioxus_core::ScopeState, _f: impl FnMut(&'a $data) + 'a) -> ::dioxus_core::Attribute<'a> {
+                todo!()
             }
-        }
-
-        /// The value of the key pressed by the user, taking into consideration the state of modifier keys such as Shift as well as the keyboard locale and layout.
-        pub fn key(&self) -> Key {
-            #[allow(deprecated)]
-            FromStr::from_str(&self.key).expect("could not parse")
-        }
-
-        /// A physical key on the keyboard (as opposed to the character generated by pressing the key). In other words, this property returns a value that isn't altered by keyboard layout or the state of the modifier keys.
-        pub fn code(&self) -> Code {
-            self.code
-        }
-
-        /// The set of modifier keys which were pressed when the event occurred
-        pub fn modifiers(&self) -> Modifiers {
-            let mut modifiers = Modifiers::empty();
-
-            #[allow(deprecated)]
-            {
-                if self.alt_key {
-                    modifiers.insert(Modifiers::ALT);
-                }
-                if self.ctrl_key {
-                    modifiers.insert(Modifiers::CONTROL);
-                }
-                if self.meta_key {
-                    modifiers.insert(Modifiers::META);
-                }
-                if self.shift_key {
-                    modifiers.insert(Modifiers::SHIFT);
-                }
-            }
-
-            modifiers
-        }
-
-        /// The location of the key on the keyboard or other input device.
-        pub fn location(&self) -> Location {
-            #[allow(deprecated)]
-            decode_key_location(self.location)
-        }
-
-        /// `true` iff the key is being held down such that it is automatically repeating.
-        pub fn is_auto_repeating(&self) -> bool {
-            #[allow(deprecated)]
-            self.repeat
-        }
-    }
-
-    impl Debug for KeyboardData {
-        fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
-            f.debug_struct("KeyboardData")
-                .field("key", &self.key())
-                .field("code", &self.code())
-                .field("modifiers", &self.modifiers())
-                .field("location", &self.location())
-                .field("is_auto_repeating", &self.is_auto_repeating())
-                .finish()
-        }
-    }
-
-    pub type FocusEvent = UiEvent<FocusData>;
-    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
-    #[derive(Debug, Clone)]
-    pub struct FocusData {/* DOMEventInner:  Send + SyncTarget relatedTarget */}
-
-    pub type FormEvent = UiEvent<FormData>;
-    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
-    #[derive(Debug, Clone)]
-    pub struct FormData {
-        pub value: String,
-        pub values: HashMap<String, String>,
-        /* DOMEvent:  Send + SyncTarget relatedTarget */
-    }
-
-    pub type MouseEvent = UiEvent<MouseData>;
-    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
-    #[derive(Clone)]
-    /// Data associated with a mouse event
-    ///
-    /// Do not use the deprecated fields; they may change or become private in the future.
-    pub struct MouseData {
-        /// True if the alt key was down when the mouse event was fired.
-        #[deprecated(since = "0.3.0", note = "use modifiers() instead")]
-        pub alt_key: bool,
-        /// The button number that was pressed (if applicable) when the mouse event was fired.
-        #[deprecated(since = "0.3.0", note = "use trigger_button() instead")]
-        pub button: i16,
-        /// Indicates which buttons are pressed on the mouse (or other input device) when a mouse event is triggered.
-        ///
-        /// Each button that can be pressed is represented by a given number (see below). If more than one button is pressed, the button values are added together to produce a new number. For example, if the secondary (2) and auxiliary (4) buttons are pressed simultaneously, the value is 6 (i.e., 2 + 4).
-        ///
-        /// - 1: Primary button (usually the left button)
-        /// - 2: Secondary button (usually the right button)
-        /// - 4: Auxiliary button (usually the mouse wheel button or middle button)
-        /// - 8: 4th button (typically the "Browser Back" button)
-        /// - 16 : 5th button (typically the "Browser Forward" button)
-        #[deprecated(since = "0.3.0", note = "use held_buttons() instead")]
-        pub buttons: u16,
-        /// The horizontal coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page).
-        ///
-        /// For example, clicking on the left edge of the viewport will always result in a mouse event with a clientX value of 0, regardless of whether the page is scrolled horizontally.
-        #[deprecated(since = "0.3.0", note = "use client_coordinates() instead")]
-        pub client_x: i32,
-        /// The vertical coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page).
-        ///
-        /// For example, clicking on the top edge of the viewport will always result in a mouse event with a clientY value of 0, regardless of whether the page is scrolled vertically.
-        #[deprecated(since = "0.3.0", note = "use client_coordinates() instead")]
-        pub client_y: i32,
-        /// True if the control key was down when the mouse event was fired.
-        #[deprecated(since = "0.3.0", note = "use modifiers() instead")]
-        pub ctrl_key: bool,
-        /// True if the meta key was down when the mouse event was fired.
-        #[deprecated(since = "0.3.0", note = "use modifiers() instead")]
-        pub meta_key: bool,
-        /// The offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node.
-        #[deprecated(since = "0.3.0", note = "use element_coordinates() instead")]
-        pub offset_x: i32,
-        /// The offset in the Y coordinate of the mouse pointer between that event and the padding edge of the target node.
-        #[deprecated(since = "0.3.0", note = "use element_coordinates() instead")]
-        pub offset_y: i32,
-        /// The X (horizontal) coordinate (in pixels) of the mouse, relative to the left edge of the entire document. This includes any portion of the document not currently visible.
-        ///
-        /// Being based on the edge of the document as it is, this property takes into account any horizontal scrolling of the page. For example, if the page is scrolled such that 200 pixels of the left side of the document are scrolled out of view, and the mouse is clicked 100 pixels inward from the left edge of the view, the value returned by pageX will be 300.
-        #[deprecated(since = "0.3.0", note = "use page_coordinates() instead")]
-        pub page_x: i32,
-        /// The Y (vertical) coordinate in pixels of the event relative to the whole document.
-        ///
-        /// See `page_x`.
-        #[deprecated(since = "0.3.0", note = "use page_coordinates() instead")]
-        pub page_y: i32,
-        /// The X coordinate of the mouse pointer in global (screen) coordinates.
-        #[deprecated(since = "0.3.0", note = "use screen_coordinates() instead")]
-        pub screen_x: i32,
-        /// The Y coordinate of the mouse pointer in global (screen) coordinates.
-        #[deprecated(since = "0.3.0", note = "use screen_coordinates() instead")]
-        pub screen_y: i32,
-        /// True if the shift key was down when the mouse event was fired.
-        #[deprecated(since = "0.3.0", note = "use modifiers() instead")]
-        pub shift_key: bool,
-        // fn get_modifier_state(&self, key_code: &str) -> bool;
-    }
-
-    impl MouseData {
-        /// Construct MouseData with the specified properties
-        ///
-        /// Note: the current implementation truncates coordinates. In the future, when we change the internal representation, it may also support a fractional part.
-        pub fn new(
-            coordinates: Coordinates,
-            trigger_button: Option<MouseButton>,
-            held_buttons: MouseButtonSet,
-            modifiers: Modifiers,
-        ) -> Self {
-            let alt_key = modifiers.contains(Modifiers::ALT);
-            let ctrl_key = modifiers.contains(Modifiers::CONTROL);
-            let meta_key = modifiers.contains(Modifiers::META);
-            let shift_key = modifiers.contains(Modifiers::SHIFT);
-
-            let [client_x, client_y]: [i32; 2] = coordinates.client().cast().into();
-            let [offset_x, offset_y]: [i32; 2] = coordinates.element().cast().into();
-            let [page_x, page_y]: [i32; 2] = coordinates.page().cast().into();
-            let [screen_x, screen_y]: [i32; 2] = coordinates.screen().cast().into();
-
-            #[allow(deprecated)]
-            Self {
-                alt_key,
-                ctrl_key,
-                meta_key,
-                shift_key,
-
-                button: trigger_button.map_or(0, |b| b.into_web_code()),
-                buttons: encode_mouse_button_set(held_buttons),
-
-                client_x,
-                client_y,
-                offset_x,
-                offset_y,
-                page_x,
-                page_y,
-                screen_x,
-                screen_y,
-            }
-        }
-
-        /// The event's coordinates relative to the application's viewport (as opposed to the coordinate within the page).
-        ///
-        /// For example, clicking in the top left corner of the viewport will always result in a mouse event with client coordinates (0., 0.), regardless of whether the page is scrolled horizontally.
-        pub fn client_coordinates(&self) -> ClientPoint {
-            #[allow(deprecated)]
-            ClientPoint::new(self.client_x.into(), self.client_y.into())
-        }
-
-        /// The event's coordinates relative to the padding edge of the target element
-        ///
-        /// For example, clicking in the top left corner of an element will result in element coordinates (0., 0.)
-        pub fn element_coordinates(&self) -> ElementPoint {
-            #[allow(deprecated)]
-            ElementPoint::new(self.offset_x.into(), self.offset_y.into())
-        }
-
-        /// The event's coordinates relative to the entire document. This includes any portion of the document not currently visible.
-        ///
-        /// For example, if the page is scrolled 200 pixels to the right and 300 pixels down, clicking in the top left corner of the viewport would result in page coordinates (200., 300.)
-        pub fn page_coordinates(&self) -> PagePoint {
-            #[allow(deprecated)]
-            PagePoint::new(self.page_x.into(), self.page_y.into())
-        }
-
-        /// The event's coordinates relative to the entire screen. This takes into account the window's offset.
-        pub fn screen_coordinates(&self) -> ScreenPoint {
-            #[allow(deprecated)]
-            ScreenPoint::new(self.screen_x.into(), self.screen_y.into())
-        }
-
-        pub fn coordinates(&self) -> Coordinates {
-            Coordinates::new(
-                self.screen_coordinates(),
-                self.client_coordinates(),
-                self.element_coordinates(),
-                self.page_coordinates(),
-            )
-        }
-
-        /// The set of modifier keys which were pressed when the event occurred
-        pub fn modifiers(&self) -> Modifiers {
-            let mut modifiers = Modifiers::empty();
-
-            #[allow(deprecated)]
-            {
-                if self.alt_key {
-                    modifiers.insert(Modifiers::ALT);
-                }
-                if self.ctrl_key {
-                    modifiers.insert(Modifiers::CONTROL);
-                }
-                if self.meta_key {
-                    modifiers.insert(Modifiers::META);
-                }
-                if self.shift_key {
-                    modifiers.insert(Modifiers::SHIFT);
-                }
-            }
-
-            modifiers
-        }
-
-        /// The set of mouse buttons which were held when the event occurred.
-        pub fn held_buttons(&self) -> MouseButtonSet {
-            #[allow(deprecated)]
-            decode_mouse_button_set(self.buttons)
-        }
-
-        /// The mouse button that triggered the event
-        ///
-        // todo the following is kind of bad; should we just return None when the trigger_button is unreliable (and frankly irrelevant)? i guess we would need the event_type here
-        /// This is only guaranteed to indicate which button was pressed during events caused by pressing or releasing a button. As such, it is not reliable for events such as mouseenter, mouseleave, mouseover, mouseout, or mousemove. For example, a value of MouseButton::Primary may also indicate that no button was pressed.
-        pub fn trigger_button(&self) -> Option<MouseButton> {
-            #[allow(deprecated)]
-            Some(MouseButton::from_web_code(self.button))
-        }
-    }
-
-    impl Debug for MouseData {
-        fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
-            f.debug_struct("MouseData")
-                .field("coordinates", &self.coordinates())
-                .field("modifiers", &self.modifiers())
-                .field("held_buttons", &self.held_buttons())
-                .field("trigger_button", &self.trigger_button())
-                .finish()
-        }
-    }
-
-    pub type PointerEvent = UiEvent<PointerData>;
-    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
-    #[derive(Debug, Clone)]
-    pub struct PointerData {
-        // Mouse only
-        pub alt_key: bool,
-        pub button: i16,
-        pub buttons: u16,
-        pub client_x: i32,
-        pub client_y: i32,
-        pub ctrl_key: bool,
-        pub meta_key: bool,
-        pub page_x: i32,
-        pub page_y: i32,
-        pub screen_x: i32,
-        pub screen_y: i32,
-        pub shift_key: bool,
-        pub pointer_id: i32,
-        pub width: i32,
-        pub height: i32,
-        pub pressure: f32,
-        pub tangential_pressure: f32,
-        pub tilt_x: i32,
-        pub tilt_y: i32,
-        pub twist: i32,
-        pub pointer_type: String,
-        pub is_primary: bool,
-        // pub get_modifier_state: bool,
-    }
-
-    pub type SelectionEvent = UiEvent<SelectionData>;
-    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
-    #[derive(Debug, Clone)]
-    pub struct SelectionData {}
-
-    pub type TouchEvent = UiEvent<TouchData>;
-    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
-    #[derive(Debug, Clone)]
-    pub struct TouchData {
-        pub alt_key: bool,
-        pub ctrl_key: bool,
-        pub meta_key: bool,
-        pub shift_key: bool,
-        // get_modifier_state: bool,
-        // changedTouches: DOMTouchList,
-        // targetTouches: DOMTouchList,
-        // touches: DOMTouchList,
-    }
-
-    pub type WheelEvent = UiEvent<WheelData>;
-    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
-    #[derive(Clone)]
-    pub struct WheelData {
-        #[deprecated(since = "0.3.0", note = "use delta() instead")]
-        pub delta_mode: u32,
-        #[deprecated(since = "0.3.0", note = "use delta() instead")]
-        pub delta_x: f64,
-        #[deprecated(since = "0.3.0", note = "use delta() instead")]
-        pub delta_y: f64,
-        #[deprecated(since = "0.3.0", note = "use delta() instead")]
-        pub delta_z: f64,
-    }
-
-    impl WheelData {
-        /// Construct a new WheelData with the specified wheel movement delta
-        pub fn new(delta: WheelDelta) -> Self {
-            let (delta_mode, vector) = match delta {
-                WheelDelta::Pixels(v) => (0, v.cast_unit::<UnknownUnit>()),
-                WheelDelta::Lines(v) => (1, v.cast_unit::<UnknownUnit>()),
-                WheelDelta::Pages(v) => (2, v.cast_unit::<UnknownUnit>()),
-            };
-
-            #[allow(deprecated)]
-            WheelData {
-                delta_mode,
-                delta_x: vector.x,
-                delta_y: vector.y,
-                delta_z: vector.z,
-            }
-        }
-
-        /// Construct from the attributes of the web wheel event
-        pub fn from_web_attributes(
-            delta_mode: u32,
-            delta_x: f64,
-            delta_y: f64,
-            delta_z: f64,
-        ) -> Self {
-            #[allow(deprecated)]
-            Self {
-                delta_mode,
-                delta_x,
-                delta_y,
-                delta_z,
-            }
-        }
-
-        /// The amount of wheel movement
-        #[allow(deprecated)]
-        pub fn delta(&self) -> WheelDelta {
-            let x = self.delta_x;
-            let y = self.delta_y;
-            let z = self.delta_z;
-            match self.delta_mode {
-                0 => WheelDelta::Pixels(PixelsVector::new(x, y, z)),
-                1 => WheelDelta::Lines(LinesVector::new(x, y, z)),
-                2 => WheelDelta::Pages(PagesVector::new(x, y, z)),
-                _ => panic!("Invalid delta mode, {:?}", self.delta_mode),
-            }
-        }
-    }
-
-    impl Debug for WheelData {
-        fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
-            f.debug_struct("WheelData")
-                .field("delta", &self.delta())
-                .finish()
-        }
-    }
-
-    pub type ScrollEvent = UiEvent<ScrollData>;
-    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
-    #[derive(Debug, Clone)]
-    pub struct ScrollData {}
-
-    pub type MediaEvent = UiEvent<MediaData>;
-    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
-    #[derive(Debug, Clone)]
-    pub struct MediaData {}
-
-    pub type ImageEvent = UiEvent<ImageData>;
-    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
-    #[derive(Debug, Clone)]
-    pub struct ImageData {
-        pub load_error: bool,
-    }
-
-    pub type AnimationEvent = UiEvent<AnimationData>;
-    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
-    #[derive(Debug, Clone)]
-    pub struct AnimationData {
-        pub animation_name: String,
-        pub pseudo_element: String,
-        pub elapsed_time: f32,
-    }
-
-    pub type TransitionEvent = UiEvent<TransitionData>;
-    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
-    #[derive(Debug, Clone)]
-    pub struct TransitionData {
-        pub property_name: String,
-        pub pseudo_element: String,
-        pub elapsed_time: f32,
-    }
-
-    pub type ToggleEvent = UiEvent<ToggleData>;
-    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
-    #[derive(Debug, Clone)]
-    pub struct ToggleData {}
+        )*
+    };
 }
 
-#[cfg_attr(
-    feature = "serialize",
-    derive(serde_repr::Serialize_repr, serde_repr::Deserialize_repr)
-)]
-#[derive(Clone, Copy, Debug, Eq, PartialEq)]
-#[repr(u8)]
-pub enum KeyCode {
-    // That key has no keycode, = 0
-    // break, = 3
-    // backspace / delete, = 8
-    // tab, = 9
-    // clear, = 12
-    // enter, = 13
-    // shift, = 16
-    // ctrl, = 17
-    // alt, = 18
-    // pause/break, = 19
-    // caps lock, = 20
-    // hangul, = 21
-    // hanja, = 25
-    // escape, = 27
-    // conversion, = 28
-    // non-conversion, = 29
-    // spacebar, = 32
-    // page up, = 33
-    // page down, = 34
-    // end, = 35
-    // home, = 36
-    // left arrow, = 37
-    // up arrow, = 38
-    // right arrow, = 39
-    // down arrow, = 40
-    // select, = 41
-    // print, = 42
-    // execute, = 43
-    // Print Screen, = 44
-    // insert, = 45
-    // delete, = 46
-    // help, = 47
-    // 0, = 48
-    // 1, = 49
-    // 2, = 50
-    // 3, = 51
-    // 4, = 52
-    // 5, = 53
-    // 6, = 54
-    // 7, = 55
-    // 8, = 56
-    // 9, = 57
-    // :, = 58
-    // semicolon (firefox), equals, = 59
-    // <, = 60
-    // equals (firefox), = 61
-    // ß, = 63
-    // @ (firefox), = 64
-    // a, = 65
-    // b, = 66
-    // c, = 67
-    // d, = 68
-    // e, = 69
-    // f, = 70
-    // g, = 71
-    // h, = 72
-    // i, = 73
-    // j, = 74
-    // k, = 75
-    // l, = 76
-    // m, = 77
-    // n, = 78
-    // o, = 79
-    // p, = 80
-    // q, = 81
-    // r, = 82
-    // s, = 83
-    // t, = 84
-    // u, = 85
-    // v, = 86
-    // w, = 87
-    // x, = 88
-    // y, = 89
-    // z, = 90
-    // Windows Key / Left ⌘ / Chromebook Search key, = 91
-    // right window key, = 92
-    // Windows Menu / Right ⌘, = 93
-    // sleep, = 95
-    // numpad 0, = 96
-    // numpad 1, = 97
-    // numpad 2, = 98
-    // numpad 3, = 99
-    // numpad 4, = 100
-    // numpad 5, = 101
-    // numpad 6, = 102
-    // numpad 7, = 103
-    // numpad 8, = 104
-    // numpad 9, = 105
-    // multiply, = 106
-    // add, = 107
-    // numpad period (firefox), = 108
-    // subtract, = 109
-    // decimal point, = 110
-    // divide, = 111
-    // f1, = 112
-    // f2, = 113
-    // f3, = 114
-    // f4, = 115
-    // f5, = 116
-    // f6, = 117
-    // f7, = 118
-    // f8, = 119
-    // f9, = 120
-    // f10, = 121
-    // f11, = 122
-    // f12, = 123
-    // f13, = 124
-    // f14, = 125
-    // f15, = 126
-    // f16, = 127
-    // f17, = 128
-    // f18, = 129
-    // f19, = 130
-    // f20, = 131
-    // f21, = 132
-    // f22, = 133
-    // f23, = 134
-    // f24, = 135
-    // f25, = 136
-    // f26, = 137
-    // f27, = 138
-    // f28, = 139
-    // f29, = 140
-    // f30, = 141
-    // f31, = 142
-    // f32, = 143
-    // num lock, = 144
-    // scroll lock, = 145
-    // airplane mode, = 151
-    // ^, = 160
-    // !, = 161
-    // ؛ (arabic semicolon), = 162
-    // #, = 163
-    // $, = 164
-    // ù, = 165
-    // page backward, = 166
-    // page forward, = 167
-    // refresh, = 168
-    // closing paren (AZERTY), = 169
-    // *, = 170
-    // ~ + * key, = 171
-    // home key, = 172
-    // minus (firefox), mute/unmute, = 173
-    // decrease volume level, = 174
-    // increase volume level, = 175
-    // next, = 176
-    // previous, = 177
-    // stop, = 178
-    // play/pause, = 179
-    // e-mail, = 180
-    // mute/unmute (firefox), = 181
-    // decrease volume level (firefox), = 182
-    // increase volume level (firefox), = 183
-    // semi-colon / ñ, = 186
-    // equal sign, = 187
-    // comma, = 188
-    // dash, = 189
-    // period, = 190
-    // forward slash / ç, = 191
-    // grave accent / ñ / æ / ö, = 192
-    // ?, / or °, = 193
-    // numpad period (chrome), = 194
-    // open bracket, = 219
-    // back slash, = 220
-    // close bracket / å, = 221
-    // single quote / ø / ä, = 222
-    // `, = 223
-    // left or right ⌘ key (firefox), = 224
-    // altgr, = 225
-    // < /git >, left back slash, = 226
-    // GNOME Compose Key, = 230
-    // ç, = 231
-    // XF86Forward, = 233
-    // XF86Back, = 234
-    // non-conversion, = 235
-    // alphanumeric, = 240
-    // hiragana/katakana, = 242
-    // half-width/full-width, = 243
-    // kanji, = 244
-    // unlock trackpad (Chrome/Edge), = 251
-    // toggle touchpad, = 255
-    NA = 0,
-    Break = 3,
-    Backspace = 8,
-    Tab = 9,
-    Clear = 12,
-    Enter = 13,
-    Shift = 16,
-    Ctrl = 17,
-    Alt = 18,
-    Pause = 19,
-    CapsLock = 20,
-    // hangul, = 21
-    // hanja, = 25
-    Escape = 27,
-    // conversion, = 28
-    // non-conversion, = 29
-    Space = 32,
-    PageUp = 33,
-    PageDown = 34,
-    End = 35,
-    Home = 36,
-    LeftArrow = 37,
-    UpArrow = 38,
-    RightArrow = 39,
-    DownArrow = 40,
-    // select, = 41
-    // print, = 42
-    // execute, = 43
-    // Print Screen, = 44
-    Insert = 45,
-    Delete = 46,
-    // help, = 47
-    Num0 = 48,
-    Num1 = 49,
-    Num2 = 50,
-    Num3 = 51,
-    Num4 = 52,
-    Num5 = 53,
-    Num6 = 54,
-    Num7 = 55,
-    Num8 = 56,
-    Num9 = 57,
-    // :, = 58
-    // semicolon (firefox), equals, = 59
-    // <, = 60
-    // equals (firefox), = 61
-    // ß, = 63
-    // @ (firefox), = 64
-    A = 65,
-    B = 66,
-    C = 67,
-    D = 68,
-    E = 69,
-    F = 70,
-    G = 71,
-    H = 72,
-    I = 73,
-    J = 74,
-    K = 75,
-    L = 76,
-    M = 77,
-    N = 78,
-    O = 79,
-    P = 80,
-    Q = 81,
-    R = 82,
-    S = 83,
-    T = 84,
-    U = 85,
-    V = 86,
-    W = 87,
-    X = 88,
-    Y = 89,
-    Z = 90,
-    LeftWindow = 91,
-    RightWindow = 92,
-    SelectKey = 93,
-    Numpad0 = 96,
-    Numpad1 = 97,
-    Numpad2 = 98,
-    Numpad3 = 99,
-    Numpad4 = 100,
-    Numpad5 = 101,
-    Numpad6 = 102,
-    Numpad7 = 103,
-    Numpad8 = 104,
-    Numpad9 = 105,
-    Multiply = 106,
-    Add = 107,
-    Subtract = 109,
-    DecimalPoint = 110,
-    Divide = 111,
-    F1 = 112,
-    F2 = 113,
-    F3 = 114,
-    F4 = 115,
-    F5 = 116,
-    F6 = 117,
-    F7 = 118,
-    F8 = 119,
-    F9 = 120,
-    F10 = 121,
-    F11 = 122,
-    F12 = 123,
-    // f13, = 124
-    // f14, = 125
-    // f15, = 126
-    // f16, = 127
-    // f17, = 128
-    // f18, = 129
-    // f19, = 130
-    // f20, = 131
-    // f21, = 132
-    // f22, = 133
-    // f23, = 134
-    // f24, = 135
-    // f25, = 136
-    // f26, = 137
-    // f27, = 138
-    // f28, = 139
-    // f29, = 140
-    // f30, = 141
-    // f31, = 142
-    // f32, = 143
-    NumLock = 144,
-    ScrollLock = 145,
-    // airplane mode, = 151
-    // ^, = 160
-    // !, = 161
-    // ؛ (arabic semicolon), = 162
-    // #, = 163
-    // $, = 164
-    // ù, = 165
-    // page backward, = 166
-    // page forward, = 167
-    // refresh, = 168
-    // closing paren (AZERTY), = 169
-    // *, = 170
-    // ~ + * key, = 171
-    // home key, = 172
-    // minus (firefox), mute/unmute, = 173
-    // decrease volume level, = 174
-    // increase volume level, = 175
-    // next, = 176
-    // previous, = 177
-    // stop, = 178
-    // play/pause, = 179
-    // e-mail, = 180
-    // mute/unmute (firefox), = 181
-    // decrease volume level (firefox), = 182
-    // increase volume level (firefox), = 183
-    Semicolon = 186,
-    EqualSign = 187,
-    Comma = 188,
-    Dash = 189,
-    Period = 190,
-    ForwardSlash = 191,
-    GraveAccent = 192,
-    // ?, / or °, = 193
-    // numpad period (chrome), = 194
-    OpenBracket = 219,
-    BackSlash = 220,
-    CloseBraket = 221,
-    SingleQuote = 222,
-    // `, = 223
-    // left or right ⌘ key (firefox), = 224
-    // altgr, = 225
-    // < /git >, left back slash, = 226
-    // GNOME Compose Key, = 230
-    // ç, = 231
-    // XF86Forward, = 233
-    // XF86Back, = 234
-    // non-conversion, = 235
-    // alphanumeric, = 240
-    // hiragana/katakana, = 242
-    // half-width/full-width, = 243
-    // kanji, = 244
-    // unlock trackpad (Chrome/Edge), = 251
-    // toggle touchpad, = 255
-    #[cfg_attr(feature = "serialize", serde(other))]
-    Unknown,
-}
+mod mouse;
+pub use mouse::*;
 
-impl KeyCode {
-    pub fn from_raw_code(i: u8) -> Self {
-        use KeyCode::*;
-        match i {
-            8 => Backspace,
-            9 => Tab,
-            13 => Enter,
-            16 => Shift,
-            17 => Ctrl,
-            18 => Alt,
-            19 => Pause,
-            20 => CapsLock,
-            27 => Escape,
-            33 => PageUp,
-            34 => PageDown,
-            35 => End,
-            36 => Home,
-            37 => LeftArrow,
-            38 => UpArrow,
-            39 => RightArrow,
-            40 => DownArrow,
-            45 => Insert,
-            46 => Delete,
-            48 => Num0,
-            49 => Num1,
-            50 => Num2,
-            51 => Num3,
-            52 => Num4,
-            53 => Num5,
-            54 => Num6,
-            55 => Num7,
-            56 => Num8,
-            57 => Num9,
-            65 => A,
-            66 => B,
-            67 => C,
-            68 => D,
-            69 => E,
-            70 => F,
-            71 => G,
-            72 => H,
-            73 => I,
-            74 => J,
-            75 => K,
-            76 => L,
-            77 => M,
-            78 => N,
-            79 => O,
-            80 => P,
-            81 => Q,
-            82 => R,
-            83 => S,
-            84 => T,
-            85 => U,
-            86 => V,
-            87 => W,
-            88 => X,
-            89 => Y,
-            90 => Z,
-            91 => LeftWindow,
-            92 => RightWindow,
-            93 => SelectKey,
-            96 => Numpad0,
-            97 => Numpad1,
-            98 => Numpad2,
-            99 => Numpad3,
-            100 => Numpad4,
-            101 => Numpad5,
-            102 => Numpad6,
-            103 => Numpad7,
-            104 => Numpad8,
-            105 => Numpad9,
-            106 => Multiply,
-            107 => Add,
-            109 => Subtract,
-            110 => DecimalPoint,
-            111 => Divide,
-            112 => F1,
-            113 => F2,
-            114 => F3,
-            115 => F4,
-            116 => F5,
-            117 => F6,
-            118 => F7,
-            119 => F8,
-            120 => F9,
-            121 => F10,
-            122 => F11,
-            123 => F12,
-            144 => NumLock,
-            145 => ScrollLock,
-            186 => Semicolon,
-            187 => EqualSign,
-            188 => Comma,
-            189 => Dash,
-            190 => Period,
-            191 => ForwardSlash,
-            192 => GraveAccent,
-            219 => OpenBracket,
-            220 => BackSlash,
-            221 => CloseBraket,
-            222 => SingleQuote,
-            _ => Unknown,
-        }
-    }
+mod animation;
+pub use animation::*;
 
-    // get the raw code
-    pub fn raw_code(&self) -> u32 {
-        *self as u32
-    }
-}
+mod composition;
+pub use composition::*;
 
-pub(crate) fn _event_meta<T>(event: &UiEvent<T>) -> (bool, EventPriority) {
-    use EventPriority::*;
+mod drag;
+pub use drag::*;
 
-    match event.name {
-        // clipboard
-        "copy" | "cut" | "paste" => (true, Medium),
+mod focus;
+pub use focus::*;
 
-        // Composition
-        "compositionend" | "compositionstart" | "compositionupdate" => (true, Low),
+mod form;
+pub use form::*;
 
-        // Keyboard
-        "keydown" | "keypress" | "keyup" => (true, High),
+mod image;
+pub use image::*;
 
-        // Focus
-        "focus" | "blur" | "focusout" | "focusin" => (true, Low),
+mod keyboard;
+pub use keyboard::*;
 
-        // Form
-        "change" | "input" | "invalid" | "reset" | "submit" => (true, Medium),
+mod media;
+pub use media::*;
 
-        // Mouse
-        "click" | "contextmenu" | "doubleclick" | "drag" | "dragend" | "dragenter" | "dragexit"
-        | "dragleave" | "dragover" | "dragstart" | "drop" | "mousedown" | "mouseenter"
-        | "mouseleave" | "mouseout" | "mouseover" | "mouseup" => (true, High),
+mod pointer;
+pub use pointer::*;
 
-        "mousemove" => (false, Medium),
+mod selection;
+pub use selection::*;
 
-        // Pointer
-        "pointerdown" | "pointermove" | "pointerup" | "pointercancel" | "gotpointercapture"
-        | "lostpointercapture" | "pointerenter" | "pointerleave" | "pointerover" | "pointerout" => {
-            (true, Medium)
-        }
+mod toggle;
+pub use toggle::*;
 
-        // Selection
-        "select" | "touchcancel" | "touchend" => (true, Medium),
+mod touch;
+pub use touch::*;
 
-        // Touch
-        "touchmove" | "touchstart" => (true, Medium),
+mod transition;
+pub use transition::*;
 
-        // Wheel
-        "scroll" | "wheel" => (false, Medium),
-
-        // Media
-        "abort" | "canplay" | "canplaythrough" | "durationchange" | "emptied" | "encrypted"
-        | "ended" | "error" | "loadeddata" | "loadedmetadata" | "loadstart" | "pause" | "play"
-        | "playing" | "progress" | "ratechange" | "seeked" | "seeking" | "stalled" | "suspend"
-        | "timeupdate" | "volumechange" | "waiting" => (true, Medium),
-
-        // Animation
-        "animationstart" | "animationend" | "animationiteration" => (true, Medium),
-
-        // Transition
-        "transitionend" => (true, Medium),
-
-        // Toggle
-        "toggle" => (true, Medium),
-
-        _ => (true, Low),
-    }
-}
-
-pub fn event_bubbles(evt: &str) -> bool {
-    match evt {
-        "copy" => true,
-        "cut" => true,
-        "paste" => true,
-        "compositionend" => true,
-        "compositionstart" => true,
-        "compositionupdate" => true,
-        "keydown" => true,
-        "keypress" => true,
-        "keyup" => true,
-        "focus" => false,
-        "focusout" => true,
-        "focusin" => true,
-        "blur" => false,
-        "change" => true,
-        "input" => true,
-        "invalid" => true,
-        "reset" => true,
-        "submit" => true,
-        "click" => true,
-        "contextmenu" => true,
-        "doubleclick" => true,
-        "dblclick" => true,
-        "drag" => true,
-        "dragend" => true,
-        "dragenter" => false,
-        "dragexit" => false,
-        "dragleave" => true,
-        "dragover" => true,
-        "dragstart" => true,
-        "drop" => true,
-        "mousedown" => true,
-        "mouseenter" => false,
-        "mouseleave" => false,
-        "mousemove" => true,
-        "mouseout" => true,
-        "scroll" => false,
-        "mouseover" => true,
-        "mouseup" => true,
-        "pointerdown" => true,
-        "pointermove" => true,
-        "pointerup" => true,
-        "pointercancel" => true,
-        "gotpointercapture" => true,
-        "lostpointercapture" => true,
-        "pointerenter" => false,
-        "pointerleave" => false,
-        "pointerover" => true,
-        "pointerout" => true,
-        "select" => true,
-        "touchcancel" => true,
-        "touchend" => true,
-        "touchmove" => true,
-        "touchstart" => true,
-        "wheel" => true,
-        "abort" => false,
-        "canplay" => false,
-        "canplaythrough" => false,
-        "durationchange" => false,
-        "emptied" => false,
-        "encrypted" => true,
-        "ended" => false,
-        "error" => false,
-        "loadeddata" => false,
-        "loadedmetadata" => false,
-        "loadstart" => false,
-        "pause" => false,
-        "play" => false,
-        "playing" => false,
-        "progress" => false,
-        "ratechange" => false,
-        "seeked" => false,
-        "seeking" => false,
-        "stalled" => false,
-        "suspend" => false,
-        "timeupdate" => false,
-        "volumechange" => false,
-        "waiting" => false,
-        "animationstart" => true,
-        "animationend" => true,
-        "animationiteration" => true,
-        "transitionend" => true,
-        "toggle" => true,
-        _ => panic!("unsupported event type {:?}", evt),
-    }
-}
+mod wheel;
+pub use wheel::*;
diff --git a/packages/html/src/events/animation.rs b/packages/html/src/events/animation.rs
new file mode 100644
index 000000000..dbaf566ca
--- /dev/null
+++ b/packages/html/src/events/animation.rs
@@ -0,0 +1,7 @@
+#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+#[derive(Debug, Clone)]
+pub struct AnimationEvent {
+    pub animation_name: String,
+    pub pseudo_element: String,
+    pub elapsed_time: f32,
+}
diff --git a/packages/ssr/tests.old/caches.rs b/packages/html/src/events/clipboard.rs
similarity index 100%
rename from packages/ssr/tests.old/caches.rs
rename to packages/html/src/events/clipboard.rs
diff --git a/packages/html/src/events/composition.rs b/packages/html/src/events/composition.rs
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/html/src/events/drag.rs b/packages/html/src/events/drag.rs
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/html/src/events/focus.rs b/packages/html/src/events/focus.rs
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/html/src/events/form.rs b/packages/html/src/events/form.rs
new file mode 100644
index 000000000..00ce7d1e7
--- /dev/null
+++ b/packages/html/src/events/form.rs
@@ -0,0 +1,44 @@
+use std::{collections::HashMap, sync::Arc};
+
+/* DOMEvent:  Send + SyncTarget relatedTarget */
+#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+#[derive(Clone)]
+pub struct FormEvent {
+    pub value: String,
+
+    pub values: HashMap<String, String>,
+
+    #[cfg_attr(feature = "serialize", serde(skip))]
+    pub files: Option<Arc<dyn FileEngine>>,
+}
+
+#[async_trait::async_trait(?Send)]
+pub trait FileEngine {
+    // get a list of file names
+    fn files(&self) -> Vec<String>;
+
+    // read a file to bytes
+    async fn read_file(&self, file: &str) -> Option<Vec<u8>>;
+
+    // read a file to string
+    async fn read_file_to_string(&self, file: &str) -> Option<String>;
+}
+
+impl_event! {
+    FormEvent;
+
+    /// onchange
+    onchange
+
+    /// oninput handler
+    oninput
+
+    /// oninvalid
+    oninvalid
+
+    /// onreset
+    onreset
+
+    /// onsubmit
+    onsubmit
+}
diff --git a/packages/html/src/events/image.rs b/packages/html/src/events/image.rs
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/html/src/events/keyboard.rs b/packages/html/src/events/keyboard.rs
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/html/src/events/keys.rs b/packages/html/src/events/keys.rs
new file mode 100644
index 000000000..8130875f2
--- /dev/null
+++ b/packages/html/src/events/keys.rs
@@ -0,0 +1,370 @@
+#[cfg_attr(
+    feature = "serialize",
+    derive(serde_repr::Serialize_repr, serde_repr::Deserialize_repr)
+)]
+#[derive(Clone, Copy, Debug, Eq, PartialEq)]
+#[repr(u8)]
+pub enum KeyCode {
+    // That key has no keycode, = 0
+    // break, = 3
+    // backspace / delete, = 8
+    // tab, = 9
+    // clear, = 12
+    // enter, = 13
+    // shift, = 16
+    // ctrl, = 17
+    // alt, = 18
+    // pause/break, = 19
+    // caps lock, = 20
+    // hangul, = 21
+    // hanja, = 25
+    // escape, = 27
+    // conversion, = 28
+    // non-conversion, = 29
+    // spacebar, = 32
+    // page up, = 33
+    // page down, = 34
+    // end, = 35
+    // home, = 36
+    // left arrow, = 37
+    // up arrow, = 38
+    // right arrow, = 39
+    // down arrow, = 40
+    // select, = 41
+    // print, = 42
+    // execute, = 43
+    // Print Screen, = 44
+    // insert, = 45
+    // delete, = 46
+    // help, = 47
+    // 0, = 48
+    // 1, = 49
+    // 2, = 50
+    // 3, = 51
+    // 4, = 52
+    // 5, = 53
+    // 6, = 54
+    // 7, = 55
+    // 8, = 56
+    // 9, = 57
+    // :, = 58
+    // semicolon (firefox), equals, = 59
+    // <, = 60
+    // equals (firefox), = 61
+    // ß, = 63
+    // @ (firefox), = 64
+    // a, = 65
+    // b, = 66
+    // c, = 67
+    // d, = 68
+    // e, = 69
+    // f, = 70
+    // g, = 71
+    // h, = 72
+    // i, = 73
+    // j, = 74
+    // k, = 75
+    // l, = 76
+    // m, = 77
+    // n, = 78
+    // o, = 79
+    // p, = 80
+    // q, = 81
+    // r, = 82
+    // s, = 83
+    // t, = 84
+    // u, = 85
+    // v, = 86
+    // w, = 87
+    // x, = 88
+    // y, = 89
+    // z, = 90
+    // Windows Key / Left ⌘ / Chromebook Search key, = 91
+    // right window key, = 92
+    // Windows Menu / Right ⌘, = 93
+    // sleep, = 95
+    // numpad 0, = 96
+    // numpad 1, = 97
+    // numpad 2, = 98
+    // numpad 3, = 99
+    // numpad 4, = 100
+    // numpad 5, = 101
+    // numpad 6, = 102
+    // numpad 7, = 103
+    // numpad 8, = 104
+    // numpad 9, = 105
+    // multiply, = 106
+    // add, = 107
+    // numpad period (firefox), = 108
+    // subtract, = 109
+    // decimal point, = 110
+    // divide, = 111
+    // f1, = 112
+    // f2, = 113
+    // f3, = 114
+    // f4, = 115
+    // f5, = 116
+    // f6, = 117
+    // f7, = 118
+    // f8, = 119
+    // f9, = 120
+    // f10, = 121
+    // f11, = 122
+    // f12, = 123
+    // f13, = 124
+    // f14, = 125
+    // f15, = 126
+    // f16, = 127
+    // f17, = 128
+    // f18, = 129
+    // f19, = 130
+    // f20, = 131
+    // f21, = 132
+    // f22, = 133
+    // f23, = 134
+    // f24, = 135
+    // f25, = 136
+    // f26, = 137
+    // f27, = 138
+    // f28, = 139
+    // f29, = 140
+    // f30, = 141
+    // f31, = 142
+    // f32, = 143
+    // num lock, = 144
+    // scroll lock, = 145
+    // airplane mode, = 151
+    // ^, = 160
+    // !, = 161
+    // ؛ (arabic semicolon), = 162
+    // #, = 163
+    // $, = 164
+    // ù, = 165
+    // page backward, = 166
+    // page forward, = 167
+    // refresh, = 168
+    // closing paren (AZERTY), = 169
+    // *, = 170
+    // ~ + * key, = 171
+    // home key, = 172
+    // minus (firefox), mute/unmute, = 173
+    // decrease volume level, = 174
+    // increase volume level, = 175
+    // next, = 176
+    // previous, = 177
+    // stop, = 178
+    // play/pause, = 179
+    // e-mail, = 180
+    // mute/unmute (firefox), = 181
+    // decrease volume level (firefox), = 182
+    // increase volume level (firefox), = 183
+    // semi-colon / ñ, = 186
+    // equal sign, = 187
+    // comma, = 188
+    // dash, = 189
+    // period, = 190
+    // forward slash / ç, = 191
+    // grave accent / ñ / æ / ö, = 192
+    // ?, / or °, = 193
+    // numpad period (chrome), = 194
+    // open bracket, = 219
+    // back slash, = 220
+    // close bracket / å, = 221
+    // single quote / ø / ä, = 222
+    // `, = 223
+    // left or right ⌘ key (firefox), = 224
+    // altgr, = 225
+    // < /git >, left back slash, = 226
+    // GNOME Compose Key, = 230
+    // ç, = 231
+    // XF86Forward, = 233
+    // XF86Back, = 234
+    // non-conversion, = 235
+    // alphanumeric, = 240
+    // hiragana/katakana, = 242
+    // half-width/full-width, = 243
+    // kanji, = 244
+    // unlock trackpad (Chrome/Edge), = 251
+    // toggle touchpad, = 255
+    NA = 0,
+    Break = 3,
+    Backspace = 8,
+    Tab = 9,
+    Clear = 12,
+    Enter = 13,
+    Shift = 16,
+    Ctrl = 17,
+    Alt = 18,
+    Pause = 19,
+    CapsLock = 20,
+    // hangul, = 21
+    // hanja, = 25
+    Escape = 27,
+    // conversion, = 28
+    // non-conversion, = 29
+    Space = 32,
+    PageUp = 33,
+    PageDown = 34,
+    End = 35,
+    Home = 36,
+    LeftArrow = 37,
+    UpArrow = 38,
+    RightArrow = 39,
+    DownArrow = 40,
+    // select, = 41
+    // print, = 42
+    // execute, = 43
+    // Print Screen, = 44
+    Insert = 45,
+    Delete = 46,
+    // help, = 47
+    Num0 = 48,
+    Num1 = 49,
+    Num2 = 50,
+    Num3 = 51,
+    Num4 = 52,
+    Num5 = 53,
+    Num6 = 54,
+    Num7 = 55,
+    Num8 = 56,
+    Num9 = 57,
+    // :, = 58
+    // semicolon (firefox), equals, = 59
+    // <, = 60
+    // equals (firefox), = 61
+    // ß, = 63
+    // @ (firefox), = 64
+    A = 65,
+    B = 66,
+    C = 67,
+    D = 68,
+    E = 69,
+    F = 70,
+    G = 71,
+    H = 72,
+    I = 73,
+    J = 74,
+    K = 75,
+    L = 76,
+    M = 77,
+    N = 78,
+    O = 79,
+    P = 80,
+    Q = 81,
+    R = 82,
+    S = 83,
+    T = 84,
+    U = 85,
+    V = 86,
+    W = 87,
+    X = 88,
+    Y = 89,
+    Z = 90,
+    LeftWindow = 91,
+    RightWindow = 92,
+    SelectKey = 93,
+    Numpad0 = 96,
+    Numpad1 = 97,
+    Numpad2 = 98,
+    Numpad3 = 99,
+    Numpad4 = 100,
+    Numpad5 = 101,
+    Numpad6 = 102,
+    Numpad7 = 103,
+    Numpad8 = 104,
+    Numpad9 = 105,
+    Multiply = 106,
+    Add = 107,
+    Subtract = 109,
+    DecimalPoint = 110,
+    Divide = 111,
+    F1 = 112,
+    F2 = 113,
+    F3 = 114,
+    F4 = 115,
+    F5 = 116,
+    F6 = 117,
+    F7 = 118,
+    F8 = 119,
+    F9 = 120,
+    F10 = 121,
+    F11 = 122,
+    F12 = 123,
+    // f13, = 124
+    // f14, = 125
+    // f15, = 126
+    // f16, = 127
+    // f17, = 128
+    // f18, = 129
+    // f19, = 130
+    // f20, = 131
+    // f21, = 132
+    // f22, = 133
+    // f23, = 134
+    // f24, = 135
+    // f25, = 136
+    // f26, = 137
+    // f27, = 138
+    // f28, = 139
+    // f29, = 140
+    // f30, = 141
+    // f31, = 142
+    // f32, = 143
+    NumLock = 144,
+    ScrollLock = 145,
+    // airplane mode, = 151
+    // ^, = 160
+    // !, = 161
+    // ؛ (arabic semicolon), = 162
+    // #, = 163
+    // $, = 164
+    // ù, = 165
+    // page backward, = 166
+    // page forward, = 167
+    // refresh, = 168
+    // closing paren (AZERTY), = 169
+    // *, = 170
+    // ~ + * key, = 171
+    // home key, = 172
+    // minus (firefox), mute/unmute, = 173
+    // decrease volume level, = 174
+    // increase volume level, = 175
+    // next, = 176
+    // previous, = 177
+    // stop, = 178
+    // play/pause, = 179
+    // e-mail, = 180
+    // mute/unmute (firefox), = 181
+    // decrease volume level (firefox), = 182
+    // increase volume level (firefox), = 183
+    Semicolon = 186,
+    EqualSign = 187,
+    Comma = 188,
+    Dash = 189,
+    Period = 190,
+    ForwardSlash = 191,
+    GraveAccent = 192,
+    // ?, / or °, = 193
+    // numpad period (chrome), = 194
+    OpenBracket = 219,
+    BackSlash = 220,
+    CloseBraket = 221,
+    SingleQuote = 222,
+    // `, = 223
+    // left or right ⌘ key (firefox), = 224
+    // altgr, = 225
+    // < /git >, left back slash, = 226
+    // GNOME Compose Key, = 230
+    // ç, = 231
+    // XF86Forward, = 233
+    // XF86Back, = 234
+    // non-conversion, = 235
+    // alphanumeric, = 240
+    // hiragana/katakana, = 242
+    // half-width/full-width, = 243
+    // kanji, = 244
+    // unlock trackpad (Chrome/Edge), = 251
+    // toggle touchpad, = 255
+    #[cfg_attr(feature = "serialize", serde(other))]
+    Unknown,
+}
diff --git a/packages/html/src/events/media.rs b/packages/html/src/events/media.rs
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/html/src/events/mouse.rs b/packages/html/src/events/mouse.rs
new file mode 100644
index 000000000..13c71a870
--- /dev/null
+++ b/packages/html/src/events/mouse.rs
@@ -0,0 +1,302 @@
+use crate::geometry::{ClientPoint, Coordinates, ElementPoint, PagePoint, ScreenPoint};
+use crate::input_data::{
+    decode_mouse_button_set, encode_mouse_button_set, MouseButton, MouseButtonSet,
+};
+use dioxus_core::{Attribute, ScopeState};
+use keyboard_types::Modifiers;
+use std::fmt::{Debug, Formatter};
+
+/// A synthetic event that wraps a web-style [`MouseEvent`](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent)
+#[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+#[derive(Clone)]
+/// Data associated with a mouse event
+///
+/// Do not use the deprecated fields; they may change or become private in the future.
+pub struct MouseEvent {
+    /// True if the alt key was down when the mouse event was fired.
+    #[deprecated(since = "0.3.0", note = "use modifiers() instead")]
+    pub alt_key: bool,
+
+    /// The button number that was pressed (if applicable) when the mouse event was fired.
+    #[deprecated(since = "0.3.0", note = "use trigger_button() instead")]
+    pub button: i16,
+
+    /// Indicates which buttons are pressed on the mouse (or other input device) when a mouse event is triggered.
+    ///
+    /// Each button that can be pressed is represented by a given number (see below). If more than one button is pressed, the button values are added together to produce a new number. For example, if the secondary (2) and auxiliary (4) buttons are pressed simultaneously, the value is 6 (i.e., 2 + 4).
+    ///
+    /// - 1: Primary button (usually the left button)
+    /// - 2: Secondary button (usually the right button)
+    /// - 4: Auxiliary button (usually the mouse wheel button or middle button)
+    /// - 8: 4th button (typically the "Browser Back" button)
+    /// - 16 : 5th button (typically the "Browser Forward" button)
+    #[deprecated(since = "0.3.0", note = "use held_buttons() instead")]
+    pub buttons: u16,
+
+    /// The horizontal coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page).
+    ///
+    /// For example, clicking on the left edge of the viewport will always result in a mouse event with a clientX value of 0, regardless of whether the page is scrolled horizontally.
+    #[deprecated(since = "0.3.0", note = "use client_coordinates() instead")]
+    pub client_x: i32,
+
+    /// The vertical coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page).
+    ///
+    /// For example, clicking on the top edge of the viewport will always result in a mouse event with a clientY value of 0, regardless of whether the page is scrolled vertically.
+    #[deprecated(since = "0.3.0", note = "use client_coordinates() instead")]
+    pub client_y: i32,
+
+    /// True if the control key was down when the mouse event was fired.
+    #[deprecated(since = "0.3.0", note = "use modifiers() instead")]
+    pub ctrl_key: bool,
+
+    /// True if the meta key was down when the mouse event was fired.
+    #[deprecated(since = "0.3.0", note = "use modifiers() instead")]
+    pub meta_key: bool,
+
+    /// The offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node.
+    #[deprecated(since = "0.3.0", note = "use element_coordinates() instead")]
+    pub offset_x: i32,
+
+    /// The offset in the Y coordinate of the mouse pointer between that event and the padding edge of the target node.
+    #[deprecated(since = "0.3.0", note = "use element_coordinates() instead")]
+    pub offset_y: i32,
+
+    /// The X (horizontal) coordinate (in pixels) of the mouse, relative to the left edge of the entire document. This includes any portion of the document not currently visible.
+    ///
+    /// Being based on the edge of the document as it is, this property takes into account any horizontal scrolling of the page. For example, if the page is scrolled such that 200 pixels of the left side of the document are scrolled out of view, and the mouse is clicked 100 pixels inward from the left edge of the view, the value returned by pageX will be 300.
+    #[deprecated(since = "0.3.0", note = "use page_coordinates() instead")]
+    pub page_x: i32,
+
+    /// The Y (vertical) coordinate in pixels of the event relative to the whole document.
+    ///
+    /// See `page_x`.
+    #[deprecated(since = "0.3.0", note = "use page_coordinates() instead")]
+    pub page_y: i32,
+
+    /// The X coordinate of the mouse pointer in global (screen) coordinates.
+    #[deprecated(since = "0.3.0", note = "use screen_coordinates() instead")]
+    pub screen_x: i32,
+
+    /// The Y coordinate of the mouse pointer in global (screen) coordinates.
+    #[deprecated(since = "0.3.0", note = "use screen_coordinates() instead")]
+    pub screen_y: i32,
+
+    /// True if the shift key was down when the mouse event was fired.
+    #[deprecated(since = "0.3.0", note = "use modifiers() instead")]
+    pub shift_key: bool,
+}
+
+impl MouseEvent {
+    /// Construct MouseData with the specified properties
+    ///
+    /// Note: the current implementation truncates coordinates. In the future, when we change the internal representation, it may also support a fractional part.
+    pub fn new(
+        coordinates: Coordinates,
+        trigger_button: Option<MouseButton>,
+        held_buttons: MouseButtonSet,
+        modifiers: Modifiers,
+    ) -> Self {
+        let alt_key = modifiers.contains(Modifiers::ALT);
+        let ctrl_key = modifiers.contains(Modifiers::CONTROL);
+        let meta_key = modifiers.contains(Modifiers::META);
+        let shift_key = modifiers.contains(Modifiers::SHIFT);
+
+        let [client_x, client_y]: [i32; 2] = coordinates.client().cast().into();
+        let [offset_x, offset_y]: [i32; 2] = coordinates.element().cast().into();
+        let [page_x, page_y]: [i32; 2] = coordinates.page().cast().into();
+        let [screen_x, screen_y]: [i32; 2] = coordinates.screen().cast().into();
+
+        #[allow(deprecated)]
+        Self {
+            alt_key,
+            ctrl_key,
+            meta_key,
+            shift_key,
+
+            button: trigger_button.map_or(0, |b| b.into_web_code()),
+            buttons: encode_mouse_button_set(held_buttons),
+
+            client_x,
+            client_y,
+            offset_x,
+            offset_y,
+            page_x,
+            page_y,
+            screen_x,
+            screen_y,
+        }
+    }
+
+    /// The event's coordinates relative to the application's viewport (as opposed to the coordinate within the page).
+    ///
+    /// For example, clicking in the top left corner of the viewport will always result in a mouse event with client coordinates (0., 0.), regardless of whether the page is scrolled horizontally.
+    pub fn client_coordinates(&self) -> ClientPoint {
+        #[allow(deprecated)]
+        ClientPoint::new(self.client_x.into(), self.client_y.into())
+    }
+
+    /// The event's coordinates relative to the padding edge of the target element
+    ///
+    /// For example, clicking in the top left corner of an element will result in element coordinates (0., 0.)
+    pub fn element_coordinates(&self) -> ElementPoint {
+        #[allow(deprecated)]
+        ElementPoint::new(self.offset_x.into(), self.offset_y.into())
+    }
+
+    /// The event's coordinates relative to the entire document. This includes any portion of the document not currently visible.
+    ///
+    /// For example, if the page is scrolled 200 pixels to the right and 300 pixels down, clicking in the top left corner of the viewport would result in page coordinates (200., 300.)
+    pub fn page_coordinates(&self) -> PagePoint {
+        #[allow(deprecated)]
+        PagePoint::new(self.page_x.into(), self.page_y.into())
+    }
+
+    /// The event's coordinates relative to the entire screen. This takes into account the window's offset.
+    pub fn screen_coordinates(&self) -> ScreenPoint {
+        #[allow(deprecated)]
+        ScreenPoint::new(self.screen_x.into(), self.screen_y.into())
+    }
+
+    pub fn coordinates(&self) -> Coordinates {
+        Coordinates::new(
+            self.screen_coordinates(),
+            self.client_coordinates(),
+            self.element_coordinates(),
+            self.page_coordinates(),
+        )
+    }
+
+    /// The set of modifier keys which were pressed when the event occurred
+    pub fn modifiers(&self) -> Modifiers {
+        let mut modifiers = Modifiers::empty();
+
+        #[allow(deprecated)]
+        {
+            if self.alt_key {
+                modifiers.insert(Modifiers::ALT);
+            }
+            if self.ctrl_key {
+                modifiers.insert(Modifiers::CONTROL);
+            }
+            if self.meta_key {
+                modifiers.insert(Modifiers::META);
+            }
+            if self.shift_key {
+                modifiers.insert(Modifiers::SHIFT);
+            }
+        }
+
+        modifiers
+    }
+
+    /// The set of mouse buttons which were held when the event occurred.
+    pub fn held_buttons(&self) -> MouseButtonSet {
+        #[allow(deprecated)]
+        decode_mouse_button_set(self.buttons)
+    }
+
+    /// The mouse button that triggered the event
+    ///
+    // todo the following is kind of bad; should we just return None when the trigger_button is unreliable (and frankly irrelevant)? i guess we would need the event_type here
+    /// This is only guaranteed to indicate which button was pressed during events caused by pressing or releasing a button. As such, it is not reliable for events such as mouseenter, mouseleave, mouseover, mouseout, or mousemove. For example, a value of MouseButton::Primary may also indicate that no button was pressed.
+    pub fn trigger_button(&self) -> Option<MouseButton> {
+        #[allow(deprecated)]
+        Some(MouseButton::from_web_code(self.button))
+    }
+}
+
+impl Debug for MouseEvent {
+    fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("MouseData")
+            .field("coordinates", &self.coordinates())
+            .field("modifiers", &self.modifiers())
+            .field("held_buttons", &self.held_buttons())
+            .field("trigger_button", &self.trigger_button())
+            .finish()
+    }
+}
+
+impl_event! {
+    MouseEvent;
+
+    /// Execute a callback when a button is clicked.
+    ///
+    /// ## Description
+    ///
+    /// An element receives a click event when a pointing device button (such as a mouse's primary mouse button)
+    /// is both pressed and released while the pointer is located inside the element.
+    ///
+    /// - Bubbles: Yes
+    /// - Cancelable: Yes
+    /// - Interface(InteData): [`MouseEvent`]
+    ///
+    /// If the button is pressed on one element and the pointer is moved outside the element before the button
+    /// is released, the event is fired on the most specific ancestor element that contained both elements.
+    /// `click` fires after both the `mousedown` and `mouseup` events have fired, in that order.
+    ///
+    /// ## Example
+    /// ```rust, ignore
+    /// rsx!( button { "click me", onclick: move |_| log::info!("Clicked!`") } )
+    /// ```
+    ///
+    /// ## Reference
+    /// - <https://www.w3schools.com/tags/ev_onclick.asp>
+    /// - <https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event>
+    onclick
+
+    /// oncontextmenu
+    oncontextmenu
+
+    /// ondoubleclick
+    ondoubleclick
+
+    /// ondoubleclick
+    ondblclick
+
+    /// ondrag
+    ondrag
+
+    /// ondragend
+    ondragend
+
+    /// ondragenter
+    ondragenter
+
+    /// ondragexit
+    ondragexit
+
+    /// ondragleave
+    ondragleave
+
+    /// ondragover
+    ondragover
+
+    /// ondragstart
+    ondragstart
+
+    /// ondrop
+    ondrop
+
+    /// onmousedown
+    onmousedown
+
+    /// onmouseenter
+    onmouseenter
+
+    /// onmouseleave
+    onmouseleave
+
+    /// onmousemove
+    onmousemove
+
+    /// onmouseout
+    onmouseout
+
+    /// onmouseover
+    ///
+    /// Triggered when the users's mouse hovers over an element.
+    onmouseover
+
+    /// onmouseup
+    onmouseup
+}
diff --git a/packages/html/src/events/pointer.rs b/packages/html/src/events/pointer.rs
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/html/src/events/selection.rs b/packages/html/src/events/selection.rs
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/html/src/events/toggle.rs b/packages/html/src/events/toggle.rs
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/html/src/events/touch.rs b/packages/html/src/events/touch.rs
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/html/src/events/transition.rs b/packages/html/src/events/transition.rs
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/html/src/events/wheel.rs b/packages/html/src/events/wheel.rs
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/html/src/lib.rs b/packages/html/src/lib.rs
index cb356af7e..b8750755a 100644
--- a/packages/html/src/lib.rs
+++ b/packages/html/src/lib.rs
@@ -14,12 +14,12 @@
 //! Currently, we don't validate for structures, but do validate attributes.
 
 mod elements;
-mod events;
+pub mod events;
 pub mod geometry;
 mod global_attributes;
 pub mod input_data;
-#[cfg(feature = "wasm-bind")]
-mod web_sys_bind;
+// #[cfg(feature = "wasm-bind")]
+// mod web_sys_bind;
 
 pub use elements::*;
 pub use events::*;
diff --git a/packages/rsx/src/element.rs b/packages/rsx/src/element.rs
index 915fb26e5..55792cc5a 100644
--- a/packages/rsx/src/element.rs
+++ b/packages/rsx/src/element.rs
@@ -284,7 +284,7 @@ impl ToTokens for ElementAttrNamed {
             }
             ElementAttr::EventTokens { name, tokens } => {
                 quote! {
-                    dioxus_elements::on::#name(__cx, #tokens)
+                    dioxus_elements::events::#name(__cx, #tokens)
                 }
             }
         });
diff --git a/packages/rsx/src/lib.rs b/packages/rsx/src/lib.rs
index 876fcc745..6d417bdfd 100644
--- a/packages/rsx/src/lib.rs
+++ b/packages/rsx/src/lib.rs
@@ -226,6 +226,7 @@ impl<'a> DynamicContext<'a> {
                     out
                 });
 
+                let opt = el.children.len() == 1;
                 let children = quote! { #(#children),* };
 
                 quote! {
@@ -234,6 +235,7 @@ impl<'a> DynamicContext<'a> {
                         namespace: dioxus_elements::#el_name::NAME_SPACE,
                         attrs: &[ #attrs ],
                         children: &[ #children ],
+                        inner_opt: #opt,
                     }
                 }
             }
diff --git a/packages/ssr/src/cache.rs b/packages/ssr/src/cache.rs
new file mode 100644
index 000000000..0e7d585ff
--- /dev/null
+++ b/packages/ssr/src/cache.rs
@@ -0,0 +1,98 @@
+use dioxus_core::prelude::*;
+use std::fmt::Write;
+
+pub struct StringCache {
+    pub segments: Vec<Segment>,
+}
+
+#[derive(Default)]
+pub struct StringChain {
+    pub segments: Vec<Segment>,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Hash, PartialOrd, Ord)]
+pub enum Segment {
+    Attr(usize),
+    Node(usize),
+    PreRendered(String),
+}
+
+impl std::fmt::Write for StringChain {
+    fn write_str(&mut self, s: &str) -> std::fmt::Result {
+        match self.segments.last_mut() {
+            Some(Segment::PreRendered(s2)) => s2.push_str(s),
+            _ => self.segments.push(Segment::PreRendered(s.to_string())),
+        }
+
+        Ok(())
+    }
+}
+
+impl StringCache {
+    pub fn from_template(template: &VNode) -> Result<Self, std::fmt::Error> {
+        let mut chain = StringChain::default();
+
+        let mut cur_path = vec![];
+
+        for (root_idx, root) in template.template.roots.iter().enumerate() {
+            Self::recurse(root, &mut cur_path, root_idx, &mut chain)?;
+        }
+
+        Ok(Self {
+            segments: chain.segments,
+        })
+    }
+
+    fn recurse(
+        root: &TemplateNode,
+        cur_path: &mut Vec<usize>,
+        root_idx: usize,
+        chain: &mut StringChain,
+    ) -> Result<(), std::fmt::Error> {
+        match root {
+            TemplateNode::Element {
+                tag,
+                attrs,
+                children,
+                ..
+            } => {
+                cur_path.push(root_idx);
+                write!(chain, "<{}", tag)?;
+                for attr in *attrs {
+                    match attr {
+                        TemplateAttribute::Static { name, value, .. } => {
+                            write!(chain, " {}=\"{}\"", name, value)?;
+                        }
+                        TemplateAttribute::Dynamic(index) => {
+                            chain.segments.push(Segment::Attr(*index))
+                        }
+                    }
+                }
+                if children.len() == 0 && tag_is_self_closing(tag) {
+                    write!(chain, "/>")?;
+                } else {
+                    write!(chain, ">")?;
+                    for child in *children {
+                        Self::recurse(child, cur_path, root_idx, chain)?;
+                    }
+                    write!(chain, "</{}>", tag)?;
+                }
+                cur_path.pop();
+            }
+            TemplateNode::Text(text) => write!(chain, "{}", text)?,
+            TemplateNode::Dynamic(idx) | TemplateNode::DynamicText(idx) => {
+                chain.segments.push(Segment::Node(*idx))
+            }
+        }
+
+        Ok(())
+    }
+}
+
+fn tag_is_self_closing(tag: &str) -> bool {
+    match tag {
+        "area" | "base" | "br" | "col" | "embed" | "hr" | "img" | "input" | "link" | "meta"
+        | "param" | "source" | "track" | "wbr" => true,
+        _ => false,
+    }
+}
diff --git a/packages/ssr/src/config.rs b/packages/ssr/src/config.rs
new file mode 100644
index 000000000..73d21f4d4
--- /dev/null
+++ b/packages/ssr/src/config.rs
@@ -0,0 +1,38 @@
+#[derive(Clone, Debug, Default)]
+pub struct SsrConfig {
+    /// currently not supported - control if we indent the HTML output
+    indent: bool,
+
+    /// Control if elements are written onto a new line
+    newline: bool,
+
+    /// Choose to write ElementIDs into elements so the page can be re-hydrated later on
+    pre_render: bool,
+
+    // Currently not implemented
+    // Don't proceed onto new components. Instead, put the name of the component.
+    // TODO: components don't have names :(
+    skip_components: bool,
+}
+
+impl SsrConfig {
+    pub fn indent(mut self, a: bool) -> Self {
+        self.indent = a;
+        self
+    }
+
+    pub fn newline(mut self, a: bool) -> Self {
+        self.newline = a;
+        self
+    }
+
+    pub fn pre_render(mut self, a: bool) -> Self {
+        self.pre_render = a;
+        self
+    }
+
+    pub fn skip_components(mut self, a: bool) -> Self {
+        self.skip_components = a;
+        self
+    }
+}
diff --git a/packages/ssr/src/helpers.rs b/packages/ssr/src/helpers.rs
new file mode 100644
index 000000000..8b1378917
--- /dev/null
+++ b/packages/ssr/src/helpers.rs
@@ -0,0 +1 @@
+
diff --git a/packages/ssr/src/lib.rs b/packages/ssr/src/lib.rs
index 6407d4de8..ee3608ab7 100644
--- a/packages/ssr/src/lib.rs
+++ b/packages/ssr/src/lib.rs
@@ -1,510 +1,9 @@
 #![doc = include_str!("../README.md")]
 
-use std::fmt::{Display, Formatter, Write};
+mod cache;
+pub mod config;
+pub mod helpers;
+pub mod renderer;
 pub mod template;
-
-use dioxus_core::exports::bumpalo;
-
-use dioxus_core::*;
-
-fn app(_cx: Scope) -> Element {
-    None
-}
-
-pub struct SsrRenderer {
-    vdom: VirtualDom,
-    cfg: SsrConfig,
-}
-
-impl SsrRenderer {
-    pub fn new(cfg: impl FnOnce(SsrConfig) -> SsrConfig) -> Self {
-        Self {
-            cfg: cfg(SsrConfig::default()),
-            vdom: VirtualDom::new(app),
-        }
-    }
-
-    pub fn render_lazy<'a>(&'a mut self, f: LazyNodes<'a, '_>) -> String {
-        let scope = self.vdom.base_scope();
-        let root = f.call(scope);
-        format!(
-            "{:}",
-            TextRenderer {
-                cfg: self.cfg.clone(),
-                root: &root,
-                vdom: Some(&self.vdom),
-            }
-        )
-    }
-}
-
-#[allow(clippy::needless_lifetimes)]
-pub fn render_lazy<'a>(f: LazyNodes<'a, '_>) -> String {
-    let vdom = VirtualDom::new(app);
-    let scope: *const ScopeState = vdom.base_scope();
-
-    // Safety
-    //
-    // The lifetimes bounds on LazyNodes are really complicated - they need to support the nesting restrictions in
-    // regular component usage. The <'a> lifetime is used to enforce that all calls of IntoVnode use the same allocator.
-    //
-    // When LazyNodes are provided, they are FnOnce, but do not come with a allocator selected to borrow from. The <'a>
-    // lifetime is therefore longer than the lifetime of the allocator which doesn't exist... yet.
-    //
-    // Therefore, we cast our local bump allocator to the right lifetime. This is okay because our usage of the bump
-    // arena is *definitely* shorter than the <'a> lifetime, and we return *owned* data - not borrowed data.
-    let scope = unsafe { &*scope };
-    let root = f.call(scope);
-
-    let vdom = Some(&vdom);
-
-    let ssr_renderer = TextRenderer {
-        cfg: SsrConfig::default(),
-        root: &root,
-        vdom,
-    };
-    let r = ssr_renderer.to_string();
-    drop(ssr_renderer);
-    r
-}
-
-pub fn render_vdom(dom: &VirtualDom) -> String {
-    format!("{:}", TextRenderer::from_vdom(dom, SsrConfig::default()))
-}
-
-pub fn pre_render_vdom(dom: &VirtualDom) -> String {
-    format!(
-        "{:}",
-        TextRenderer::from_vdom(dom, SsrConfig::default().pre_render(true))
-    )
-}
-
-pub fn render_vdom_cfg(dom: &VirtualDom, cfg: impl FnOnce(SsrConfig) -> SsrConfig) -> String {
-    format!(
-        "{:}",
-        TextRenderer::from_vdom(dom, cfg(SsrConfig::default()))
-    )
-}
-
-pub fn render_vdom_scope(vdom: &VirtualDom, scope: ScopeId) -> Option<String> {
-    Some(format!(
-        "{:}",
-        TextRenderer {
-            cfg: SsrConfig::default(),
-            root: vdom.get_scope(scope).unwrap().root_node(),
-            vdom: Some(vdom),
-        }
-    ))
-}
-
-/// A configurable text renderer for the Dioxus VirtualDOM.
-///
-///
-/// ## Details
-///
-/// This uses the `Formatter` infrastructure so you can write into anything that supports `write_fmt`. We can't accept
-/// any generic writer, so you need to "Display" the text renderer. This is done through `format!` or `format_args!`
-///
-/// ## Example
-/// ```ignore
-/// static App: Component = |cx| cx.render(rsx!(div { "hello world" }));
-/// let mut vdom = VirtualDom::new(App);
-/// vdom.rebuild();
-///
-/// let renderer = TextRenderer::new(&vdom);
-/// let output = format!("{}", renderer);
-/// assert_eq!(output, "<div>hello world</div>");
-/// ```
-pub struct TextRenderer<'a, 'b, 'c> {
-    vdom: Option<&'c VirtualDom>,
-    root: &'b VNode<'a>,
-    cfg: SsrConfig,
-}
-
-impl<'a: 'c, 'c> Display for TextRenderer<'a, '_, 'c> {
-    fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
-        let mut last_node_was_text = false;
-        self.html_render(self.root, f, 0, &mut last_node_was_text)
-    }
-}
-
-impl<'a> TextRenderer<'a, '_, 'a> {
-    pub fn from_vdom(vdom: &'a VirtualDom, cfg: SsrConfig) -> Self {
-        Self {
-            cfg,
-            root: vdom.base_scope().root_node(),
-            vdom: Some(vdom),
-        }
-    }
-}
-
-impl<'a: 'c, 'c> TextRenderer<'a, '_, 'c> {
-    fn html_render(
-        &self,
-        node: &VNode,
-        f: &mut impl Write,
-        il: u16,
-        last_node_was_text: &mut bool,
-    ) -> std::fmt::Result {
-        // match &node {
-        //     VNode::Text(text) => {
-        //         if *last_node_was_text {
-        //             write!(f, "<!--spacer-->")?;
-        //         }
-
-        //         if self.cfg.indent {
-        //             for _ in 0..il {
-        //                 write!(f, "    ")?;
-        //             }
-        //         }
-
-        //         *last_node_was_text = true;
-
-        //         write!(f, "{}", text.text)?
-        //     }
-        //     VNode::Element(el) => {
-        //         *last_node_was_text = false;
-
-        //         if self.cfg.indent {
-        //             for _ in 0..il {
-        //                 write!(f, "    ")?;
-        //             }
-        //         }
-
-        //         write!(f, "<{}", el.tag)?;
-
-        //         let inner_html = render_attributes(el.attributes.iter(), f)?;
-
-        //         match self.cfg.newline {
-        //             true => writeln!(f, ">")?,
-        //             false => write!(f, ">")?,
-        //         }
-
-        //         if let Some(inner_html) = inner_html {
-        //             write!(f, "{}", inner_html)?;
-        //         } else {
-        //             let mut last_node_was_text = false;
-        //             for child in el.children {
-        //                 self.html_render(child, f, il + 1, &mut last_node_was_text)?;
-        //             }
-        //         }
-
-        //         if self.cfg.newline {
-        //             writeln!(f)?;
-        //         }
-        //         if self.cfg.indent {
-        //             for _ in 0..il {
-        //                 write!(f, "    ")?;
-        //             }
-        //         }
-
-        //         write!(f, "</{}>", el.tag)?;
-        //         if self.cfg.newline {
-        //             writeln!(f)?;
-        //         }
-        //     }
-        //     VNode::Fragment(frag) => match frag.children.len() {
-        //         0 => {
-        //             *last_node_was_text = false;
-        //             if self.cfg.indent {
-        //                 for _ in 0..il {
-        //                     write!(f, "    ")?;
-        //                 }
-        //             }
-        //             write!(f, "<!--placeholder-->")?;
-        //         }
-        //         _ => {
-        //             for child in frag.children {
-        //                 self.html_render(child, f, il + 1, last_node_was_text)?;
-        //             }
-        //         }
-        //     },
-        //     VNode::Component(vcomp) => {
-        //         let idx = vcomp.scope.get().unwrap();
-
-        //         if let (Some(vdom), false) = (self.vdom, self.cfg.skip_components) {
-        //             let new_node = vdom.get_scope(idx).unwrap().root_node();
-        //             self.html_render(new_node, f, il + 1, last_node_was_text)?;
-        //         } else {
-        //         }
-        //     }
-        //     VNode::Template(t) => {
-        //         if let Some(vdom) = self.vdom {
-        //             todo!()
-        //         } else {
-        //             panic!("Cannot render template without vdom");
-        //         }
-        //     }
-        //     VNode::Placeholder(_) => {
-        //         todo!()
-        //     }
-        // }
-        Ok(())
-    }
-
-    // fn render_template_node(
-    //     &self,
-    //     node: &VTemplate,
-    //     f: &mut impl Write,
-    //     last_node_was_text: &mut bool,
-    //     il: u16,
-    // ) -> std::fmt::Result {
-    //     match &node.node_type {
-    //         TemplateNodeType::Element(el) => {
-    //             *last_node_was_text = false;
-
-    //             if self.cfg.indent {
-    //                 for _ in 0..il {
-    //                     write!(f, "    ")?;
-    //                 }
-    //             }
-
-    //             write!(f, "<{}", el.tag)?;
-
-    //             let mut inner_html = None;
-
-    //             let mut attr_iter = el.attributes.as_ref().iter().peekable();
-
-    //             while let Some(attr) = attr_iter.next() {
-    //                 match attr.attribute.namespace {
-    //                     None => {
-    //                         if attr.attribute.name == "dangerous_inner_html" {
-    //                             inner_html = {
-    //                                 let text = match &attr.value {
-    //                                     TemplateAttributeValue::Static(val) => {
-    //                                         val.allocate(&self.bump).as_text().unwrap()
-    //                                     }
-    //                                     TemplateAttributeValue::Dynamic(idx) => dynamic_context
-    //                                         .resolve_attribute(*idx)
-    //                                         .as_text()
-    //                                         .unwrap(),
-    //                                 };
-    //                                 Some(text)
-    //                             }
-    //                         } else if is_boolean_attribute(attr.attribute.name) {
-    //                             match &attr.value {
-    //                                 TemplateAttributeValue::Static(val) => {
-    //                                     let val = val.allocate(&self.bump);
-    //                                     if val.is_truthy() {
-    //                                         write!(f, " {}=\"{}\"", attr.attribute.name, val)?
-    //                                     }
-    //                                 }
-    //                                 TemplateAttributeValue::Dynamic(idx) => {
-    //                                     let val = dynamic_context.resolve_attribute(*idx);
-    //                                     if val.is_truthy() {
-    //                                         write!(f, " {}=\"{}\"", attr.attribute.name, val)?
-    //                                     }
-    //                                 }
-    //                             }
-    //                         } else {
-    //                             match &attr.value {
-    //                                 TemplateAttributeValue::Static(val) => {
-    //                                     let val = val.allocate(&self.bump);
-    //                                     write!(f, " {}=\"{}\"", attr.attribute.name, val)?
-    //                                 }
-    //                                 TemplateAttributeValue::Dynamic(idx) => {
-    //                                     let val = dynamic_context.resolve_attribute(*idx);
-    //                                     write!(f, " {}=\"{}\"", attr.attribute.name, val)?
-    //                                 }
-    //                             }
-    //                         }
-    //                     }
-
-    //                     Some(ns) => {
-    //                         // write the opening tag
-    //                         write!(f, " {}=\"", ns)?;
-    //                         let mut cur_ns_el = attr;
-    //                         loop {
-    //                             match &attr.value {
-    //                                 TemplateAttributeValue::Static(val) => {
-    //                                     let val = val.allocate(&self.bump);
-    //                                     write!(f, "{}:{};", cur_ns_el.attribute.name, val)?;
-    //                                 }
-    //                                 TemplateAttributeValue::Dynamic(idx) => {
-    //                                     let val = dynamic_context.resolve_attribute(*idx);
-    //                                     write!(f, "{}:{};", cur_ns_el.attribute.name, val)?;
-    //                                 }
-    //                             }
-    //                             match attr_iter.peek() {
-    //                                 Some(next_attr)
-    //                                     if next_attr.attribute.namespace == Some(ns) =>
-    //                                 {
-    //                                     cur_ns_el = attr_iter.next().unwrap();
-    //                                 }
-    //                                 _ => break,
-    //                             }
-    //                         }
-    //                         // write the closing tag
-    //                         write!(f, "\"")?;
-    //                     }
-    //                 }
-    //             }
-
-    //             match self.cfg.newline {
-    //                 true => writeln!(f, ">")?,
-    //                 false => write!(f, ">")?,
-    //             }
-
-    //             if let Some(inner_html) = inner_html {
-    //                 write!(f, "{}", inner_html)?;
-    //             } else {
-    //                 let mut last_node_was_text = false;
-    //                 for child in el.children.as_ref() {
-    //                     self.render_template_node(
-    //                         template_nodes,
-    //                         &template_nodes.as_ref()[child.0],
-    //                         dynamic_context,
-    //                         f,
-    //                         &mut last_node_was_text,
-    //                         il + 1,
-    //                     )?;
-    //                 }
-    //             }
-
-    //             if self.cfg.newline {
-    //                 writeln!(f)?;
-    //             }
-    //             if self.cfg.indent {
-    //                 for _ in 0..il {
-    //                     write!(f, "    ")?;
-    //                 }
-    //             }
-
-    //             write!(f, "</{}>", el.tag)?;
-    //             if self.cfg.newline {
-    //                 writeln!(f)?;
-    //             }
-    //         }
-    //         TemplateNodeType::Text(txt) => {
-    //             if *last_node_was_text {
-    //                 write!(f, "<!--spacer-->")?;
-    //             }
-
-    //             if self.cfg.indent {
-    //                 for _ in 0..il {
-    //                     write!(f, "    ")?;
-    //                 }
-    //             }
-
-    //             *last_node_was_text = true;
-
-    //             let text = dynamic_context.resolve_text(txt);
-
-    //             write!(f, "{}", text)?
-    //         }
-    //         TemplateNodeType::DynamicNode(idx) => {
-    //             let node = dynamic_context.resolve_node(*idx);
-    //             self.html_render(node, f, il, last_node_was_text)?;
-    //         }
-    //     }
-    //     Ok(())
-    // }
-}
-
-fn render_attributes<'a, 'b: 'a>(
-    attrs: impl Iterator<Item = &'a Attribute<'b>>,
-    f: &mut impl Write,
-) -> Result<Option<&'b str>, std::fmt::Error> {
-    let mut inner_html = None;
-    let mut attr_iter = attrs.peekable();
-
-    // while let Some(attr) = attr_iter.next() {
-    //     match attr.namespace {
-    //         None => {
-    //             if attr.name == "dangerous_inner_html" {
-    //                 inner_html = Some(attr.value.as_text().unwrap())
-    //             } else {
-    //                 if is_boolean_attribute(attr.name) && !attr.value.is_truthy() {
-    //                     continue;
-    //                 }
-    //                 write!(f, " {}=\"{}\"", attr.name, attr.value)?
-    //             }
-    //         }
-    //         Some(ns) => {
-    //             // write the opening tag
-    //             write!(f, " {}=\"", ns)?;
-    //             let mut cur_ns_el = attr;
-    //             loop {
-    //                 write!(f, "{}:{};", cur_ns_el.name, cur_ns_el.value)?;
-    //                 match attr_iter.peek() {
-    //                     Some(next_attr) if next_attr.namespace == Some(ns) => {
-    //                         cur_ns_el = attr_iter.next().unwrap();
-    //                     }
-    //                     _ => break,
-    //                 }
-    //             }
-    //             // write the closing tag
-    //             write!(f, "\"")?;
-    //         }
-    //     }
-    // }
-    Ok(inner_html)
-}
-
-fn is_boolean_attribute(attribute: &'static str) -> bool {
-    matches!(
-        attribute,
-        "allowfullscreen"
-            | "allowpaymentrequest"
-            | "async"
-            | "autofocus"
-            | "autoplay"
-            | "checked"
-            | "controls"
-            | "default"
-            | "defer"
-            | "disabled"
-            | "formnovalidate"
-            | "hidden"
-            | "ismap"
-            | "itemscope"
-            | "loop"
-            | "multiple"
-            | "muted"
-            | "nomodule"
-            | "novalidate"
-            | "open"
-            | "playsinline"
-            | "readonly"
-            | "required"
-            | "reversed"
-            | "selected"
-            | "truespeed"
-    )
-}
-
-#[derive(Clone, Debug, Default)]
-pub struct SsrConfig {
-    /// currently not supported - control if we indent the HTML output
-    indent: bool,
-
-    /// Control if elements are written onto a new line
-    newline: bool,
-
-    /// Choose to write ElementIDs into elements so the page can be re-hydrated later on
-    pre_render: bool,
-
-    // Currently not implemented
-    // Don't proceed onto new components. Instead, put the name of the component.
-    // TODO: components don't have names :(
-    skip_components: bool,
-}
-
-impl SsrConfig {
-    pub fn indent(mut self, a: bool) -> Self {
-        self.indent = a;
-        self
-    }
-    pub fn newline(mut self, a: bool) -> Self {
-        self.newline = a;
-        self
-    }
-    pub fn pre_render(mut self, a: bool) -> Self {
-        self.pre_render = a;
-        self
-    }
-    pub fn skip_components(mut self, a: bool) -> Self {
-        self.skip_components = a;
-        self
-    }
-}
+pub use helpers::*;
+pub use template::SsrRender;
diff --git a/packages/ssr/src/renderer.rs b/packages/ssr/src/renderer.rs
new file mode 100644
index 000000000..c41e6ec0a
--- /dev/null
+++ b/packages/ssr/src/renderer.rs
@@ -0,0 +1,146 @@
+// use dioxus_core::VirtualDom;
+
+// use crate::config::SsrConfig;
+
+// pub struct SsrRenderer {
+//     vdom: VirtualDom,
+//     cfg: SsrConfig,
+// }
+
+// impl Default for SsrRenderer {
+//     fn default() -> Self {
+//         Self::new(SsrConfig::default())
+//     }
+// }
+
+// impl SsrRenderer {
+//     pub fn new(cfg: SsrConfig) -> Self {
+//         Self {
+//             vdom: VirtualDom::new(app),
+//             cfg,
+//         }
+//     }
+
+//     pub fn render_lazy<'a>(&'a mut self, f: LazyNodes<'a, '_>) -> String {
+//         let scope = self.vdom.base_scope();
+//         let root = f.call(scope);
+//         format!(
+//             "{:}",
+//             TextRenderer {
+//                 cfg: self.cfg.clone(),
+//                 root: &root,
+//                 vdom: Some(&self.vdom),
+//             }
+//         )
+//     }
+
+//     fn html_render(
+//         &self,
+//         node: &VNode,
+//         f: &mut impl Write,
+//         il: u16,
+//         last_node_was_text: &mut bool,
+//     ) -> std::fmt::Result {
+//         // match &node {
+//         //     VNode::Text(text) => {
+//         //         if *last_node_was_text {
+//         //             write!(f, "<!--spacer-->")?;
+//         //         }
+
+//         //         if self.cfg.indent {
+//         //             for _ in 0..il {
+//         //                 write!(f, "    ")?;
+//         //             }
+//         //         }
+
+//         //         *last_node_was_text = true;
+
+//         //         write!(f, "{}", text.text)?
+//         //     }
+//         //     VNode::Element(el) => {
+//         //         *last_node_was_text = false;
+
+//         //         if self.cfg.indent {
+//         //             for _ in 0..il {
+//         //                 write!(f, "    ")?;
+//         //             }
+//         //         }
+
+//         //         write!(f, "<{}", el.tag)?;
+
+//         //         let inner_html = render_attributes(el.attributes.iter(), f)?;
+
+//         //         match self.cfg.newline {
+//         //             true => writeln!(f, ">")?,
+//         //             false => write!(f, ">")?,
+//         //         }
+
+//         //         if let Some(inner_html) = inner_html {
+//         //             write!(f, "{}", inner_html)?;
+//         //         } else {
+//         //             let mut last_node_was_text = false;
+//         //             for child in el.children {
+//         //                 self.html_render(child, f, il + 1, &mut last_node_was_text)?;
+//         //             }
+//         //         }
+
+//         //         if self.cfg.newline {
+//         //             writeln!(f)?;
+//         //         }
+//         //         if self.cfg.indent {
+//         //             for _ in 0..il {
+//         //                 write!(f, "    ")?;
+//         //             }
+//         //         }
+
+//         //         write!(f, "</{}>", el.tag)?;
+//         //         if self.cfg.newline {
+//         //             writeln!(f)?;
+//         //         }
+//         //     }
+//         //     VNode::Fragment(frag) => match frag.children.len() {
+//         //         0 => {
+//         //             *last_node_was_text = false;
+//         //             if self.cfg.indent {
+//         //                 for _ in 0..il {
+//         //                     write!(f, "    ")?;
+//         //                 }
+//         //             }
+//         //             write!(f, "<!--placeholder-->")?;
+//         //         }
+//         //         _ => {
+//         //             for child in frag.children {
+//         //                 self.html_render(child, f, il + 1, last_node_was_text)?;
+//         //             }
+//         //         }
+//         //     },
+//         //     VNode::Component(vcomp) => {
+//         //         let idx = vcomp.scope.get().unwrap();
+
+//         //         if let (Some(vdom), false) = (self.vdom, self.cfg.skip_components) {
+//         //             let new_node = vdom.get_scope(idx).unwrap().root_node();
+//         //             self.html_render(new_node, f, il + 1, last_node_was_text)?;
+//         //         } else {
+//         //         }
+//         //     }
+//         //     VNode::Template(t) => {
+//         //         if let Some(vdom) = self.vdom {
+//         //             todo!()
+//         //         } else {
+//         //             panic!("Cannot render template without vdom");
+//         //         }
+//         //     }
+//         //     VNode::Placeholder(_) => {
+//         //         todo!()
+//         //     }
+//         // }
+//         Ok(())
+//     }
+// }
+
+// impl<'a: 'c, 'c> Display for SsrRenderer<'a, '_, 'c> {
+//     fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+//         let mut last_node_was_text = false;
+//         self.html_render(self.root, f, 0, &mut last_node_was_text)
+//     }
+// }
diff --git a/packages/ssr/src/template.rs b/packages/ssr/src/template.rs
index c255ba745..c37808b16 100644
--- a/packages/ssr/src/template.rs
+++ b/packages/ssr/src/template.rs
@@ -1,101 +1,15 @@
-use dioxus_core::{prelude::*, AttributeValue};
-use std::cell::RefCell;
+use super::cache::Segment;
+use dioxus_core::{prelude::*, AttributeValue, DynamicNode};
 use std::collections::HashMap;
 use std::fmt::Write;
 use std::rc::Rc;
 
+use crate::cache::StringCache;
+
 /// A virtualdom renderer that caches the templates it has seen for faster rendering
 #[derive(Default)]
 pub struct SsrRender {
-    template_cache: RefCell<HashMap<Template<'static>, Rc<StringCache>>>,
-}
-
-struct StringCache {
-    segments: Vec<Segment>,
-}
-
-#[derive(Default)]
-struct StringChain {
-    segments: Vec<Segment>,
-}
-
-#[derive(Debug, Clone)]
-enum Segment {
-    Attr(usize),
-    Node(usize),
-    PreRendered(String),
-}
-
-impl std::fmt::Write for StringChain {
-    fn write_str(&mut self, s: &str) -> std::fmt::Result {
-        match self.segments.last_mut() {
-            Some(Segment::PreRendered(s2)) => s2.push_str(s),
-            _ => self.segments.push(Segment::PreRendered(s.to_string())),
-        }
-
-        Ok(())
-    }
-}
-
-impl StringCache {
-    fn from_template(template: &VNode) -> Result<Self, std::fmt::Error> {
-        let mut chain = StringChain::default();
-
-        let mut cur_path = vec![];
-
-        for (root_idx, root) in template.template.roots.iter().enumerate() {
-            Self::recurse(root, &mut cur_path, root_idx, &mut chain)?;
-        }
-
-        Ok(Self {
-            segments: chain.segments,
-        })
-    }
-
-    fn recurse(
-        root: &TemplateNode,
-        cur_path: &mut Vec<usize>,
-        root_idx: usize,
-        chain: &mut StringChain,
-    ) -> Result<(), std::fmt::Error> {
-        match root {
-            TemplateNode::Element {
-                tag,
-                attrs,
-                children,
-                ..
-            } => {
-                cur_path.push(root_idx);
-                write!(chain, "<{}", tag)?;
-                for attr in *attrs {
-                    match attr {
-                        TemplateAttribute::Static { name, value, .. } => {
-                            write!(chain, " {}=\"{}\"", name, value)?;
-                        }
-                        TemplateAttribute::Dynamic(index) => {
-                            chain.segments.push(Segment::Attr(*index))
-                        }
-                    }
-                }
-                if children.len() == 0 {
-                    write!(chain, "/>")?;
-                } else {
-                    write!(chain, ">")?;
-                    for child in *children {
-                        Self::recurse(child, cur_path, root_idx, chain)?;
-                    }
-                    write!(chain, "</{}>", tag)?;
-                }
-                cur_path.pop();
-            }
-            TemplateNode::Text(text) => write!(chain, "{}", text)?,
-            TemplateNode::Dynamic(idx) | TemplateNode::DynamicText(idx) => {
-                chain.segments.push(Segment::Node(*idx))
-            }
-        }
-
-        Ok(())
-    }
+    template_cache: HashMap<Template<'static>, Rc<StringCache>>,
 }
 
 impl SsrRender {
@@ -104,15 +18,19 @@ impl SsrRender {
         let root = scope.root_node();
 
         let mut out = String::new();
-        self.render_template(&mut out, root).unwrap();
+        self.render_template(&mut out, dom, root).unwrap();
 
         out
     }
 
-    fn render_template(&self, buf: &mut String, template: &VNode) -> std::fmt::Result {
+    fn render_template(
+        &mut self,
+        buf: &mut String,
+        dom: &VirtualDom,
+        template: &VNode,
+    ) -> std::fmt::Result {
         let entry = self
             .template_cache
-            .borrow_mut()
             .entry(template.template)
             .or_insert_with(|| Rc::new(StringCache::from_template(template).unwrap()))
             .clone();
@@ -123,29 +41,40 @@ impl SsrRender {
                     let attr = &template.dynamic_attrs[*idx];
                     match attr.value {
                         AttributeValue::Text(value) => write!(buf, " {}=\"{}\"", attr.name, value)?,
+                        AttributeValue::Bool(value) => write!(buf, " {}={}", attr.name, value)?,
                         _ => {}
                     };
                 }
                 Segment::Node(idx) => match &template.dynamic_nodes[*idx] {
-                    DynamicNode::Text { value, .. } => {
+                    DynamicNode::Text { value, inner, .. } => {
+                        // in SSR, we are concerned that we can't hunt down the right text node since they might get merged
+                        if !*inner {
+                            write!(buf, "<!--#-->")?;
+                        }
+
                         // todo: escape the text
-                        write!(buf, "{}", value)?
-                    }
-                    DynamicNode::Fragment(children) => {
-                        for child in *children {
-                            self.render_template(buf, child)?;
+                        write!(buf, "{}", value)?;
+
+                        if !*inner {
+                            write!(buf, "<!--/#-->")?;
                         }
-                        //
                     }
-                    DynamicNode::Component { .. } => {
-                        //
+                    DynamicNode::Fragment { nodes, .. } => {
+                        for child in *nodes {
+                            self.render_template(buf, dom, child)?;
+                        }
                     }
-                    DynamicNode::Placeholder(el) => {
-                        //
+                    DynamicNode::Component { scope, .. } => {
+                        let id = scope.get().unwrap();
+                        let scope = dom.get_scope(id).unwrap();
+                        self.render_template(buf, dom, scope.root_node())?;
+                    }
+                    DynamicNode::Placeholder(_el) => {
+                        write!(buf, "<!--placeholder-->")?;
                     }
                 },
 
-                Segment::PreRendered(text) => buf.push_str(&text),
+                Segment::PreRendered(contents) => buf.push_str(contents),
             }
         }
 
@@ -163,89 +92,39 @@ fn to_string_works() {
 
         render! {
             div { class: "asdasdasd", class: "asdasdasd", id: "id-{dynamic}",
-                "Hello world 1 -->"
-                "{dynamic}"
-                "<-- Hello world 2"
+                "Hello world 1 -->" "{dynamic}" "<-- Hello world 2"
                 div { "nest 1" }
                 div {}
                 div { "nest 2" }
                 "{dyn2}"
-
                 (0..5).map(|i| rsx! { div { "finalize {i}" } })
             }
         }
     }
-    let mut dom = VirtualDom::new(app);
-
-    let mut mutations = Vec::new();
-    dom.rebuild(&mut mutations);
-
-    let cache = StringCache::from_template(&dom.base_scope().root_node()).unwrap();
-    dbg!(cache.segments);
-
-    let mut renderer = SsrRender::default();
-    dbg!(renderer.render_vdom(&dom));
-}
-
-#[test]
-fn children_processes_properly() {
-    use dioxus::prelude::*;
-
-    fn app(cx: Scope) -> Element {
-        let d = 123;
-
-        render! {
-            div {
-                ChildWithChildren {
-                    p { "{d}" "hii" }
-                }
-            }
-        }
-    }
-
-    #[inline_props]
-    fn ChildWithChildren<'a>(cx: Scope<'a>, children: Element<'a>) -> Element {
-        render! {
-             h1 { children }
-        }
-    }
 
     let mut dom = VirtualDom::new(app);
+    dom.rebuild();
 
-    let mut mutations = vec![];
-    dom.rebuild(&mut mutations);
-    dbg!(mutations);
+    use Segment::*;
 
-    let mut mutations = vec![];
-    dom.rebuild(&mut mutations);
-    dbg!(mutations);
-}
-
-#[test]
-fn async_children() {
-    use dioxus::prelude::*;
-
-    fn app(cx: Scope) -> Element {
-        let d = 123;
-
-        render! {
-            div {
-                "Hello world"
-            }
-        }
-    }
-
-    async fn async_child(cx: Scope<'_>) -> Element {
-        let d = 123;
-
-        let user_name = use_fetch("https://jsonplaceholder.typicode.com/users/1").await;
-
-        render! { p { "{d}" "hii" } }
-    }
-
-    let mut dom = VirtualDom::new(app);
-
-    let mut mutations = vec![];
-    dom.rebuild(&mut mutations);
-    dbg!(mutations);
+    assert_eq!(
+        StringCache::from_template(&dom.base_scope().root_node())
+            .unwrap()
+            .segments,
+        vec![
+            PreRendered("<div class=\"asdasdasd\" class=\"asdasdasd\"".into(),),
+            Attr(0,),
+            PreRendered(">Hello world 1 -->".into(),),
+            Node(0,),
+            PreRendered("<-- Hello world 2<div>nest 1</div><div></div><div>nest 2</div>".into(),),
+            Node(1,),
+            Node(2,),
+            PreRendered("</div>".into(),),
+        ]
+    );
+
+    assert_eq!(
+        SsrRender::default().render_vdom(&dom),
+        "<div class=\"asdasdasd\" class=\"asdasdasd\" id=\"id-123\">Hello world 1 --><!--#-->123<!--/#--><-- Hello world 2<div>nest 1</div><div></div><div>nest 2</div><!--#--></diiiiiiiiv><!--/#--><div><!--#-->finalize 0<!--/#--></div><div><!--#-->finalize 1<!--/#--></div><div><!--#-->finalize 2<!--/#--></div><div><!--#-->finalize 3<!--/#--></div><div><!--#-->finalize 4<!--/#--></div></div>"
+    );
 }
diff --git a/packages/ssr/tests/simple.rs b/packages/ssr/tests/simple.rs
new file mode 100644
index 000000000..5739c8c61
--- /dev/null
+++ b/packages/ssr/tests/simple.rs
@@ -0,0 +1,84 @@
+use dioxus::prelude::*;
+
+#[test]
+fn simple() {
+    fn app(cx: Scope) -> Element {
+        render! { div { "hello!" } }
+    }
+
+    let mut dom = VirtualDom::new(app);
+    dom.rebuild();
+
+    assert_eq!(
+        dioxus_ssr::SsrRender::default().render_vdom(&dom),
+        "<div>hello!</div>"
+    );
+}
+
+#[test]
+fn lists() {
+    fn app(cx: Scope) -> Element {
+        render! {
+            ul {
+                (0..5).map(|i| rsx! {
+                    li { "item {i}" }
+                })
+            }
+        }
+    }
+
+    let mut dom = VirtualDom::new(app);
+    dom.rebuild();
+
+    assert_eq!(
+        dioxus_ssr::SsrRender::default().render_vdom(&dom),
+        "<ul><li>item 0</li><li>item 1</li><li>item 2</li><li>item 3</li><li>item 4</li></ul>"
+    );
+}
+
+#[test]
+fn dynamic() {
+    fn app(cx: Scope) -> Element {
+        let dynamic = 123;
+
+        render! {
+            div { "Hello world 1 -->" "{dynamic}" "<-- Hello world 2" }
+        }
+    }
+
+    let mut dom = VirtualDom::new(app);
+    dom.rebuild();
+
+    assert_eq!(
+        dioxus_ssr::SsrRender::default().render_vdom(&dom),
+        "<div>Hello world 1 -->123<-- Hello world 2</div>"
+    );
+}
+
+#[test]
+fn components() {
+    fn app(cx: Scope) -> Element {
+        render! {
+            div {
+                (0..5).map(|name| rsx! {
+                    my_component { name: name }
+                })
+            }
+        }
+    }
+
+    #[inline_props]
+    fn my_component(cx: Scope, name: i32) -> Element {
+        render! {
+            div { "component {name}" }
+        }
+    }
+
+    let mut dom = VirtualDom::new(app);
+    dom.rebuild();
+
+    assert_eq!(
+        dioxus_ssr::SsrRender::default().render_vdom(&dom),
+        "<div><div>component 0</div><div>component 1</div><div>component 2</div><div>component 3</div><div>component 4</div></div>"
+    );
+}