diff --git a/manifest.toml b/manifest.toml
index 356bf5d..b47df9c 100644
--- a/manifest.toml
+++ b/manifest.toml
@@ -8,6 +8,6 @@ packages = [
 ]
 
 [requirements]
-gleam_javascript = { version = ">= 0.11.0 and < 1.0.0"}
+gleam_javascript = { version = ">= 0.11.0 and < 1.0.0" }
 gleam_stdlib = { version = ">= 0.34.0 and < 2.0.0" }
 gleeunit = { version = ">= 1.0.0 and < 2.0.0" }
diff --git a/src/events.ffi.mjs b/src/events.ffi.mjs
index 7339551..956fc89 100644
--- a/src/events.ffi.mjs
+++ b/src/events.ffi.mjs
@@ -29,3 +29,238 @@ export function target(event) {
 export function timeStamp(event) {
   return event.timeStamp
 }
+
+export function nativeEvent(event) {
+  return event.nativeEvent
+}
+
+export function animationName(event) {
+  return event.animationName
+}
+
+export function elapsedTime(event) {
+  return event.elapsedTime
+}
+
+export function pseudoElement(event) {
+  return event.pseudoElement
+}
+
+export function clipboardData(event) {
+  return event.clipboardData
+}
+
+export function detail(event) {
+  return event.detail
+}
+
+export function view(event) {
+  return event.view
+}
+
+export function dataTransfer(event) {
+  return event.dataTransfer
+}
+
+export function relatedTarget(event) {
+  return event.relatedTarget
+}
+
+export function data(event) {
+  return event.data
+}
+
+export function altKey(event) {
+  return event.altKey
+}
+
+export function charCode(event) {
+  return event.charCode
+}
+
+export function code(event) {
+  return event.code
+}
+
+export function button(event) {
+  return event.button
+}
+
+export function buttons(event) {
+  return event.buttons
+}
+
+export function ctrlKey(event) {
+  return event.ctrlKey
+}
+
+export function clientX(event) {
+  return event.clientX
+}
+
+export function clientY(event) {
+  return event.clientY
+}
+
+export function metaKey(event) {
+  return event.metaKey
+}
+
+export function key(event) {
+  return event.key
+}
+
+export function keyCode(event) {
+  return event.keyCode
+}
+
+export function locale(event) {
+  return event.locale
+}
+
+export function location(event) {
+  return event.location
+}
+
+export function repeat(event) {
+  return event.repeat
+}
+
+export function movementX(event) {
+  return event.movementX
+}
+
+export function movementY(event) {
+  return event.movementY
+}
+
+export function pageX(event) {
+  return event.pageX
+}
+
+export function pageY(event) {
+  return event.pageY
+}
+
+export function relatedTarget(event) {
+  return event.relatedTarget
+}
+
+export function screenX(event) {
+  return event.screenX
+}
+
+export function screenY(event) {
+  return event.screenY
+}
+
+export function shiftKey(event) {
+  return event.shiftKey
+}
+
+export function which(event) {
+  return event.which
+}
+
+export function height(event) {
+  return event.height
+}
+
+export function width(event) {
+  return event.width
+}
+
+export function isPrimary(event) {
+  return event.isPrimary
+}
+
+export function pointerId(event) {
+  return event.pointerId
+}
+
+export function pointerType(event) {
+  return event.pointerType
+}
+
+export function pressure(event) {
+  return event.pressure
+}
+
+export function tangentialPressure(event) {
+  return event.tangentialPressure
+}
+
+export function tiltX(event) {
+  return event.tiltX
+}
+
+export function tiltY(event) {
+  return event.tiltY
+}
+
+export function twist(event) {
+  return event.twist
+}
+
+export function changedTouches(event) {
+  return event.changedTouches
+}
+
+export function touches(event) {
+  return event.touches
+}
+
+export function targetTouches(event) {
+  return event.targetTouches
+}
+
+export function propertyName(event) {
+  return event.propertyName
+}
+
+export function deltaMode(event) {
+  return event.deltaMode
+}
+
+export function deltaX(event) {
+  return event.deltaX
+}
+
+export function deltaY(event) {
+  return event.deltaY
+}
+
+export function deltaZ(event) {
+  return event.deltaZ
+}
+
+export function isDefaultPrevented(event) {
+  return event.isDefaultPrevented()
+}
+
+export function isPropagationStopped(event) {
+  return event.isPropagationStopped()
+}
+
+export function isPersistent(event) {
+  return event.isPersistent()
+}
+
+export function preventDefault(event) {
+  event.preventDefault()
+  return event
+}
+
+export function stopPropagation(event) {
+  event.stopPropagation()
+  return event
+}
+
+export function persist(event) {
+  event.persist()
+  return event
+}
+
+export function getModifierState(event, key) {
+  return event.getModifierState(key)
+}
diff --git a/src/main.gleam b/src/main.gleam
index c79605e..c691997 100644
--- a/src/main.gleam
+++ b/src/main.gleam
@@ -26,7 +26,7 @@ pub fn root() {
 fn counter() {
   use <- react.component__("Counter")
   let #(counting, set_counting) = react.use_state_(0)
-  html.button([e.on_click(fn() { set_counting(fn(count) { count + 1 }) })], [
+  html.button([e.on_click(fn(_) { set_counting(fn(count) { count + 1 }) })], [
     html.text("count is " <> int.to_string(counting)),
   ])
 }
diff --git a/src/react.ffi.mjs b/src/react.ffi.mjs
index 84e4a98..ef8b4a9 100644
--- a/src/react.ffi.mjs
+++ b/src/react.ffi.mjs
@@ -1,25 +1,35 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import runtime from "react/jsx-runtime";
-import * as gleam from "./gleam.mjs";
+import React from "react"
+import ReactDOM from "react-dom/client"
+import runtime from "react/jsx-runtime"
+import * as gleam from "./gleam.mjs"
 
 export function createRoot(value) {
-  const node = document.getElementById(value);
-  return ReactDOM.createRoot(node);
+  const node = document.getElementById(value)
+  return ReactDOM.createRoot(node)
+}
+
+export function hydrateRoot(value, content) {
+  const node = document.getElementById(value)
+  return ReactDOM.hydrateRoot(node, content)
+}
+
+export function createPortal(children, root) {
+  const node = document.getElementById(root)
+  return ReactDOM.createPortal(children, node)
 }
 
 export function render(root, children) {
-  return root.render(children);
+  return root.render(children)
 }
 
 export function withChildren(Component) {
   return new Proxy(Component, {
     apply(target, _, argumentsList) {
-      const props = argumentsList[0];
-      const children = gleam.List.fromArray(props.children);
-      return target(props, children);
+      const props = argumentsList[0]
+      const children = gleam.List.fromArray(props.children)
+      return target(props, children)
     },
-  });
+  })
 }
 
 // Extract children from props to give it to function.
@@ -27,105 +37,121 @@ export function withChildren(Component) {
 export function addChildrenProxy(Component) {
   return new Proxy(Component, {
     apply(target, _this, argumentsList) {
-      const props = argumentsList[0];
-      const children = argumentsList[1];
-      return jsx(withChildren(target), props, children);
+      const props = argumentsList[0]
+      const children = argumentsList[1]
+      return jsx(withChildren(target), props, children)
     },
-  });
+  })
 }
 
 export function addEmptyProxy(Component) {
   return new Proxy(Component, {
     apply(target) {
-      const props = {};
-      return jsx(target, props);
+      const props = {}
+      return jsx(target, props)
     },
-  });
+  })
 }
 
 export function addProxy(Component) {
   return new Proxy(Component, {
     apply(target, _, argumentsList) {
-      const props = argumentsList[0];
-      return jsx(target, props);
+      const props = argumentsList[0]
+      return jsx(target, props)
     },
-  });
+  })
 }
 
 // Generate JSX using the JSX factory.
 // jsx is for dynamic components, while jsxs is for static components.
 export function jsx(value, props_, children_) {
-  if (value === "text_") return children_;
-  let children = children_?.toArray?.();
-  let isStatic = true;
+  if (value === "text_") return children_
+  let children = children_?.toArray?.()
+  let isStatic = true
 
   // Handle keyed elements like lustre does.
   // This allow to have a similar interface between lustre and greact.
   if (Array.isArray(children?.[0])) {
     children = children.map((c) => {
-      const [key, node] = c;
-      if ("key" in node) return React.cloneElement(node, { key });
-      return node;
-    });
-    isStatic = false;
+      const [key, node] = c
+      if ("key" in node) return React.cloneElement(node, { key })
+      return node
+    })
+    isStatic = false
   }
 
   // Props creation.
   // Uses the existing props, and add children if needed.
-  const props = {};
-  Object.assign(props, props_);
-  if (children?.length > 0) props.children = children;
+  const props = {}
+  Object.assign(props, props_)
+  if (children?.length > 0) props.children = children
 
   if (isStatic) {
-    return runtime.jsxs(value, props);
+    return runtime.jsxs(value, props)
   } else {
-    return runtime.jsx(value, props);
+    return runtime.jsx(value, props)
   }
 }
 
 // Set the display name function. Essential to display the correct name in
 // the devtools.
 export function setFunctionName(component, name) {
-  component.displayName = name;
-  return component;
+  component.displayName = name
+  return component
 }
 
 export function strictMode(children) {
-  return jsx(React.StrictMode, {}, children);
+  return jsx(React.StrictMode, {}, children)
 }
 
 export function fragment(children) {
-  return jsx(React.Fragment, {}, children);
+  return jsx(React.Fragment, {}, children)
 }
 
 export function profiler(children) {
-  return jsx(React.Profiler, {}, children);
+  return jsx(React.Profiler, {}, children)
 }
 
 export function suspense(props, children) {
-  return jsx(React.Suspense, props, children);
+  return jsx(React.Suspense, props, children)
 }
 
 export function coerce(value) {
-  return value;
+  return value
 }
 
 export function contextProvider(context, value, children) {
-  return jsx(context.Provider, { value }, children);
+  return jsx(context.Provider, { value }, children)
 }
 
 export function setCurrent(ref, value) {
-  ref.current = value;
+  ref.current = value
 }
 
 export function getCurrent(ref) {
-  return ref.current;
+  return ref.current
 }
 
 export function toProps(attributes) {
-  const props = {};
+  const props = {}
   for (const item of attributes) {
-    props[item.key] = item.content;
+    props[item.key] = item.content
   }
-  return props;
+  return props
+}
+
+function camelize(key) {
+  return key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase())
+}
+
+export function convertStyle(styles) {
+  const styles_ = {}
+  for (const style of styles) {
+    styles_[camelize(style[0])] = style[1]
+  }
+  return styles_
+}
+
+export function innerHTML(html) {
+  return { __html: html }
 }
diff --git a/src/react.gleam b/src/react.gleam
index db12662..89ebb96 100644
--- a/src/react.gleam
+++ b/src/react.gleam
@@ -1,5 +1,6 @@
 import gleam/javascript/promise.{type Promise}
 import gleam/option.{type Option}
+import react/internals/coerce.{coerce}
 
 // Component creation
 
@@ -176,6 +177,3 @@ fn add_empty_proxy(a: fn() -> Component) -> fn() -> Component
 fn add_children_proxy(
   a: fn(props, List(Component)) -> Component,
 ) -> fn(props, List(Component)) -> Component
-
-@external(javascript, "./react.ffi.mjs", "coerce")
-fn coerce(a: a) -> b
diff --git a/src/react/attribute.gleam b/src/react/attribute.gleam
index d2e29cb..ab64b1d 100644
--- a/src/react/attribute.gleam
+++ b/src/react/attribute.gleam
@@ -1,25 +1,192 @@
 import gleam/dynamic
-import react/internals/attribute.{Attribute}
+import react
+import react/internals/attribute
 
 pub type Attribute =
   attribute.Attribute
 
 pub fn href(url: String) {
-  Attribute("href", dynamic.from(url))
+  attribute.attribute("href", url)
 }
 
 pub fn target(value: String) {
-  Attribute("target", dynamic.from(value))
+  attribute.attribute("target", value)
 }
 
 pub fn src(value: String) {
-  Attribute("src", dynamic.from(value))
+  attribute.attribute("src", value)
 }
 
 pub fn class(value: String) {
-  Attribute("className", dynamic.from(value))
+  attribute.attribute("className", value)
 }
 
 pub fn alt(value: String) {
-  Attribute("alt", dynamic.from(value))
+  attribute.attribute("alt", value)
+}
+
+pub type InnerHTML
+
+@external(javascript, "../react.ffi.mjs", "innerHTML")
+pub fn inner_html(html: String) -> InnerHTML
+
+/// Overrides the innerHTML property of the DOM node and displays the passed HTML inside. This should be used with extreme caution! If the HTML inside isn’t trusted (for example, if it’s based on user data), you risk introducing an XSS vulnerability.
+pub fn dangerously_set_inner_html(inner_html: InnerHTML) {
+  attribute.attribute("dangerouslySetInnerHTML", inner_html)
+}
+
+/// A ref object from `react.use_ref`. Your ref will be filled with the DOM element for this node.
+pub fn ref(ref: react.Ref(a)) {
+  attribute.attribute("ref", ref)
+}
+
+/// A ref callback function. The callback will be provided with the DOM element for this node.
+pub fn ref_(ref: fn(dynamic.Dynamic) -> Nil) {
+  attribute.attribute("ref", ref)
+}
+
+pub fn suppress_content_editable_warning(value: Bool) {
+  attribute.attribute("suppressContentEditableWarning", value)
+}
+
+pub fn suppress_hydration_warning(value: Bool) {
+  attribute.attribute("suppressHydrationWarning", value)
+}
+
+@external(javascript, "../react.ffi.mjs", "convertStyle")
+fn convert_style(styles: List(#(String, String))) -> a
+
+pub fn style(styles: List(#(String, String))) {
+  attribute.attribute("style", convert_style(styles))
+}
+
+/// Set aria attribute on the node. Should be used like `aria("valuenow", "75")`.
+pub fn aria(key: String, value: String) {
+  attribute.attribute("aria-" <> key, value)
+}
+
+pub fn access_key(value: String) {
+  attribute.attribute("accessKey", value)
+}
+
+pub fn auto_capitalize(value: String) {
+  attribute.attribute("autoCapitalize", value)
+}
+
+/// Alias of `class`.
+pub fn class_name(value: String) {
+  attribute.attribute("className", value)
+}
+
+/// If true, the browser lets the user edit the rendered element directly. This is used to implement rich text input libraries like Lexical. React warns if you try to pass React children to an element with contentEditable={true} because React will not be able to update its content after user edits.
+pub fn content_editable(value: Bool) {
+  attribute.attribute("contentEditable", value)
+}
+
+/// Data attributes let you attach some string data to the element, for example data-fruit="banana". In React, they are not commonly used because you would usually read data from props or state instead.
+pub fn data(key: String, value: String) {
+  attribute.attribute("data-" <> key, value)
+}
+
+pub type Dir {
+  Ltr
+  Rtl
+}
+
+/// Specifies the text direction of the element.
+pub fn dir(value: Dir) {
+  let value = case value {
+    Ltr -> "ltr"
+    Rtl -> "rtl"
+  }
+  attribute.attribute("dir", value)
+}
+
+/// Specifies whether the element is draggable. Part of HTML Drag and Drop API.
+pub fn draggable(value: Bool) {
+  attribute.attribute("draggable", value)
+}
+
+/// Specifies which action to present for the enter key on virtual keyboards.
+pub fn enter_key_hint(value: String) {
+  attribute.attribute("enterKeyHint", value)
+}
+
+/// For <label> and <output>, lets you associate the label with some control. Same as for HTML attribute. React uses the standard DOM property names (htmlFor) instead of HTML attribute names.
+pub fn for(value: String) {
+  attribute.attribute("htmlFor", value)
+}
+
+/// Alias of `for`.
+pub fn html_for(value: String) {
+  attribute.attribute("htmlFor", value)
+}
+
+/// Specifies whether the element should be hidden.
+pub fn hidden(value: Bool) {
+  attribute.attribute("hidden", value)
+}
+
+/// Specifies a unique identifier for this element, which can be used to find it later or connect it with other elements. Generate it with useId to avoid clashes between multiple instances of the same component.
+pub fn id(value: String) {
+  attribute.attribute("id", value)
+}
+
+/// If specified, the component will behave like a custom element.
+pub fn is(value: String) {
+  attribute.attribute("is", value)
+}
+
+/// Specifies what kind of keyboard to display (for example, text, number or telephone).
+pub fn input_mode(value: String) {
+  attribute.attribute("inputMode", value)
+}
+
+/// Specifies which property the element represents for structured data crawlers.
+pub fn item_prop(value: String) {
+  attribute.attribute("itemProp", value)
+}
+
+/// Specifies the language of the element.
+pub fn lang(value: String) {
+  attribute.attribute("lang", value)
+}
+
+/// Specifies the element role explicitly for assistive technologies.
+pub fn role(value: String) {
+  attribute.attribute("role", value)
+}
+
+/// Specifies the slot name when using shadow DOM.
+pub fn slot(value: String) {
+  attribute.attribute("slot", value)
+}
+
+/// If explicitly set to true or false, enables or disables spellchecking.
+pub fn spell_check(value: Bool) {
+  attribute.attribute("spellCheck", value)
+}
+
+/// Overrides the default Tab button behavior. Avoid using values other than -1 and 0.
+pub fn tab_index(value: Int) {
+  attribute.attribute("tabIndex", value)
+}
+
+/// Specifies the tooltip text for the element.
+pub fn title(value: String) {
+  attribute.attribute("title", value)
+}
+
+pub type Translate {
+  Yes
+  No
+}
+
+/// Passing No excludes the element content from being translated.
+pub fn translate(value: Translate) {
+  let value = case value {
+    Yes -> "yes"
+    No -> "no"
+  }
+  attribute.attribute("translate", value)
 }
diff --git a/src/react/client.gleam b/src/react/client.gleam
index 2432e1f..99ac188 100644
--- a/src/react/client.gleam
+++ b/src/react/client.gleam
@@ -5,5 +5,11 @@ pub type Root
 @external(javascript, "../react.ffi.mjs", "createRoot")
 pub fn create_root(root: String) -> Root
 
+@external(javascript, "../react.ffi.mjs", "hydrateRoot")
+pub fn hydrate_root(root: String, node: Component) -> Root
+
 @external(javascript, "../react.ffi.mjs", "render")
 pub fn render(root: Root, child: Component) -> Nil
+
+@external(javascript, "../react.ffi.mjs", "createPortal")
+pub fn create_portal(children: Component, root: String) -> Component
diff --git a/src/react/event.gleam b/src/react/event.gleam
index 5e0a555..367d4d9 100644
--- a/src/react/event.gleam
+++ b/src/react/event.gleam
@@ -1,5 +1,5 @@
 import gleam/dynamic
-import react/internals/attribute.{Attribute}
+import react/internals/attribute
 
 pub type Event
 
@@ -10,23 +10,44 @@ pub fn bubbles(event: Event) -> Bool
 pub fn cancelable(event: Event) -> Bool
 
 @external(javascript, "../events.ffi.mjs", "currentTarget")
-pub fn current_target(event: Event) -> Bool
+pub fn current_target(event: Event) -> dynamic.Dynamic
 
 @external(javascript, "../events.ffi.mjs", "defaultPrevented")
 pub fn default_prevented(event: Event) -> Bool
 
 @external(javascript, "../events.ffi.mjs", "eventPhase")
-pub fn event_phase(event: Event) -> Bool
+pub fn event_phase(event: Event) -> Int
 
 @external(javascript, "../events.ffi.mjs", "isTrusted")
 pub fn is_trusted(event: Event) -> Bool
 
 @external(javascript, "../events.ffi.mjs", "target")
-pub fn target(event: Event) -> Bool
+pub fn target(event: Event) -> dynamic.Dynamic
 
 @external(javascript, "../events.ffi.mjs", "timeStamp")
-pub fn time_stamp(event: Event) -> Bool
+pub fn time_stamp(event: Event) -> Int
 
-pub fn on_click(handler: fn() -> Nil) {
-  Attribute("onClick", dynamic.from(handler))
+@external(javascript, "../events.ffi.mjs", "nativeEvent")
+pub fn native_event(event: Event) -> dynamic.Dynamic
+
+@external(javascript, "../events.ffi.mjs", "preventDefault")
+pub fn prevent_default(event: Event) -> Event
+
+@external(javascript, "../events.ffi.mjs", "stopPropagation")
+pub fn stop_propagation(event: Event) -> Event
+
+@external(javascript, "../events.ffi.mjs", "persist")
+pub fn persist(event: Event) -> Event
+
+@external(javascript, "../events.ffi.mjs", "isDefaultPrevented")
+pub fn is_default_prevented(event: Event) -> Bool
+
+@external(javascript, "../events.ffi.mjs", "isPropagationStopped")
+pub fn is_propagation_stopped(event: Event) -> Bool
+
+@external(javascript, "../events.ffi.mjs", "isPersistent")
+pub fn is_persistent(event: Event) -> Bool
+
+pub fn on_click(handler: fn(Event) -> Nil) {
+  attribute.attribute("onClick", handler)
 }
diff --git a/src/react/event/animation.gleam b/src/react/event/animation.gleam
new file mode 100644
index 0000000..13de757
--- /dev/null
+++ b/src/react/event/animation.gleam
@@ -0,0 +1,17 @@
+import react/event.{type Event}
+import react/internals/coerce.{coerce}
+
+pub type AnimationEvent
+
+@external(javascript, "../../events.ffi.mjs", "animationName")
+pub fn animation_name(event: AnimationEvent) -> String
+
+@external(javascript, "../../events.ffi.mjs", "elapsedTime")
+pub fn elapsed_time(event: AnimationEvent) -> Float
+
+@external(javascript, "../../events.ffi.mjs", "pseudoElement")
+pub fn pseudo_element(event: AnimationEvent) -> String
+
+pub fn as_event(event: AnimationEvent) -> Event {
+  coerce(event)
+}
diff --git a/src/react/event/clipboard.gleam b/src/react/event/clipboard.gleam
new file mode 100644
index 0000000..3cccaf8
--- /dev/null
+++ b/src/react/event/clipboard.gleam
@@ -0,0 +1,12 @@
+import gleam/dynamic
+import react/event.{type Event}
+import react/internals/coerce.{coerce}
+
+pub type ClipboardEvent
+
+@external(javascript, "../../events.ffi.mjs", "clipboardData")
+pub fn clipboard_data(event: ClipboardEvent) -> dynamic.Dynamic
+
+pub fn as_event(event: ClipboardEvent) -> Event {
+  coerce(event)
+}
diff --git a/src/react/event/composition.gleam b/src/react/event/composition.gleam
new file mode 100644
index 0000000..dade5c6
--- /dev/null
+++ b/src/react/event/composition.gleam
@@ -0,0 +1,11 @@
+import react/event.{type Event}
+import react/internals/coerce.{coerce}
+
+pub type CompositionEvent
+
+@external(javascript, "../../events.ffi.mjs", "data")
+pub fn data(event: CompositionEvent) -> String
+
+pub fn as_event(event: CompositionEvent) -> Event {
+  coerce(event)
+}
diff --git a/src/react/event/drag.gleam b/src/react/event/drag.gleam
new file mode 100644
index 0000000..877a633
--- /dev/null
+++ b/src/react/event/drag.gleam
@@ -0,0 +1,22 @@
+import gleam/dynamic
+import react/event.{type Event}
+import react/event/mouse.{type MouseEvent}
+import react/event/ui.{type UIEvent}
+import react/internals/coerce.{coerce}
+
+pub type DragEvent
+
+@external(javascript, "../../events.ffi.mjs", "dataTransfer")
+pub fn data_transfer(event: DragEvent) -> dynamic.Dynamic
+
+pub fn as_mouse_event(event: DragEvent) -> MouseEvent {
+  coerce(event)
+}
+
+pub fn as_ui_event(event: DragEvent) -> UIEvent {
+  coerce(event)
+}
+
+pub fn as_event(event: DragEvent) -> Event {
+  coerce(event)
+}
diff --git a/src/react/event/focus.gleam b/src/react/event/focus.gleam
new file mode 100644
index 0000000..ffbd3e6
--- /dev/null
+++ b/src/react/event/focus.gleam
@@ -0,0 +1,17 @@
+import gleam/dynamic
+import react/event.{type Event}
+import react/event/ui.{type UIEvent}
+import react/internals/coerce.{coerce}
+
+pub type FocusEvent
+
+@external(javascript, "../../events.ffi.mjs", "relatedTarget")
+pub fn related_target(event: FocusEvent) -> dynamic.Dynamic
+
+pub fn as_ui_event(event: FocusEvent) -> UIEvent {
+  coerce(event)
+}
+
+pub fn as_event(event: FocusEvent) -> Event {
+  coerce(event)
+}
diff --git a/src/react/event/input.gleam b/src/react/event/input.gleam
new file mode 100644
index 0000000..67e30b0
--- /dev/null
+++ b/src/react/event/input.gleam
@@ -0,0 +1,11 @@
+import react/event.{type Event}
+import react/internals/coerce.{coerce}
+
+pub type InputEvent
+
+@external(javascript, "../../events.ffi.mjs", "data")
+pub fn data(event: InputEvent) -> String
+
+pub fn as_event(event: InputEvent) -> Event {
+  coerce(event)
+}
diff --git a/src/react/event/keyboard.gleam b/src/react/event/keyboard.gleam
new file mode 100644
index 0000000..32977f8
--- /dev/null
+++ b/src/react/event/keyboard.gleam
@@ -0,0 +1,52 @@
+import react/event.{type Event}
+import react/event/ui.{type UIEvent}
+import react/internals/coerce.{coerce}
+
+pub type KeyboardEvent
+
+@external(javascript, "../../events.ffi.mjs", "altKey")
+pub fn alt_key(event: KeyboardEvent) -> Bool
+
+@external(javascript, "../../events.ffi.mjs", "charCode")
+pub fn char_code(event: KeyboardEvent) -> Int
+
+@external(javascript, "../../events.ffi.mjs", "code")
+pub fn code(event: KeyboardEvent) -> String
+
+@external(javascript, "../../events.ffi.mjs", "ctrlKey")
+pub fn ctrl_key(event: KeyboardEvent) -> Bool
+
+@external(javascript, "../../events.ffi.mjs", "key")
+pub fn key(event: KeyboardEvent) -> String
+
+@external(javascript, "../../events.ffi.mjs", "keyCode")
+pub fn key_code(event: KeyboardEvent) -> Int
+
+@external(javascript, "../../events.ffi.mjs", "locale")
+pub fn locale(event: KeyboardEvent) -> String
+
+@external(javascript, "../../events.ffi.mjs", "metaKey")
+pub fn meta_key(event: KeyboardEvent) -> Bool
+
+@external(javascript, "../../events.ffi.mjs", "location")
+pub fn location(event: KeyboardEvent) -> Float
+
+@external(javascript, "../../events.ffi.mjs", "repeat")
+pub fn repeat(event: KeyboardEvent) -> Bool
+
+@external(javascript, "../../events.ffi.mjs", "shiftKey")
+pub fn shift_key(event: KeyboardEvent) -> Bool
+
+@external(javascript, "../../events.ffi.mjs", "which")
+pub fn which(event: KeyboardEvent) -> Int
+
+@external(javascript, "../../events.ffi.mjs", "getModifierState")
+pub fn get_modifier_state(event: KeyboardEvent, key: String) -> Bool
+
+pub fn as_ui_event(event: KeyboardEvent) -> UIEvent {
+  coerce(event)
+}
+
+pub fn as_event(event: KeyboardEvent) -> Event {
+  coerce(event)
+}
diff --git a/src/react/event/mouse.gleam b/src/react/event/mouse.gleam
new file mode 100644
index 0000000..d3d1753
--- /dev/null
+++ b/src/react/event/mouse.gleam
@@ -0,0 +1,65 @@
+import gleam/dynamic
+import react/event.{type Event}
+import react/event/ui.{type UIEvent}
+import react/internals/coerce.{coerce}
+
+pub type MouseEvent
+
+@external(javascript, "../../events.ffi.mjs", "clipboardData")
+pub fn clipboard_data(event: MouseEvent) -> dynamic.Dynamic
+
+@external(javascript, "../../events.ffi.mjs", "altKey")
+pub fn alt_key(event: MouseEvent) -> Bool
+
+@external(javascript, "../../events.ffi.mjs", "button")
+pub fn button(event: MouseEvent) -> Int
+
+@external(javascript, "../../events.ffi.mjs", "buttons")
+pub fn buttons(event: MouseEvent) -> Int
+
+@external(javascript, "../../events.ffi.mjs", "ctrlKey")
+pub fn ctrl_key(event: MouseEvent) -> Bool
+
+@external(javascript, "../../events.ffi.mjs", "clientX")
+pub fn client_x(event: MouseEvent) -> Float
+
+@external(javascript, "../../events.ffi.mjs", "clientY")
+pub fn client_y(event: MouseEvent) -> Float
+
+@external(javascript, "../../events.ffi.mjs", "metaKey")
+pub fn meta_key(event: MouseEvent) -> Bool
+
+@external(javascript, "../../events.ffi.mjs", "movementX")
+pub fn movement_x(event: MouseEvent) -> Int
+
+@external(javascript, "../../events.ffi.mjs", "movementY")
+pub fn movement_y(event: MouseEvent) -> Int
+
+@external(javascript, "../../events.ffi.mjs", "pageX")
+pub fn page_x(event: MouseEvent) -> Float
+
+@external(javascript, "../../events.ffi.mjs", "pageY")
+pub fn page_y(event: MouseEvent) -> Float
+
+@external(javascript, "../../events.ffi.mjs", "relatedTarget")
+pub fn related_target(event: MouseEvent) -> dynamic.Dynamic
+
+@external(javascript, "../../events.ffi.mjs", "screenX")
+pub fn screen_x(event: MouseEvent) -> Float
+
+@external(javascript, "../../events.ffi.mjs", "screenY")
+pub fn screen_y(event: MouseEvent) -> Float
+
+@external(javascript, "../../events.ffi.mjs", "shiftKey")
+pub fn shift_key(event: MouseEvent) -> Bool
+
+@external(javascript, "../../events.ffi.mjs", "getModifierState")
+pub fn get_modifier_state(event: MouseEvent, key: String) -> Bool
+
+pub fn as_ui_event(event: MouseEvent) -> UIEvent {
+  coerce(event)
+}
+
+pub fn as_event(event: MouseEvent) -> Event {
+  coerce(event)
+}
diff --git a/src/react/event/pointer.gleam b/src/react/event/pointer.gleam
new file mode 100644
index 0000000..474bd6b
--- /dev/null
+++ b/src/react/event/pointer.gleam
@@ -0,0 +1,48 @@
+import react/event.{type Event}
+import react/event/mouse.{type MouseEvent}
+import react/event/ui.{type UIEvent}
+import react/internals/coerce.{coerce}
+
+pub type PointerEvent
+
+@external(javascript, "../../events.ffi.mjs", "height")
+pub fn height(event: PointerEvent) -> Int
+
+@external(javascript, "../../events.ffi.mjs", "isPrimary")
+pub fn is_primary(event: PointerEvent) -> Bool
+
+@external(javascript, "../../events.ffi.mjs", "pointerId")
+pub fn pointer_id(event: PointerEvent) -> Int
+
+@external(javascript, "../../events.ffi.mjs", "pointerType")
+pub fn pointer_type(event: PointerEvent) -> String
+
+@external(javascript, "../../events.ffi.mjs", "pressure")
+pub fn pressure(event: PointerEvent) -> Float
+
+@external(javascript, "../../events.ffi.mjs", "tangentialPressure")
+pub fn tangential_pressure(event: PointerEvent) -> Float
+
+@external(javascript, "../../events.ffi.mjs", "tiltX")
+pub fn tilt_x(event: PointerEvent) -> Int
+
+@external(javascript, "../../events.ffi.mjs", "tiltY")
+pub fn tilt_y(event: PointerEvent) -> Int
+
+@external(javascript, "../../events.ffi.mjs", "twist")
+pub fn twist(event: PointerEvent) -> Int
+
+@external(javascript, "../../events.ffi.mjs", "width")
+pub fn width(event: PointerEvent) -> Int
+
+pub fn as_mouse_event(event: PointerEvent) -> MouseEvent {
+  coerce(event)
+}
+
+pub fn as_ui_event(event: PointerEvent) -> UIEvent {
+  coerce(event)
+}
+
+pub fn as_event(event: PointerEvent) -> Event {
+  coerce(event)
+}
diff --git a/src/react/event/touch.gleam b/src/react/event/touch.gleam
new file mode 100644
index 0000000..ab3d19a
--- /dev/null
+++ b/src/react/event/touch.gleam
@@ -0,0 +1,38 @@
+import gleam/dynamic
+import react/event.{type Event}
+import react/event/ui.{type UIEvent}
+import react/internals/coerce.{coerce}
+
+pub type TouchEvent
+
+@external(javascript, "../../events.ffi.mjs", "altKey")
+pub fn alt_key(event: TouchEvent) -> Bool
+
+@external(javascript, "../../events.ffi.mjs", "ctrlKey")
+pub fn ctrl_key(event: TouchEvent) -> Bool
+
+@external(javascript, "../../events.ffi.mjs", "changedTouches")
+pub fn changed_touches(event: TouchEvent) -> dynamic.Dynamic
+
+@external(javascript, "../../events.ffi.mjs", "metaKey")
+pub fn meta_key(event: TouchEvent) -> Bool
+
+@external(javascript, "../../events.ffi.mjs", "shiftKey")
+pub fn shift_key(event: TouchEvent) -> Bool
+
+@external(javascript, "../../events.ffi.mjs", "touches")
+pub fn touches(event: TouchEvent) -> dynamic.Dynamic
+
+@external(javascript, "../../events.ffi.mjs", "targetTouches")
+pub fn target_touches(event: TouchEvent) -> dynamic.Dynamic
+
+@external(javascript, "../../events.ffi.mjs", "getModifierState")
+pub fn get_modifier_state(event: TouchEvent, key: String) -> Bool
+
+pub fn as_ui_event(event: TouchEvent) -> UIEvent {
+  coerce(event)
+}
+
+pub fn as_event(event: TouchEvent) -> Event {
+  coerce(event)
+}
diff --git a/src/react/event/transition.gleam b/src/react/event/transition.gleam
new file mode 100644
index 0000000..ffb2899
--- /dev/null
+++ b/src/react/event/transition.gleam
@@ -0,0 +1,17 @@
+import react/event.{type Event}
+import react/internals/coerce.{coerce}
+
+pub type TransitionEvent
+
+@external(javascript, "../../events.ffi.mjs", "elapsedTime")
+pub fn elapsed_time(event: TransitionEvent) -> Int
+
+@external(javascript, "../../events.ffi.mjs", "propertyName")
+pub fn property_name(event: TransitionEvent) -> String
+
+@external(javascript, "../../events.ffi.mjs", "pseudoElement")
+pub fn pseudo_element(event: TransitionEvent) -> String
+
+pub fn as_event(event: TransitionEvent) -> Event {
+  coerce(event)
+}
diff --git a/src/react/event/ui.gleam b/src/react/event/ui.gleam
new file mode 100644
index 0000000..e7c9f13
--- /dev/null
+++ b/src/react/event/ui.gleam
@@ -0,0 +1,15 @@
+import gleam/dynamic
+import react/event.{type Event}
+import react/internals/coerce.{coerce}
+
+pub type UIEvent
+
+@external(javascript, "../../events.ffi.mjs", "detail")
+pub fn detail(event: UIEvent) -> Int
+
+@external(javascript, "../../events.ffi.mjs", "view")
+pub fn view(event: UIEvent) -> dynamic.Dynamic
+
+pub fn as_event(event: UIEvent) -> Event {
+  coerce(event)
+}
diff --git a/src/react/event/wheel.gleam b/src/react/event/wheel.gleam
new file mode 100644
index 0000000..f1deee3
--- /dev/null
+++ b/src/react/event/wheel.gleam
@@ -0,0 +1,30 @@
+import react/event.{type Event}
+import react/event/mouse.{type MouseEvent}
+import react/event/ui.{type UIEvent}
+import react/internals/coerce.{coerce}
+
+pub type WheelEvent
+
+@external(javascript, "../../events.ffi.mjs", "deltaMode")
+pub fn delta_mode(event: WheelEvent) -> Int
+
+@external(javascript, "../../events.ffi.mjs", "deltaX")
+pub fn delta_x(event: WheelEvent) -> Float
+
+@external(javascript, "../../events.ffi.mjs", "deltaY")
+pub fn delta_y(event: WheelEvent) -> Float
+
+@external(javascript, "../../events.ffi.mjs", "deltaZ")
+pub fn delta_z(event: WheelEvent) -> Float
+
+pub fn as_mouse_event(event: WheelEvent) -> MouseEvent {
+  coerce(event)
+}
+
+pub fn as_ui_event(event: WheelEvent) -> UIEvent {
+  coerce(event)
+}
+
+pub fn as_event(event: WheelEvent) -> Event {
+  coerce(event)
+}
diff --git a/src/react/handler.gleam b/src/react/handler.gleam
new file mode 100644
index 0000000..965c092
--- /dev/null
+++ b/src/react/handler.gleam
@@ -0,0 +1,622 @@
+import react/event.{type Event}
+import react/event/animation.{type AnimationEvent}
+import react/event/clipboard.{type ClipboardEvent}
+import react/event/composition.{type CompositionEvent}
+import react/event/drag.{type DragEvent}
+import react/event/focus.{type FocusEvent}
+import react/event/input.{type InputEvent}
+import react/event/keyboard.{type KeyboardEvent}
+import react/event/mouse.{type MouseEvent}
+import react/event/pointer.{type PointerEvent}
+import react/event/touch.{type TouchEvent}
+import react/event/transition.{type TransitionEvent}
+import react/event/wheel.{type WheelEvent}
+import react/internals/attribute
+
+pub fn on_animation_end(handler: fn(AnimationEvent) -> Nil) {
+  attribute.attribute("onAnimationEnd", handler)
+}
+
+pub fn on_animation_end_capture(handler: fn(AnimationEvent) -> Nil) {
+  attribute.attribute("onAnimationEndCapture", handler)
+}
+
+pub fn on_animation_iteration(handler: fn(AnimationEvent) -> Nil) {
+  attribute.attribute("onAnimationIteration", handler)
+}
+
+pub fn on_animation_iteration_capture(handler: fn(AnimationEvent) -> Nil) {
+  attribute.attribute("onAnimationIterationCapture", handler)
+}
+
+pub fn on_animation_start(handler: fn(AnimationEvent) -> Nil) {
+  attribute.attribute("onAnimationStart", handler)
+}
+
+pub fn on_animation_start_capture(handler: fn(AnimationEvent) -> Nil) {
+  attribute.attribute("onAnimationStartCapture", handler)
+}
+
+pub fn on_aux_click(handler: fn(MouseEvent) -> Nil) {
+  attribute.attribute("onAuxClick", handler)
+}
+
+pub fn on_aux_click_capture(handler: fn(MouseEvent) -> Nil) {
+  attribute.attribute("onAuxClickCapture", handler)
+}
+
+pub fn on_before_input(handler: fn(InputEvent) -> Nil) {
+  attribute.attribute("onBeforeInput", handler)
+}
+
+pub fn on_before_input_capture(handler: fn(InputEvent) -> Nil) {
+  attribute.attribute("onBeforeInputCapture", handler)
+}
+
+pub fn on_blur(handler: fn(FocusEvent) -> Nil) {
+  attribute.attribute("onBlur", handler)
+}
+
+pub fn on_blur_capture(handler: fn(FocusEvent) -> Nil) {
+  attribute.attribute("onBlurCapture", handler)
+}
+
+pub fn on_click(handler: fn(MouseEvent) -> Nil) {
+  attribute.attribute("onClick", handler)
+}
+
+pub fn on_click_capture(handler: fn(MouseEvent) -> Nil) {
+  attribute.attribute("onClickCapture", handler)
+}
+
+pub fn on_composition_start(handler: fn(CompositionEvent) -> Nil) {
+  attribute.attribute("onCompositionStart", handler)
+}
+
+pub fn on_composition_start_capture(handler: fn(CompositionEvent) -> Nil) {
+  attribute.attribute("onCompositionStartCapture", handler)
+}
+
+pub fn on_composition_end(handler: fn(CompositionEvent) -> Nil) {
+  attribute.attribute("onCompositionEnd", handler)
+}
+
+pub fn on_composition_end_capture(handler: fn(CompositionEvent) -> Nil) {
+  attribute.attribute("onCompositionEndCapture", handler)
+}
+
+pub fn on_composition_update(handler: fn(CompositionEvent) -> Nil) {
+  attribute.attribute("onCompositionUpdate", handler)
+}
+
+pub fn on_composition_update_capture(handler: fn(CompositionEvent) -> Nil) {
+  attribute.attribute("onCompositionUpdateCapture", handler)
+}
+
+pub fn on_context_menu(handler: fn(MouseEvent) -> Nil) {
+  attribute.attribute("onContextMenu", handler)
+}
+
+pub fn on_context_menu_capture(handler: fn(MouseEvent) -> Nil) {
+  attribute.attribute("onContextMenuCapture", handler)
+}
+
+pub fn on_copy(handler: fn(ClipboardEvent) -> Nil) {
+  attribute.attribute("onCopy", handler)
+}
+
+pub fn on_copy_capture(handler: fn(ClipboardEvent) -> Nil) {
+  attribute.attribute("onCopyCapture", handler)
+}
+
+pub fn on_cut(handler: fn(ClipboardEvent) -> Nil) {
+  attribute.attribute("onCut", handler)
+}
+
+pub fn on_cut_capture(handler: fn(ClipboardEvent) -> Nil) {
+  attribute.attribute("onCutCapture", handler)
+}
+
+pub fn on_double_click(handler: fn(MouseEvent) -> Nil) {
+  attribute.attribute("onDoubleClick", handler)
+}
+
+pub fn on_double_click_capture(handler: fn(MouseEvent) -> Nil) {
+  attribute.attribute("onDoubleClickCapture", handler)
+}
+
+pub fn on_drag(handler: fn(DragEvent) -> Nil) {
+  attribute.attribute("onDrag", handler)
+}
+
+pub fn on_drag_capture(handler: fn(DragEvent) -> Nil) {
+  attribute.attribute("onDragCapture", handler)
+}
+
+pub fn on_drag_end(handler: fn(DragEvent) -> Nil) {
+  attribute.attribute("onDragEnd", handler)
+}
+
+pub fn on_drag_end_capture(handler: fn(DragEvent) -> Nil) {
+  attribute.attribute("onDragEndCapture", handler)
+}
+
+pub fn on_drag_enter(handler: fn(DragEvent) -> Nil) {
+  attribute.attribute("onDragEnter", handler)
+}
+
+pub fn on_drag_enter_capture(handler: fn(DragEvent) -> Nil) {
+  attribute.attribute("onDragEnterCapture", handler)
+}
+
+pub fn on_drag_over(handler: fn(DragEvent) -> Nil) {
+  attribute.attribute("onDragOver", handler)
+}
+
+pub fn on_drag_over_capture(handler: fn(DragEvent) -> Nil) {
+  attribute.attribute("onDragOverCapture", handler)
+}
+
+pub fn on_drag_start(handler: fn(DragEvent) -> Nil) {
+  attribute.attribute("onDragStart", handler)
+}
+
+pub fn on_drag_start_capture(handler: fn(DragEvent) -> Nil) {
+  attribute.attribute("onDragStartCapture", handler)
+}
+
+pub fn on_drop(handler: fn(DragEvent) -> Nil) {
+  attribute.attribute("onDrop", handler)
+}
+
+pub fn on_drop_capture(handler: fn(DragEvent) -> Nil) {
+  attribute.attribute("onDropCapture", handler)
+}
+
+pub fn on_focus(handler: fn(FocusEvent) -> Nil) {
+  attribute.attribute("onFocus", handler)
+}
+
+pub fn on_focus_capture(handler: fn(FocusEvent) -> Nil) {
+  attribute.attribute("onFocusCapture", handler)
+}
+
+pub fn on_got_pointer_capture(handler: fn(PointerEvent) -> Nil) {
+  attribute.attribute("onGotPointerCapture", handler)
+}
+
+pub fn on_got_pointer_capture_capture(handler: fn(PointerEvent) -> Nil) {
+  attribute.attribute("onGotPointerCaptureCapture", handler)
+}
+
+pub fn on_key_down(handler: fn(KeyboardEvent) -> Nil) {
+  attribute.attribute("onKeyDown", handler)
+}
+
+pub fn on_key_down_capture(handler: fn(KeyboardEvent) -> Nil) {
+  attribute.attribute("onKeyDownCapture", handler)
+}
+
+pub fn on_key_press(handler: fn(KeyboardEvent) -> Nil) {
+  attribute.attribute("onKeyPress", handler)
+}
+
+pub fn on_key_press_capture(handler: fn(KeyboardEvent) -> Nil) {
+  attribute.attribute("onKeyPressCapture", handler)
+}
+
+pub fn on_key_up(handler: fn(KeyboardEvent) -> Nil) {
+  attribute.attribute("onKeyUp", handler)
+}
+
+pub fn on_key_up_capture(handler: fn(KeyboardEvent) -> Nil) {
+  attribute.attribute("onKeyUpCapture", handler)
+}
+
+pub fn on_lost_pointer_capture(handler: fn(PointerEvent) -> Nil) {
+  attribute.attribute("onLostPointerCapture", handler)
+}
+
+pub fn on_lost_pointer_capture_capture(handler: fn(PointerEvent) -> Nil) {
+  attribute.attribute("onLostPointerCaptureCapture", handler)
+}
+
+pub fn on_mouse_down(handler: fn(MouseEvent) -> Nil) {
+  attribute.attribute("onMouseDown", handler)
+}
+
+pub fn on_mouse_down_capture(handler: fn(MouseEvent) -> Nil) {
+  attribute.attribute("onMouseDownCapture", handler)
+}
+
+pub fn on_mouse_enter(handler: fn(MouseEvent) -> Nil) {
+  attribute.attribute("onMouseEnter", handler)
+}
+
+pub fn on_mouse_leave(handler: fn(MouseEvent) -> Nil) {
+  attribute.attribute("onMouseLeave", handler)
+}
+
+pub fn on_mouse_move(handler: fn(MouseEvent) -> Nil) {
+  attribute.attribute("onMouseMove", handler)
+}
+
+pub fn on_mouse_move_capture(handler: fn(MouseEvent) -> Nil) {
+  attribute.attribute("onMouseMoveCapture", handler)
+}
+
+pub fn on_mouse_out(handler: fn(MouseEvent) -> Nil) {
+  attribute.attribute("onMouseOut", handler)
+}
+
+pub fn on_mouse_out_capture(handler: fn(MouseEvent) -> Nil) {
+  attribute.attribute("onMouseOutCapture", handler)
+}
+
+pub fn on_mouse_up(handler: fn(MouseEvent) -> Nil) {
+  attribute.attribute("onMouseUp", handler)
+}
+
+pub fn on_mouse_up_capture(handler: fn(MouseEvent) -> Nil) {
+  attribute.attribute("onMouseUpCapture", handler)
+}
+
+pub fn on_pointer_cancel(handler: fn(PointerEvent) -> Nil) {
+  attribute.attribute("onPointerCancel", handler)
+}
+
+pub fn on_pointer_cancel_capture(handler: fn(PointerEvent) -> Nil) {
+  attribute.attribute("onPointerCancelCapture", handler)
+}
+
+pub fn on_pointer_down(handler: fn(PointerEvent) -> Nil) {
+  attribute.attribute("onPointerDown", handler)
+}
+
+pub fn on_pointer_down_capture(handler: fn(PointerEvent) -> Nil) {
+  attribute.attribute("onPointerDownCapture", handler)
+}
+
+pub fn on_pointer_enter(handler: fn(PointerEvent) -> Nil) {
+  attribute.attribute("onPointerEnter", handler)
+}
+
+pub fn on_pointer_leave(handler: fn(PointerEvent) -> Nil) {
+  attribute.attribute("onPointerLeave", handler)
+}
+
+pub fn on_pointer_move(handler: fn(PointerEvent) -> Nil) {
+  attribute.attribute("onPointerMove", handler)
+}
+
+pub fn on_pointer_move_capture(handler: fn(PointerEvent) -> Nil) {
+  attribute.attribute("onPointerMoveCapture", handler)
+}
+
+pub fn on_pointer_out(handler: fn(PointerEvent) -> Nil) {
+  attribute.attribute("onPointerOut", handler)
+}
+
+pub fn on_pointer_out_capture(handler: fn(PointerEvent) -> Nil) {
+  attribute.attribute("onPointerOutCapture", handler)
+}
+
+pub fn on_pointer_up(handler: fn(PointerEvent) -> Nil) {
+  attribute.attribute("onPointerUp", handler)
+}
+
+pub fn on_pointer_up_capture(handler: fn(PointerEvent) -> Nil) {
+  attribute.attribute("onPointerUpCapture", handler)
+}
+
+pub fn on_paste(handler: fn(ClipboardEvent) -> Nil) {
+  attribute.attribute("onPaste", handler)
+}
+
+pub fn on_paste_capture(handler: fn(ClipboardEvent) -> Nil) {
+  attribute.attribute("onPasteCapture", handler)
+}
+
+pub fn on_scroll(handler: fn(Event) -> Nil) {
+  attribute.attribute("onScroll", handler)
+}
+
+pub fn on_scroll_capture(handler: fn(Event) -> Nil) {
+  attribute.attribute("onScrollCapture", handler)
+}
+
+pub fn on_select(handler: fn(Event) -> Nil) {
+  attribute.attribute("onSelect", handler)
+}
+
+pub fn on_select_capture(handler: fn(Event) -> Nil) {
+  attribute.attribute("onSelectCapture", handler)
+}
+
+pub fn on_touch_cancel(handler: fn(TouchEvent) -> Nil) {
+  attribute.attribute("onTouchCancel", handler)
+}
+
+pub fn on_touch_cancel_capture(handler: fn(TouchEvent) -> Nil) {
+  attribute.attribute("onTouchCancelCapture", handler)
+}
+
+pub fn on_touch_end(handler: fn(TouchEvent) -> Nil) {
+  attribute.attribute("onTouchEnd", handler)
+}
+
+pub fn on_touch_end_capture(handler: fn(TouchEvent) -> Nil) {
+  attribute.attribute("onTouchEndCapture", handler)
+}
+
+pub fn on_touch_move(handler: fn(TouchEvent) -> Nil) {
+  attribute.attribute("onTouchMove", handler)
+}
+
+pub fn on_touch_move_capture(handler: fn(TouchEvent) -> Nil) {
+  attribute.attribute("onTouchMoveCapture", handler)
+}
+
+pub fn on_touch_start(handler: fn(TouchEvent) -> Nil) {
+  attribute.attribute("onTouchStart", handler)
+}
+
+pub fn on_touch_start_capture(handler: fn(TouchEvent) -> Nil) {
+  attribute.attribute("onTouchStartCapture", handler)
+}
+
+pub fn on_transition_end(handler: fn(TransitionEvent) -> Nil) {
+  attribute.attribute("onTransitionEnd", handler)
+}
+
+pub fn on_transition_end_capture(handler: fn(TransitionEvent) -> Nil) {
+  attribute.attribute("onTransitionEndCapture", handler)
+}
+
+pub fn on_wheel(handler: fn(WheelEvent) -> Nil) {
+  attribute.attribute("onWheel", handler)
+}
+
+pub fn on_wheel_capture(handler: fn(WheelEvent) -> Nil) {
+  attribute.attribute("onWheelCapture", handler)
+}
+
+pub fn on_reset(callback: fn(Event) -> Nil) {
+  attribute.attribute("onReset", callback)
+}
+
+pub fn on_reset_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onResetCapture", callback)
+}
+
+pub fn on_submit(callback: fn(Event) -> Nil) {
+  attribute.attribute("onSubmit", callback)
+}
+
+pub fn on_submit_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onSubmitCapture", callback)
+}
+
+pub fn on_cancel(callback: fn(Event) -> Nil) {
+  attribute.attribute("onCancel", callback)
+}
+
+pub fn on_cancel_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onCancelCapture", callback)
+}
+
+pub fn on_close(callback: fn(Event) -> Nil) {
+  attribute.attribute("onClose", callback)
+}
+
+pub fn on_close_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onCloseCapture", callback)
+}
+
+pub fn on_toggle(callback: fn(Event) -> Nil) {
+  attribute.attribute("onToggle", callback)
+}
+
+pub fn on_toggle_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onToggleCapture", callback)
+}
+
+pub fn on_load(callback: fn(Event) -> Nil) {
+  attribute.attribute("onLoad", callback)
+}
+
+pub fn on_load_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onLoadCapture", callback)
+}
+
+pub fn on_error(callback: fn(Event) -> Nil) {
+  attribute.attribute("onError", callback)
+}
+
+pub fn on_error_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onErrorCapture", callback)
+}
+
+pub fn on_abort(callback: fn(Event) -> Nil) {
+  attribute.attribute("onAbort", callback)
+}
+
+pub fn on_abort_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onAbortCapture", callback)
+}
+
+pub fn on_can_play(callback: fn(Event) -> Nil) {
+  attribute.attribute("onCanPlay", callback)
+}
+
+pub fn on_can_play_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onCanPlayCapture", callback)
+}
+
+pub fn on_can_play_through(callback: fn(Event) -> Nil) {
+  attribute.attribute("onCanPlayThrough", callback)
+}
+
+pub fn on_can_play_through_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onCanPlayThroughCapture", callback)
+}
+
+pub fn on_duration_change(callback: fn(Event) -> Nil) {
+  attribute.attribute("onDurationChange", callback)
+}
+
+pub fn on_duration_change_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onDurationChangeCapture", callback)
+}
+
+pub fn on_emptied(callback: fn(Event) -> Nil) {
+  attribute.attribute("onEmptied", callback)
+}
+
+pub fn on_emptied_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onEmptiedCapture", callback)
+}
+
+pub fn on_encrypted(callback: fn(Event) -> Nil) {
+  attribute.attribute("onEncrypted", callback)
+}
+
+pub fn on_encrypted_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onEncryptedCapture", callback)
+}
+
+pub fn on_ended(callback: fn(Event) -> Nil) {
+  attribute.attribute("onEnded", callback)
+}
+
+pub fn on_ended_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onEndedCapture", callback)
+}
+
+pub fn on_loaded_data(callback: fn(Event) -> Nil) {
+  attribute.attribute("onLoadedData", callback)
+}
+
+pub fn on_loaded_data_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onLoadedDataCapture", callback)
+}
+
+pub fn on_loaded_metadata(callback: fn(Event) -> Nil) {
+  attribute.attribute("onLoadedMetadata", callback)
+}
+
+pub fn on_loaded_metadata_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onLoadedMetadataCapture", callback)
+}
+
+pub fn on_load_start(callback: fn(Event) -> Nil) {
+  attribute.attribute("onLoadStart", callback)
+}
+
+pub fn on_load_start_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onLoadStartCapture", callback)
+}
+
+pub fn on_pause(callback: fn(Event) -> Nil) {
+  attribute.attribute("onPause", callback)
+}
+
+pub fn on_pause_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onPauseCapture", callback)
+}
+
+pub fn on_play(callback: fn(Event) -> Nil) {
+  attribute.attribute("onPlay", callback)
+}
+
+pub fn on_play_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onPlayCapture", callback)
+}
+
+pub fn on_playing(callback: fn(Event) -> Nil) {
+  attribute.attribute("onPlaying", callback)
+}
+
+pub fn on_playing_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onPlayingCapture", callback)
+}
+
+pub fn on_progress(callback: fn(Event) -> Nil) {
+  attribute.attribute("onProgress", callback)
+}
+
+pub fn on_progress_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onProgressCapture", callback)
+}
+
+pub fn on_rate_change(callback: fn(Event) -> Nil) {
+  attribute.attribute("onRateChange", callback)
+}
+
+pub fn on_rate_change_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onRateChangeCapture", callback)
+}
+
+pub fn on_resize(callback: fn(Event) -> Nil) {
+  attribute.attribute("onResize", callback)
+}
+
+pub fn on_resize_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onResizeCapture", callback)
+}
+
+pub fn on_seeked(callback: fn(Event) -> Nil) {
+  attribute.attribute("onSeeked", callback)
+}
+
+pub fn on_seeked_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onSeekedCapture", callback)
+}
+
+pub fn on_seeking(callback: fn(Event) -> Nil) {
+  attribute.attribute("onSeeking", callback)
+}
+
+pub fn on_seeking_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onSeekingCapture", callback)
+}
+
+pub fn on_stalled(callback: fn(Event) -> Nil) {
+  attribute.attribute("onStalled", callback)
+}
+
+pub fn on_stalled_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onStalledCapture", callback)
+}
+
+pub fn on_suspend(callback: fn(Event) -> Nil) {
+  attribute.attribute("onSuspend", callback)
+}
+
+pub fn on_suspend_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onSuspendCapture", callback)
+}
+
+pub fn on_time_update(callback: fn(Event) -> Nil) {
+  attribute.attribute("onTimeUpdate", callback)
+}
+
+pub fn on_time_update_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onTimeUpdateCapture", callback)
+}
+
+pub fn on_volume_change(callback: fn(Event) -> Nil) {
+  attribute.attribute("onVolumeChange", callback)
+}
+
+pub fn on_volume_change_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onVolumeChangeCapture", callback)
+}
+
+pub fn on_waiting(callback: fn(Event) -> Nil) {
+  attribute.attribute("onWaiting", callback)
+}
+
+pub fn on_waiting_capture(callback: fn(Event) -> Nil) {
+  attribute.attribute("onWaitingCapture", callback)
+}
diff --git a/src/react/internals/attribute.gleam b/src/react/internals/attribute.gleam
index b79a9d9..9a32d28 100644
--- a/src/react/internals/attribute.gleam
+++ b/src/react/internals/attribute.gleam
@@ -6,3 +6,7 @@ pub type Attribute {
 
 @external(javascript, "../../react.ffi.mjs", "toProps")
 pub fn to_props(attrs: List(Attribute)) -> a
+
+pub fn attribute(key: String, content: a) {
+  Attribute(key: key, content: dynamic.from(content))
+}
diff --git a/src/react/internals/coerce.gleam b/src/react/internals/coerce.gleam
new file mode 100644
index 0000000..b84851c
--- /dev/null
+++ b/src/react/internals/coerce.gleam
@@ -0,0 +1,2 @@
+@external(javascript, "../../react.ffi.mjs", "coerce")
+pub fn coerce(a: a) -> b