diff --git a/examples/09-reference/all_events.rs b/examples/09-reference/all_events.rs
index 7867e2ead3..b09b2526f5 100644
--- a/examples/09-reference/all_events.rs
+++ b/examples/09-reference/all_events.rs
@@ -72,6 +72,16 @@ fn app() -> Element {
                         onselectionchange: move |event: Event<SelectionData>| log_event(Rc::new(event.data().selection())),
                         "Selection events also include textarea ranges and direction.",
                     }
+                    label {
+                        r#for: "beforeinput-input",
+                        "Type here to inspect beforeinput (input_type, data, pre-change value)"
+                    }
+                    input {
+                        id: "beforeinput-input",
+                        style: "font: inherit; padding: 8px 10px;",
+                        onbeforeinput: move |event| log_event(event.data()),
+                        oninput: move |event| log_event(event.data()),
+                    }
                 }
                 div {
                     style: "text-align: center; padding: 20px; font-family: sans-serif; overflow: auto; height: 400px;",
diff --git a/packages/core-types/src/bubbles.rs b/packages/core-types/src/bubbles.rs
index d3c70235d9..8e41e8111a 100644
--- a/packages/core-types/src/bubbles.rs
+++ b/packages/core-types/src/bubbles.rs
@@ -26,6 +26,7 @@ pub fn event_bubbles(evt: &str) -> bool {
         "blur" => false,
         "change" => true,
         "input" => true,
+        "beforeinput" => true,
         "invalid" => true,
         "reset" => true,
         "submit" => true,
diff --git a/packages/desktop/headless_tests/events.rs b/packages/desktop/headless_tests/events.rs
index 27396a2327..0e26390057 100644
--- a/packages/desktop/headless_tests/events.rs
+++ b/packages/desktop/headless_tests/events.rs
@@ -48,6 +48,9 @@ fn app() -> Element {
             test_form_submit {}
             test_select_multiple_options {}
             test_unicode {}
+            test_before_input {}
+            test_before_input_composing {}
+            test_before_input_contenteditable {}
         }
     }
 }
@@ -629,3 +632,91 @@ fn test_unicode() -> Element {
         }
     }
 }
+
+fn test_before_input() -> Element {
+    // Set the element's value *before* dispatching so the handler observes the
+    // pre-change value (semantically what `beforeinput` exposes).
+    utils::mock_event_with_extra(
+        "before_input",
+        r#"new InputEvent("beforeinput", {
+            inputType: 'insertText',
+            data: 'x',
+            bubbles: true,
+            cancelable: true,
+            isComposing: false,
+        })"#,
+        r#"
+            element.value = "hello";
+        "#,
+    );
+
+    rsx! {
+        input {
+            id: "before_input",
+            onbeforeinput: move |event| {
+                println!("{:?}", event.data);
+                assert_eq!(event.data.input_type(), InputType::InsertText);
+                assert_eq!(event.data.data().as_deref(), Some("x"));
+                assert!(!event.data.is_composing());
+                assert_eq!(event.data.value(), "hello");
+                RECEIVED_EVENTS.with_mut(|x| *x += 1);
+            }
+        }
+    }
+}
+
+fn test_before_input_composing() -> Element {
+    utils::mock_event(
+        "before_input_composing",
+        r#"new InputEvent("beforeinput", {
+            inputType: 'insertCompositionText',
+            data: 'あ',
+            bubbles: true,
+            cancelable: true,
+            isComposing: true,
+        })"#,
+    );
+
+    rsx! {
+        input {
+            id: "before_input_composing",
+            onbeforeinput: move |event| {
+                assert_eq!(event.data.input_type(), InputType::InsertCompositionText);
+                assert_eq!(event.data.data().as_deref(), Some("あ"));
+                assert!(event.data.is_composing());
+                RECEIVED_EVENTS.with_mut(|x| *x += 1);
+            }
+        }
+    }
+}
+
+fn test_before_input_contenteditable() -> Element {
+    // Contenteditable elements have no `value` property; the JS serializer should
+    // fall back to `textContent` so desktop matches the wasm renderer.
+    utils::mock_event_with_extra(
+        "before_input_contenteditable",
+        r#"new InputEvent("beforeinput", {
+            inputType: 'insertText',
+            data: 'z',
+            bubbles: true,
+            cancelable: true,
+            isComposing: false,
+        })"#,
+        r#"
+            element.textContent = "draft";
+        "#,
+    );
+
+    rsx! {
+        div {
+            id: "before_input_contenteditable",
+            contenteditable: "true",
+            onbeforeinput: move |event| {
+                assert_eq!(event.data.input_type(), InputType::InsertText);
+                assert_eq!(event.data.data().as_deref(), Some("z"));
+                assert_eq!(event.data.value(), "draft");
+                RECEIVED_EVENTS.with_mut(|x| *x += 1);
+            }
+        }
+    }
+}
diff --git a/packages/desktop/src/events.rs b/packages/desktop/src/events.rs
index f5a2f20f25..12a7cd1e2b 100644
--- a/packages/desktop/src/events.rs
+++ b/packages/desktop/src/events.rs
@@ -38,6 +38,14 @@ impl HtmlEventConverter for SerializedHtmlEventConverter {
             .into()
     }
 
+    fn convert_before_input_data(&self, event: &PlatformEventData) -> BeforeInputData {
+        event
+            .downcast::<SerializedBeforeInputData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
+
     fn convert_cancel_data(&self, event: &PlatformEventData) -> CancelData {
         event
             .downcast::<SerializedCancelData>()
diff --git a/packages/html/src/events/before_input.rs b/packages/html/src/events/before_input.rs
new file mode 100644
index 0000000000..b072de7334
--- /dev/null
+++ b/packages/html/src/events/before_input.rs
@@ -0,0 +1,426 @@
+use dioxus_core::Event;
+use std::fmt::{self, Debug, Display};
+
+pub type BeforeInputEvent = Event<BeforeInputData>;
+
+/// Define a string-backed enum from a single source-of-truth list that maps each variant
+/// to its canonical DOM string. The two conversion directions — `as_str` (variant → string)
+/// and `From<&str>` (string → variant) — are generated from that one list, so they can never
+/// drift out of sync: a new value only has to be added in one place. The trailing
+/// `_ => Variant(String)` arm declares a catch-all variant whose owned field preserves any
+/// value not covered by the known variants.
+macro_rules! string_enum {
+    (
+        $(#[$enum_meta:meta])*
+        $vis:vis enum $name:ident {
+            $(
+                $variant:ident => $value:literal,
+            )*
+            $(#[$unknown_meta:meta])*
+            _ => $unknown:ident($unknown_ty:ty),
+        }
+    ) => {
+        $(#[$enum_meta])*
+        $vis enum $name {
+            $(
+                $variant,
+            )*
+            $(#[$unknown_meta])*
+            $unknown($unknown_ty),
+        }
+
+        impl $name {
+            /// The canonical `inputType` string for this variant, exactly as emitted by the
+            /// DOM. For [`InputType::Unknown`] this returns the original value.
+            pub fn as_str(&self) -> &str {
+                match self {
+                    $( Self::$variant => $value, )*
+                    Self::$unknown(value) => value,
+                }
+            }
+        }
+
+        impl From<&str> for $name {
+            fn from(value: &str) -> Self {
+                match value {
+                    $( $value => Self::$variant, )*
+                    other => Self::$unknown(other.to_string()),
+                }
+            }
+        }
+    };
+}
+
+string_enum! {
+    /// The kind of mutation that is about to be applied to an editable element.
+    ///
+    /// These map to the `inputType` attribute of the underlying DOM `InputEvent`. The
+    /// full list of values is defined in the W3C Input Events spec at
+    /// <https://w3c.github.io/input-events/#interface-InputEvent-Attributes>. Any value
+    /// not covered by a known variant (e.g. one introduced by a newer user agent) is
+    /// preserved verbatim in [`InputType::Unknown`].
+    #[derive(Debug, Clone, PartialEq, Eq, Hash)]
+    #[cfg_attr(feature = "serialize", derive(serde::Serialize, serde::Deserialize))]
+    #[cfg_attr(feature = "serialize", serde(from = "String", into = "String"))]
+    pub enum InputType {
+        InsertText => "insertText",
+        InsertReplacementText => "insertReplacementText",
+        InsertLineBreak => "insertLineBreak",
+        InsertParagraph => "insertParagraph",
+        InsertOrderedList => "insertOrderedList",
+        InsertUnorderedList => "insertUnorderedList",
+        InsertHorizontalRule => "insertHorizontalRule",
+        InsertFromYank => "insertFromYank",
+        InsertFromDrop => "insertFromDrop",
+        InsertFromPaste => "insertFromPaste",
+        InsertFromPasteAsQuotation => "insertFromPasteAsQuotation",
+        InsertTranspose => "insertTranspose",
+        InsertCompositionText => "insertCompositionText",
+        InsertLink => "insertLink",
+        DeleteWordBackward => "deleteWordBackward",
+        DeleteWordForward => "deleteWordForward",
+        DeleteSoftLineBackward => "deleteSoftLineBackward",
+        DeleteSoftLineForward => "deleteSoftLineForward",
+        DeleteEntireSoftLine => "deleteEntireSoftLine",
+        DeleteHardLineBackward => "deleteHardLineBackward",
+        DeleteHardLineForward => "deleteHardLineForward",
+        DeleteByDrag => "deleteByDrag",
+        DeleteByCut => "deleteByCut",
+        DeleteContent => "deleteContent",
+        DeleteContentBackward => "deleteContentBackward",
+        DeleteContentForward => "deleteContentForward",
+        HistoryUndo => "historyUndo",
+        HistoryRedo => "historyRedo",
+        FormatBold => "formatBold",
+        FormatItalic => "formatItalic",
+        FormatUnderline => "formatUnderline",
+        FormatStrikeThrough => "formatStrikeThrough",
+        FormatSuperscript => "formatSuperscript",
+        FormatSubscript => "formatSubscript",
+        FormatJustifyFull => "formatJustifyFull",
+        FormatJustifyCenter => "formatJustifyCenter",
+        FormatJustifyRight => "formatJustifyRight",
+        FormatJustifyLeft => "formatJustifyLeft",
+        FormatIndent => "formatIndent",
+        FormatOutdent => "formatOutdent",
+        FormatRemove => "formatRemove",
+        FormatSetBlockTextDirection => "formatSetBlockTextDirection",
+        FormatSetInlineTextDirection => "formatSetInlineTextDirection",
+        FormatBackColor => "formatBackColor",
+        FormatFontColor => "formatFontColor",
+        FormatFontName => "formatFontName",
+        /// An `inputType` value not covered by the known variants, preserved as-is.
+        _ => Unknown(String),
+    }
+}
+
+impl From<String> for InputType {
+    fn from(value: String) -> Self {
+        // Reuse the `&str` mapping; only `Unknown` needs to take ownership, and in
+        // that case the borrowed match already produced an owned copy.
+        InputType::from(value.as_str())
+    }
+}
+
+impl From<InputType> for String {
+    fn from(value: InputType) -> Self {
+        match value {
+            InputType::Unknown(value) => value,
+            other => other.as_str().to_string(),
+        }
+    }
+}
+
+impl Display for InputType {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        f.write_str(self.as_str())
+    }
+}
+
+/// Data fired alongside the `beforeinput` event.
+///
+/// The `beforeinput` event fires before an editable element (an `<input>`, `<textarea>`,
+/// or any element with `contenteditable="true"`) is about to be modified. It exposes
+/// the kind of mutation that is about to happen via [`BeforeInputData::input_type`]
+/// and the text that is about to be inserted (if any) via [`BeforeInputData::data`].
+///
+/// Unlike `input`, `beforeinput` is cancellable: calling `event.prevent_default()`
+/// from the handler will block the user-agent from applying the change.
+///
+/// See <https://developer.mozilla.org/en-US/docs/Web/API/Element/beforeinput_event>
+/// for the underlying DOM event.
+pub struct BeforeInputData {
+    inner: Box<dyn HasBeforeInputData>,
+}
+
+impl BeforeInputData {
+    /// Create a new `BeforeInputData` from any [`HasBeforeInputData`] implementation.
+    pub fn new(inner: impl HasBeforeInputData + 'static) -> Self {
+        Self {
+            inner: Box::new(inner),
+        }
+    }
+
+    /// The type of change that is about to be applied to the editable element.
+    ///
+    /// Returns an [`InputType`] so the common cases (e.g. [`InputType::InsertText`],
+    /// [`InputType::DeleteContentBackward`]) can be matched on directly. Values not
+    /// covered by a known variant are preserved in [`InputType::Unknown`]. The full
+    /// list is documented at
+    /// <https://w3c.github.io/input-events/#interface-InputEvent-Attributes>.
+    pub fn input_type(&self) -> InputType {
+        self.inner.input_type()
+    }
+
+    /// The characters that are about to be inserted by the user agent, if any.
+    ///
+    /// `None` is returned for input types that don't carry text data, e.g. deletions
+    /// or rich-text formatting changes.
+    pub fn data(&self) -> Option<String> {
+        self.inner.data()
+    }
+
+    /// Whether the event was fired while an IME composition session is active.
+    pub fn is_composing(&self) -> bool {
+        self.inner.is_composing()
+    }
+
+    /// The current value of the editable element, prior to the pending change.
+    pub fn value(&self) -> String {
+        self.inner.value()
+    }
+
+    /// Downcast this event to a concrete platform-specific event type.
+    #[inline(always)]
+    pub fn downcast<T: 'static>(&self) -> Option<&T> {
+        self.inner.as_any().downcast_ref::<T>()
+    }
+}
+
+impl<E: HasBeforeInputData> From<E> for BeforeInputData {
+    fn from(e: E) -> Self {
+        Self { inner: Box::new(e) }
+    }
+}
+
+impl PartialEq for BeforeInputData {
+    fn eq(&self, other: &Self) -> bool {
+        self.input_type() == other.input_type()
+            && self.data() == other.data()
+            && self.is_composing() == other.is_composing()
+            && self.value() == other.value()
+    }
+}
+
+impl Debug for BeforeInputData {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        f.debug_struct("BeforeInputData")
+            .field("input_type", &self.input_type())
+            .field("data", &self.data())
+            .field("is_composing", &self.is_composing())
+            .field("value", &self.value())
+            .finish()
+    }
+}
+
+/// An object exposing all the data backing a [`BeforeInputData`] event.
+pub trait HasBeforeInputData: std::any::Any {
+    /// The type of input change. See [`BeforeInputData::input_type`].
+    fn input_type(&self) -> InputType;
+
+    /// The text data being inserted, or `None` if the change carries no text.
+    fn data(&self) -> Option<String>;
+
+    /// Whether the event is fired during an active IME composition session.
+    fn is_composing(&self) -> bool;
+
+    /// The current value of the editable target, prior to the change.
+    fn value(&self) -> String;
+
+    /// Return self as `Any` so the event can be downcast to its concrete type.
+    fn as_any(&self) -> &dyn std::any::Any;
+}
+
+#[cfg(feature = "serialize")]
+pub use serialize::*;
+
+#[cfg(feature = "serialize")]
+mod serialize {
+    use super::*;
+
+    /// A serialized version of [`BeforeInputData`] used to transport the event
+    /// across the IPC boundary on non-web renderers.
+    #[derive(serde::Serialize, serde::Deserialize, Debug, PartialEq, Clone, Default)]
+    pub struct SerializedBeforeInputData {
+        pub input_type: String,
+
+        #[serde(default)]
+        pub data: Option<String>,
+
+        #[serde(default)]
+        pub is_composing: bool,
+
+        #[serde(default)]
+        pub value: String,
+    }
+
+    impl SerializedBeforeInputData {
+        pub fn new(
+            input_type: String,
+            data: Option<String>,
+            is_composing: bool,
+            value: String,
+        ) -> Self {
+            Self {
+                input_type,
+                data,
+                is_composing,
+                value,
+            }
+        }
+    }
+
+    impl HasBeforeInputData for SerializedBeforeInputData {
+        fn input_type(&self) -> InputType {
+            InputType::from(self.input_type.as_str())
+        }
+
+        fn data(&self) -> Option<String> {
+            self.data.clone()
+        }
+
+        fn is_composing(&self) -> bool {
+            self.is_composing
+        }
+
+        fn value(&self) -> String {
+            self.value.clone()
+        }
+
+        fn as_any(&self) -> &dyn std::any::Any {
+            self
+        }
+    }
+
+    impl From<&BeforeInputData> for SerializedBeforeInputData {
+        fn from(data: &BeforeInputData) -> Self {
+            Self {
+                input_type: data.input_type().to_string(),
+                data: data.data(),
+                is_composing: data.is_composing(),
+                value: data.value(),
+            }
+        }
+    }
+
+    impl serde::Serialize for BeforeInputData {
+        fn serialize<S: serde::Serializer>(&self, serializer: S) -> Result<S::Ok, S::Error> {
+            SerializedBeforeInputData::from(self).serialize(serializer)
+        }
+    }
+
+    impl<'de> serde::Deserialize<'de> for BeforeInputData {
+        fn deserialize<D: serde::Deserializer<'de>>(deserializer: D) -> Result<Self, D::Error> {
+            let data = SerializedBeforeInputData::deserialize(deserializer)?;
+            Ok(Self {
+                inner: Box::new(data),
+            })
+        }
+    }
+}
+
+#[cfg(all(test, feature = "serialize"))]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn serialized_before_input_data_deserializes_missing_optional_fields() {
+        // `input_type` is required; it acts as the discriminator that keeps
+        // beforeinput payloads from being silently matched by other variants
+        // of `EventData` (see packages/html/src/transit.rs).
+        let data: SerializedBeforeInputData =
+            serde_json::from_str(r#"{"input_type": "insertText"}"#).unwrap();
+        assert_eq!(data.input_type, "insertText");
+        assert_eq!(data.data, None);
+        assert!(!data.is_composing);
+        assert_eq!(data.value, "");
+    }
+
+    #[test]
+    fn serialized_before_input_data_rejects_missing_input_type() {
+        assert!(serde_json::from_str::<SerializedBeforeInputData>("{}").is_err());
+    }
+
+    #[test]
+    fn before_input_data_exposes_serialized_fields() {
+        let event = BeforeInputData::new(SerializedBeforeInputData::new(
+            "insertText".to_string(),
+            Some("a".to_string()),
+            false,
+            "hello".to_string(),
+        ));
+
+        assert_eq!(event.input_type(), InputType::InsertText);
+        assert_eq!(event.data().as_deref(), Some("a"));
+        assert!(!event.is_composing());
+        assert_eq!(event.value(), "hello");
+    }
+
+    /// The browser-side serializer (packages/interpreter/src/ts/serialize.ts)
+    /// emits these exact field names for a `beforeinput` event. Pin the shape
+    /// so changes on either side break the test instead of silently degrading
+    /// the event payload.
+    #[test]
+    fn deserializes_payload_from_js_interpreter() {
+        let payload = r#"{
+            "input_type": "insertFromPaste",
+            "data": "pasted",
+            "is_composing": false,
+            "value": "hello pasted",
+            "values": [],
+            "valid": true
+        }"#;
+
+        let data: SerializedBeforeInputData = serde_json::from_str(payload).unwrap();
+        assert_eq!(data.input_type, "insertFromPaste");
+        assert_eq!(data.data.as_deref(), Some("pasted"));
+        assert!(!data.is_composing);
+        assert_eq!(data.value, "hello pasted");
+    }
+
+    #[test]
+    fn input_type_maps_known_values_and_preserves_unknown() {
+        assert_eq!(InputType::from("insertText"), InputType::InsertText);
+        assert_eq!(
+            InputType::from("deleteContentBackward"),
+            InputType::DeleteContentBackward
+        );
+
+        // Known variants round-trip back to their canonical DOM string.
+        assert_eq!(InputType::InsertFromPaste.as_str(), "insertFromPaste");
+        assert_eq!(InputType::InsertFromPaste.to_string(), "insertFromPaste");
+
+        // Unrecognized values are preserved verbatim through the round-trip.
+        let unknown = InputType::from("insertSomethingNew");
+        assert_eq!(
+            unknown,
+            InputType::Unknown("insertSomethingNew".to_string())
+        );
+        assert_eq!(unknown.as_str(), "insertSomethingNew");
+        assert_eq!(String::from(unknown), "insertSomethingNew");
+    }
+
+    #[test]
+    fn round_trips_through_serde() {
+        let original = SerializedBeforeInputData::new(
+            "deleteContentBackward".to_string(),
+            None,
+            true,
+            "hell".to_string(),
+        );
+
+        let json = serde_json::to_string(&original).unwrap();
+        let back: SerializedBeforeInputData = serde_json::from_str(&json).unwrap();
+        assert_eq!(original, back);
+    }
+}
diff --git a/packages/html/src/events/generated.rs b/packages/html/src/events/generated.rs
index c7bb3224a9..45604bc056 100644
--- a/packages/html/src/events/generated.rs
+++ b/packages/html/src/events/generated.rs
@@ -14,6 +14,42 @@ macro_rules! with_html_event_groups {
                 ]]
                 Animation(AnimationData),
 
+                #[convert = convert_before_input_data]
+                #[events = [
+                    /// The `beforeinput` event fires before an editable element (an `<input>`,
+                    /// `<textarea>`, or any element with `contenteditable="true"`) is about to
+                    /// be modified. Unlike `oninput`, this event is cancellable — calling
+                    /// `event.prevent_default()` from the handler blocks the change.
+                    ///
+                    /// Use [`BeforeInputData::input_type`] to identify the kind of mutation
+                    /// (e.g. [`InputType::InsertText`], [`InputType::DeleteContentBackward`],
+                    /// [`InputType::InsertFromPaste`]) and [`BeforeInputData::data`] to read
+                    /// the text being inserted.
+                    ///
+                    /// ```rust
+                    /// use dioxus::prelude::*;
+                    ///
+                    /// fn App() -> Element {
+                    ///     rsx! {
+                    ///         input {
+                    ///             onbeforeinput: move |event| {
+                    ///                 // Block any attempt to insert a digit
+                    ///                 if event.data.input_type() == InputType::InsertText
+                    ///                     && event.data.data().is_some_and(|d| d.chars().any(|c| c.is_ascii_digit()))
+                    ///                 {
+                    ///                     event.prevent_default();
+                    ///                 }
+                    ///             }
+                    ///         }
+                    ///     }
+                    /// }
+                    /// ```
+                    ///
+                    /// See <https://developer.mozilla.org/en-US/docs/Web/API/Element/beforeinput_event>.
+                    onbeforeinput => beforeinput,
+                ]]
+                BeforeInput(BeforeInputData),
+
                 #[convert = convert_cancel_data]
                 #[events = [
                     oncancel => cancel,
diff --git a/packages/html/src/events/mod.rs b/packages/html/src/events/mod.rs
index 3dac421140..8591698c54 100644
--- a/packages/html/src/events/mod.rs
+++ b/packages/html/src/events/mod.rs
@@ -111,6 +111,7 @@ impl PlatformEventData {
 mod generated;
 
 mod animation;
+mod before_input;
 mod cancel;
 mod clipboard;
 mod composition;
@@ -133,6 +134,7 @@ mod visible;
 mod wheel;
 
 pub use animation::*;
+pub use before_input::*;
 pub use cancel::*;
 pub use clipboard::*;
 pub use composition::*;
diff --git a/packages/html/src/transit.rs b/packages/html/src/transit.rs
index 4a3434af68..5c978c4f32 100644
--- a/packages/html/src/transit.rs
+++ b/packages/html/src/transit.rs
@@ -72,6 +72,7 @@ impl HtmlEvent {
 #[serde(untagged)]
 #[non_exhaustive]
 pub enum EventData {
+    BeforeInput(SerializedBeforeInputData),
     Cancel(SerializedCancelData),
     Mouse(SerializedMouseData),
     Clipboard(SerializedClipboardData),
@@ -98,6 +99,9 @@ pub enum EventData {
 impl EventData {
     pub fn into_any(self) -> Rc<dyn Any> {
         match self {
+            EventData::BeforeInput(data) => {
+                Rc::new(PlatformEventData::new(Box::new(data))) as Rc<dyn Any>
+            }
             EventData::Cancel(data) => {
                 Rc::new(PlatformEventData::new(Box::new(data))) as Rc<dyn Any>
             }
@@ -161,6 +165,36 @@ impl EventData {
     }
 }
 
+#[test]
+fn beforeinput_event_deserializes_from_interpreter_payload() {
+    let raw = r#"
+{
+    "element": 0,
+    "name": "beforeinput",
+    "bubbles": true,
+    "data": {
+        "input_type": "insertText",
+        "data": "x",
+        "is_composing": false,
+        "value": "hello"
+    }
+}
+    "#;
+
+    let event: HtmlEvent = serde_json::from_str(raw).unwrap();
+    assert_eq!(event.name, "beforeinput");
+    assert!(event.bubbles);
+    match event.data {
+        EventData::BeforeInput(data) => {
+            assert_eq!(data.input_type, "insertText");
+            assert_eq!(data.data.as_deref(), Some("x"));
+            assert!(!data.is_composing);
+            assert_eq!(data.value, "hello");
+        }
+        other => panic!("expected EventData::BeforeInput, got {other:?}"),
+    }
+}
+
 #[test]
 fn test_back_and_forth() {
     let data = HtmlEvent {
@@ -213,6 +247,14 @@ impl HtmlEventConverter for SerializedHtmlEventConverter {
             .into()
     }
 
+    fn convert_before_input_data(&self, event: &PlatformEventData) -> BeforeInputData {
+        event
+            .downcast::<SerializedBeforeInputData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
+
     fn convert_cancel_data(&self, event: &PlatformEventData) -> CancelData {
         event
             .downcast::<SerializedCancelData>()
diff --git a/packages/interpreter/src/js/hash.txt b/packages/interpreter/src/js/hash.txt
index eb337b47e6..e67eb20a4b 100644
--- a/packages/interpreter/src/js/hash.txt
+++ b/packages/interpreter/src/js/hash.txt
@@ -1 +1 @@
-[17669692872757955279, 11420464406527728232, 3770103091118609057, 5444526391971481782, 18429234726379217184, 5052021921702764563, 15111342379266332823, 11339769846046015954]
\ No newline at end of file
+[17669692872757955279, 11420464406527728232, 3770103091118609057, 5444526391971481782, 18429234726379217184, 5052021921702764563, 11104438200171793888, 11339769846046015954]
\ No newline at end of file
diff --git a/packages/interpreter/src/js/native.js b/packages/interpreter/src/js/native.js
index 38924f5718..658b669a47 100644
--- a/packages/interpreter/src/js/native.js
+++ b/packages/interpreter/src/js/native.js
@@ -1 +1 @@
-function serializeEvent(event,target){let contents={},extend=(obj)=>contents={...contents,...obj};if(event instanceof WheelEvent)extend(serializeWheelEvent(event));if(event instanceof MouseEvent)extend(serializeMouseEvent(event));if(event instanceof KeyboardEvent)extend(serializeKeyboardEvent(event));if(event instanceof InputEvent)extend(serializeInputEvent(event,target));if(event instanceof PointerEvent)extend(serializePointerEvent(event));if(event instanceof AnimationEvent)extend(serializeAnimationEvent(event));if(event instanceof TransitionEvent)extend({property_name:event.propertyName,elapsed_time:event.elapsedTime,pseudo_element:event.pseudoElement});if(event instanceof CompositionEvent)extend({data:event.data});if(event instanceof DragEvent)extend(serializeDragEvent(event));if(event instanceof FocusEvent)extend({});if(event instanceof ClipboardEvent)extend({});if(event.type==="select"||event.type==="selectstart"||event.type==="selectionchange")extend(serializeSelectionEvent(event,target));if(event instanceof CustomEvent){let detail=event.detail;if(detail instanceof ResizeObserverEntry)extend(serializeResizeEventDetail(detail));else if(detail instanceof IntersectionObserverEntry)extend(serializeIntersectionEventDetail(detail))}if(typeof TouchEvent<"u"&&event instanceof TouchEvent)extend(serializeTouchEvent(event));if(event.type==="submit"||event.type==="reset"||event.type==="click"||event.type==="change"||event.type==="input")extend(serializeInputEvent(event,target));if(event instanceof DragEvent){let files=[];if(event.dataTransfer&&event.dataTransfer.files)for(let i=0;i<event.dataTransfer.files.length;i++){let file=event.dataTransfer.files[i],data={path:file.name,size:file.size,last_modified:file.lastModified,content_type:file.type};files.push({key:file.name,file:data})}extend({files})}if(event.type==="scroll"||event.type==="scrollend")extend(serializeScrollEvent(event));return contents}function toSerializableResizeObserverSize(size,is_inline_width){return[is_inline_width?size.inlineSize:size.blockSize,is_inline_width?size.blockSize:size.inlineSize]}function serializeResizeEventDetail(detail){let is_inline_width=!0;if(detail.target instanceof HTMLElement){if(window.getComputedStyle(detail.target).getPropertyValue("writing-mode")!=="horizontal-tb")is_inline_width=!1}return{border_box_size:detail.borderBoxSize!==void 0?toSerializableResizeObserverSize(detail.borderBoxSize[0],is_inline_width):detail.contentRect,content_box_size:detail.contentBoxSize!==void 0?toSerializableResizeObserverSize(detail.contentBoxSize[0],is_inline_width):detail.contentRect,content_rect:detail.contentRect}}function serializeIntersectionEventDetail(detail){return{bounding_client_rect:detail.boundingClientRect,intersection_ratio:detail.intersectionRatio,intersection_rect:detail.intersectionRect,is_intersecting:detail.isIntersecting,root_bounds:detail.rootBounds,time_ms:Math.floor(Date.now()+detail.time)}}function serializeInputEvent(event,target){let contents={};if(target instanceof HTMLElement){let values=extractSerializedFormValues(event,target);contents.values=values.values,contents.valid=values.valid}if(event.target instanceof HTMLInputElement){let target2=event.target,value=target2.value??target2.textContent??"";if(target2.type==="checkbox")value=target2.checked?"true":"false";else if(target2.type==="radio")value=target2.value;contents.value=value}if(event.target instanceof HTMLTextAreaElement)contents.value=event.target.value;if(event.target instanceof HTMLSelectElement)contents.value=retrieveSelectValue(event.target).join(",");if(contents.value===void 0)contents.value="";return contents}function serializeWheelEvent(event){return{delta_x:event.deltaX,delta_y:event.deltaY,delta_z:event.deltaZ,delta_mode:event.deltaMode}}function serializeTouchEvent(event){return{alt_key:event.altKey,ctrl_key:event.ctrlKey,meta_key:event.metaKey,shift_key:event.shiftKey,changed_touches:serializeTouchList(event.changedTouches),target_touches:serializeTouchList(event.targetTouches),touches:serializeTouchList(event.touches)}}function serializePointerEvent(event){return{alt_key:event.altKey,button:event.button,buttons:event.buttons,client_x:event.clientX,client_y:event.clientY,ctrl_key:event.ctrlKey,meta_key:event.metaKey,page_x:event.pageX,page_y:event.pageY,screen_x:event.screenX,screen_y:event.screenY,shift_key:event.shiftKey,pointer_id:event.pointerId,width:event.width,height:event.height,pressure:event.pressure,tangential_pressure:event.tangentialPressure,tilt_x:event.tiltX,tilt_y:event.tiltY,twist:event.twist,pointer_type:event.pointerType,is_primary:event.isPrimary}}function serializeTouchList(touchList){let serializedTouches=[];for(let i=0;i<touchList.length;i++){let touch=touchList[i];serializedTouches.push({identifier:touch.identifier,client_x:touch.clientX,client_y:touch.clientY,page_x:touch.pageX,page_y:touch.pageY,screen_x:touch.screenX,screen_y:touch.screenY,radius_x:touch.radiusX,radius_y:touch.radiusY,rotation_angle:touch.rotationAngle,force:touch.force})}return serializedTouches}function serializeMouseEvent(event){return{alt_key:event.altKey,button:event.button,buttons:event.buttons,client_x:event.clientX,client_y:event.clientY,ctrl_key:event.ctrlKey,meta_key:event.metaKey,offset_x:event.offsetX,offset_y:event.offsetY,page_x:event.pageX,page_y:event.pageY,screen_x:event.screenX,screen_y:event.screenY,shift_key:event.shiftKey}}function serializeKeyboardEvent(event){return{char_code:event.charCode,is_composing:event.isComposing,key:event.key,alt_key:event.altKey,ctrl_key:event.ctrlKey,meta_key:event.metaKey,key_code:event.keyCode,shift_key:event.shiftKey,location:event.location,repeat:event.repeat,which:event.which,code:event.code}}function serializeAnimationEvent(event){return{animation_name:event.animationName,elapsed_time:event.elapsedTime,pseudo_element:event.pseudoElement}}function serializeDragEvent(event){let data_transfer=event.dataTransfer||new DataTransfer,items=[],files=[],effect_allowed=data_transfer.effectAllowed,drop_effect=data_transfer.dropEffect;for(let i=0;i<data_transfer.items.length;i++){let item=data_transfer.items[i],data;if(item.kind==="string")data=data_transfer.getData(item.type);else data=item.getAsFile()?.name||"";items.push({kind:item.kind,type_:item.type,data})}for(let i=0;i<data_transfer.files.length;i++){let file=data_transfer.files[i];files.push({name:file.name,path:file.name,size:file.size,last_modified:file.lastModified,content_type:file.type,contents:void 0})}return{mouse:{alt_key:event.altKey,ctrl_key:event.ctrlKey,meta_key:event.metaKey,shift_key:event.shiftKey,...serializeMouseEvent(event)},data_transfer:{items,files,effect_allowed,drop_effect}}}function serializeScrollEvent(event){let scrollLeft=0,scrollTop=0,scrollWidth=0,scrollHeight=0,clientWidth=0,clientHeight=0;if(event.target instanceof Element)scrollLeft=event.target.scrollLeft,scrollTop=event.target.scrollTop,scrollWidth=event.target.scrollWidth,scrollHeight=event.target.scrollHeight,clientWidth=event.target.clientWidth,clientHeight=event.target.clientHeight;else if(event.target===document)scrollLeft=window.scrollX||document.documentElement.scrollLeft,scrollTop=window.scrollY||document.documentElement.scrollTop,scrollWidth=document.documentElement.scrollWidth,scrollHeight=document.documentElement.scrollHeight,clientWidth=document.documentElement.clientWidth,clientHeight=document.documentElement.clientHeight;return{scroll_left:scrollLeft,scroll_top:scrollTop,scroll_width:scrollWidth,scroll_height:scrollHeight,client_width:clientWidth,client_height:clientHeight}}function serializeSelectionEvent(event,target){let selectionStart=null,selectionEnd=null,selectionDirection=null,textControl=textControlTarget(target)??textControlTarget(event.target);if(textControl)selectionStart=textControl.selectionStart,selectionEnd=textControl.selectionEnd,selectionDirection=textControl.selectionDirection||"none";return{selection_start:selectionStart,selection_end:selectionEnd,selection_direction:selectionDirection}}function textControlTarget(target){if(target instanceof HTMLInputElement||target instanceof HTMLTextAreaElement)return target;return null}function extractSerializedFormValues(event,target){let contents={values:[]},form=target.closest("form");if(form){if(event.type==="input"||event.type==="change"||event.type==="submit"||event.type==="reset"||event.type==="click")contents=retrieveFormValues(form)}return contents}function retrieveFormValues(form){let formData=new FormData(form),contents=[];return formData.forEach((value,key)=>{if(value instanceof File){let fileData={path:value.name,size:value.size,last_modified:value.lastModified,content_type:value.type};contents.push({key,file:fileData})}else contents.push({key,text:value})}),{valid:form.checkValidity(),values:contents}}function retrieveSelectValue(target){let options=target.selectedOptions,values=[];for(let i=0;i<options.length;i++)values.push(options[i].value);return values}var JSChannel_;if(RawInterpreter!==void 0&&RawInterpreter!==null)JSChannel_=RawInterpreter;class NativeInterpreter extends JSChannel_{intercept_link_redirects;ipc;edits;baseUri;eventsPath;headless;kickStylesheets;queuedBytes=[];liveview;constructor(baseUri,headless){super();this.baseUri=baseUri,this.eventsPath=`${baseUri}/__events`,this.kickStylesheets=!1,this.headless=headless}initialize(root){this.intercept_link_redirects=!0,this.liveview=!1,window.addEventListener("dragover",function(e){if(e.target instanceof Element&&e.target.tagName!="INPUT")e.preventDefault()},!1),window.addEventListener("drop",function(e){if(!(e.target instanceof Element))return;e.preventDefault()},!1),window.addEventListener("click",(event)=>{let target=event.target;if(target instanceof HTMLInputElement&&target.getAttribute("type")==="file"){let target_id=getTargetId(target);if(target_id!==null){if(target instanceof HTMLInputElement&&target.getAttribute("type")==="file"){event.preventDefault();let contents=serializeEvent(event,target),target_name=target.getAttribute("name")||"",requestData={event:"change&input",accept:target.getAttribute("accept"),directory:target.getAttribute("webkitdirectory")==="true",multiple:target.hasAttribute("multiple"),target:target_id,bubbles:event.bubbles,target_name,values:contents.values};this.fetchAgainstHost("__file_dialog",requestData).then((response)=>response.json()).then((resp)=>{let formObjects=resp.values,dataTransfer=new DataTransfer;for(let formObject of formObjects)if(formObject.key==target_name&&formObject.file!=null){let file=new File([],formObject.file.path,{type:formObject.file.content_type,lastModified:formObject.file.last_modified});dataTransfer.items.add(file)}target.files=dataTransfer.files;let body={data:contents,element:target_id,bubbles:event.bubbles};contents.values=formObjects,this.sendSerializedEvent({...body,name:"input"}),this.sendSerializedEvent({...body,name:"change"})});return}}}}),this.ipc=window.ipc;let handler=(event)=>this.handleEvent(event,event.type,event.bubbles);super.initialize(root,handler)}fetchAgainstHost(path,data){let encoded_data=new TextEncoder().encode(JSON.stringify(data)),base64data=btoa(String.fromCharCode.apply(null,Array.from(encoded_data)));return fetch(`${this.baseUri}/${path}`,{method:"GET",headers:{"x-dioxus-data":base64data}})}sendIpcMessage(method,params={}){let body=JSON.stringify({method,params});this.ipc.postMessage(body)}scrollTo(id,options){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scrollIntoView(options),!0;return!1}scroll(id,x,y,behavior){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scroll({top:y,left:x,behavior}),!0;return!1}getScrollHeight(id){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scrollHeight}getScrollLeft(id){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scrollLeft}getScrollTop(id){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scrollTop}getScrollWidth(id){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scrollWidth}getClientRect(id){let node=this.nodes[id];if(node instanceof HTMLElement){let rect=node.getBoundingClientRect();return{type:"GetClientRect",origin:[rect.x,rect.y],size:[rect.width,rect.height]}}}setFocus(id,focus){let node=this.nodes[id];if(node instanceof HTMLElement)if(focus)node.focus();else node.blur()}handleWindowsDragDrop(){if(window.dxDragLastElement){let dragLeaveEvent=new DragEvent("dragleave",{bubbles:!0,cancelable:!0});window.dxDragLastElement.dispatchEvent(dragLeaveEvent);let data=new DataTransfer,file=new File(["content"],"file.txt",{type:"text/plain"});data.items.add(file);let dragDropEvent=new DragEvent("drop",{bubbles:!0,cancelable:!0,dataTransfer:data});window.dxDragLastElement.dispatchEvent(dragDropEvent),window.dxDragLastElement=null}}handleWindowsDragOver(xPos,yPos){let displayScaleFactor=window.devicePixelRatio||1;xPos/=displayScaleFactor,yPos/=displayScaleFactor;let element=document.elementFromPoint(xPos,yPos);if(element!=window.dxDragLastElement){if(window.dxDragLastElement){let dragLeaveEvent=new DragEvent("dragleave",{bubbles:!0,cancelable:!0});window.dxDragLastElement.dispatchEvent(dragLeaveEvent)}let dragOverEvent=new DragEvent("dragover",{bubbles:!0,cancelable:!0});element.dispatchEvent(dragOverEvent),window.dxDragLastElement=element}}handleWindowsDragLeave(){if(window.dxDragLastElement){let dragLeaveEvent=new DragEvent("dragleave",{bubbles:!0,cancelable:!0});window.dxDragLastElement.dispatchEvent(dragLeaveEvent),window.dxDragLastElement=null}}loadChild(array){let node=this.stack[this.stack.length-1];for(let i=0;i<array.length;i++){let end=array[i];for(node=node.firstChild;end>0;end--)node=node.nextSibling}return node}appendChildren(id,many){let root=this.nodes[id],els=this.stack.splice(this.stack.length-many);for(let k=0;k<many;k++)root.appendChild(els[k])}handleEvent(event,name,bubbles){let target=event.target,element=getTargetId(target),contents=serializeEvent(event,target),body={name,data:contents,element,bubbles};if(this.liveview&&target instanceof HTMLInputElement&&(event.type==="change"||event.type==="input")){if(target.getAttribute("type")==="file"){this.readFiles(target,contents,bubbles,element,name);return}}let response=this.sendSerializedEvent(body);if(response){if(response.preventDefault)event.preventDefault();else if(target instanceof Element&&event.type==="click")this.handleClickNavigate(event,target);if(response.stopPropagation)event.stopPropagation()}}sendSerializedEvent(body){if(this.liveview)this.sendIpcMessage("user_event",body);else return handleVirtualdomEventSync(this.eventsPath,JSON.stringify(body))}handleClickNavigate(event,target){if(!this.intercept_link_redirects)return;let a_element=target.closest("a");if(a_element){event.preventDefault();let href=a_element.getAttribute("href");if(href!==""&&href!==null&&href!==void 0)this.sendIpcMessage("browser_open",{href})}}enqueueBytes(bytes){this.queuedBytes.push(bytes)}flushQueuedBytes(){let byteArray=this.queuedBytes;this.queuedBytes=[];for(let bytes of byteArray)this.run_from_bytes(bytes)}rafEdits(bytes){if(this.headless)this.run_from_bytes(bytes),this.markEditsFinished();else this.enqueueBytes(bytes),requestAnimationFrame(()=>{this.flushQueuedBytes(),this.markEditsFinished()})}waitForRequest(editsPath,required_server_key){this.edits=new WebSocket(editsPath);let authenticated=!1;this.edits.onclose=()=>{setTimeout(()=>{if(this.edits.url!=editsPath)return;this.waitForRequest(editsPath,required_server_key)},100)},this.edits.onmessage=(event)=>{let data=event.data;if(data instanceof Blob){if(!authenticated)return;data.arrayBuffer().then((buffer)=>{this.rafEdits(buffer)})}else if(typeof data==="string"){if(data===required_server_key){authenticated=!0;return}}}}markEditsFinished(){this.edits.send(new ArrayBuffer(0))}kickAllStylesheetsOnPage(){let stylesheets=document.querySelectorAll("link[rel=stylesheet]");for(let i=0;i<stylesheets.length;i++){let sheet=stylesheets[i],splitByQuery=sheet.href.split("?"),url=splitByQuery[0],query=splitByQuery[1];if(!query)query="";let queryParams=new URLSearchParams(query);queryParams.delete("dx_force_reload"),queryParams.append("dx_force_reload",Math.random().toString()),sheet.href=`${url}?${queryParams}`}}async readFiles(target,contents,bubbles,realId,name){let files=target.files,file_contents={};for(let i=0;i<files.length;i++){let file=files[i];file_contents[file.name]=Array.from(new Uint8Array(await file.arrayBuffer()))}contents.files={files:file_contents};let message=this.sendSerializedEvent({name,element:realId,data:contents,bubbles});this.ipc.postMessage(message)}}function handleVirtualdomEventSync(endpoint,contents){let xhr=new XMLHttpRequest;xhr.open("POST",endpoint,!1),xhr.setRequestHeader("Content-Type","application/json");let contents_bytes=new TextEncoder().encode(contents),contents_base64=btoa(String.fromCharCode.apply(null,contents_bytes));return xhr.setRequestHeader("dioxus-data",contents_base64),xhr.send(),JSON.parse(xhr.responseText)}function getTargetId(target){if(!(target instanceof Node))return null;let ourTarget=target,realId=null;while(realId==null){if(ourTarget===null)return null;if(ourTarget instanceof Element)realId=ourTarget.getAttribute("data-dioxus-id");ourTarget=ourTarget.parentNode}return parseInt(realId)}export{NativeInterpreter};
+function serializeEvent(event,target){let contents={},extend=(obj)=>contents={...contents,...obj};if(event instanceof WheelEvent)extend(serializeWheelEvent(event));if(event instanceof MouseEvent)extend(serializeMouseEvent(event));if(event instanceof KeyboardEvent)extend(serializeKeyboardEvent(event));if(event instanceof InputEvent){if(extend(serializeInputEvent(event,target)),event.type==="beforeinput")extend({input_type:event.inputType,is_composing:event.isComposing,data:event.data})}if(event instanceof PointerEvent)extend(serializePointerEvent(event));if(event instanceof AnimationEvent)extend(serializeAnimationEvent(event));if(event instanceof TransitionEvent)extend({property_name:event.propertyName,elapsed_time:event.elapsedTime,pseudo_element:event.pseudoElement});if(event instanceof CompositionEvent)extend({data:event.data});if(event instanceof DragEvent)extend(serializeDragEvent(event));if(event instanceof FocusEvent)extend({});if(event instanceof ClipboardEvent)extend({});if(event.type==="select"||event.type==="selectstart"||event.type==="selectionchange")extend(serializeSelectionEvent(event,target));if(event instanceof CustomEvent){let detail=event.detail;if(detail instanceof ResizeObserverEntry)extend(serializeResizeEventDetail(detail));else if(detail instanceof IntersectionObserverEntry)extend(serializeIntersectionEventDetail(detail))}if(typeof TouchEvent<"u"&&event instanceof TouchEvent)extend(serializeTouchEvent(event));if(event.type==="submit"||event.type==="reset"||event.type==="click"||event.type==="change"||event.type==="input")extend(serializeInputEvent(event,target));if(event instanceof DragEvent){let files=[];if(event.dataTransfer&&event.dataTransfer.files)for(let i=0;i<event.dataTransfer.files.length;i++){let file=event.dataTransfer.files[i],data={path:file.name,size:file.size,last_modified:file.lastModified,content_type:file.type};files.push({key:file.name,file:data})}extend({files})}if(event.type==="scroll"||event.type==="scrollend")extend(serializeScrollEvent(event));return contents}function toSerializableResizeObserverSize(size,is_inline_width){return[is_inline_width?size.inlineSize:size.blockSize,is_inline_width?size.blockSize:size.inlineSize]}function serializeResizeEventDetail(detail){let is_inline_width=!0;if(detail.target instanceof HTMLElement){if(window.getComputedStyle(detail.target).getPropertyValue("writing-mode")!=="horizontal-tb")is_inline_width=!1}return{border_box_size:detail.borderBoxSize!==void 0?toSerializableResizeObserverSize(detail.borderBoxSize[0],is_inline_width):detail.contentRect,content_box_size:detail.contentBoxSize!==void 0?toSerializableResizeObserverSize(detail.contentBoxSize[0],is_inline_width):detail.contentRect,content_rect:detail.contentRect}}function serializeIntersectionEventDetail(detail){return{bounding_client_rect:detail.boundingClientRect,intersection_ratio:detail.intersectionRatio,intersection_rect:detail.intersectionRect,is_intersecting:detail.isIntersecting,root_bounds:detail.rootBounds,time_ms:Math.floor(Date.now()+detail.time)}}function serializeInputEvent(event,target){let contents={};if(target instanceof HTMLElement){let values=extractSerializedFormValues(event,target);contents.values=values.values,contents.valid=values.valid}if(event.target instanceof HTMLInputElement){let target2=event.target,value=target2.value??target2.textContent??"";if(target2.type==="checkbox")value=target2.checked?"true":"false";else if(target2.type==="radio")value=target2.value;contents.value=value}if(event.target instanceof HTMLTextAreaElement)contents.value=event.target.value;if(event.target instanceof HTMLSelectElement)contents.value=retrieveSelectValue(event.target).join(",");if(contents.value===void 0)if(event.target instanceof HTMLElement)contents.value=event.target.textContent??"";else contents.value="";return contents}function serializeWheelEvent(event){return{delta_x:event.deltaX,delta_y:event.deltaY,delta_z:event.deltaZ,delta_mode:event.deltaMode}}function serializeTouchEvent(event){return{alt_key:event.altKey,ctrl_key:event.ctrlKey,meta_key:event.metaKey,shift_key:event.shiftKey,changed_touches:serializeTouchList(event.changedTouches),target_touches:serializeTouchList(event.targetTouches),touches:serializeTouchList(event.touches)}}function serializePointerEvent(event){return{alt_key:event.altKey,button:event.button,buttons:event.buttons,client_x:event.clientX,client_y:event.clientY,ctrl_key:event.ctrlKey,meta_key:event.metaKey,page_x:event.pageX,page_y:event.pageY,screen_x:event.screenX,screen_y:event.screenY,shift_key:event.shiftKey,pointer_id:event.pointerId,width:event.width,height:event.height,pressure:event.pressure,tangential_pressure:event.tangentialPressure,tilt_x:event.tiltX,tilt_y:event.tiltY,twist:event.twist,pointer_type:event.pointerType,is_primary:event.isPrimary}}function serializeTouchList(touchList){let serializedTouches=[];for(let i=0;i<touchList.length;i++){let touch=touchList[i];serializedTouches.push({identifier:touch.identifier,client_x:touch.clientX,client_y:touch.clientY,page_x:touch.pageX,page_y:touch.pageY,screen_x:touch.screenX,screen_y:touch.screenY,radius_x:touch.radiusX,radius_y:touch.radiusY,rotation_angle:touch.rotationAngle,force:touch.force})}return serializedTouches}function serializeMouseEvent(event){return{alt_key:event.altKey,button:event.button,buttons:event.buttons,client_x:event.clientX,client_y:event.clientY,ctrl_key:event.ctrlKey,meta_key:event.metaKey,offset_x:event.offsetX,offset_y:event.offsetY,page_x:event.pageX,page_y:event.pageY,screen_x:event.screenX,screen_y:event.screenY,shift_key:event.shiftKey}}function serializeKeyboardEvent(event){return{char_code:event.charCode,is_composing:event.isComposing,key:event.key,alt_key:event.altKey,ctrl_key:event.ctrlKey,meta_key:event.metaKey,key_code:event.keyCode,shift_key:event.shiftKey,location:event.location,repeat:event.repeat,which:event.which,code:event.code}}function serializeAnimationEvent(event){return{animation_name:event.animationName,elapsed_time:event.elapsedTime,pseudo_element:event.pseudoElement}}function serializeDragEvent(event){let data_transfer=event.dataTransfer||new DataTransfer,items=[],files=[],effect_allowed=data_transfer.effectAllowed,drop_effect=data_transfer.dropEffect;for(let i=0;i<data_transfer.items.length;i++){let item=data_transfer.items[i],data;if(item.kind==="string")data=data_transfer.getData(item.type);else data=item.getAsFile()?.name||"";items.push({kind:item.kind,type_:item.type,data})}for(let i=0;i<data_transfer.files.length;i++){let file=data_transfer.files[i];files.push({name:file.name,path:file.name,size:file.size,last_modified:file.lastModified,content_type:file.type,contents:void 0})}return{mouse:{alt_key:event.altKey,ctrl_key:event.ctrlKey,meta_key:event.metaKey,shift_key:event.shiftKey,...serializeMouseEvent(event)},data_transfer:{items,files,effect_allowed,drop_effect}}}function serializeScrollEvent(event){let scrollLeft=0,scrollTop=0,scrollWidth=0,scrollHeight=0,clientWidth=0,clientHeight=0;if(event.target instanceof Element)scrollLeft=event.target.scrollLeft,scrollTop=event.target.scrollTop,scrollWidth=event.target.scrollWidth,scrollHeight=event.target.scrollHeight,clientWidth=event.target.clientWidth,clientHeight=event.target.clientHeight;else if(event.target===document)scrollLeft=window.scrollX||document.documentElement.scrollLeft,scrollTop=window.scrollY||document.documentElement.scrollTop,scrollWidth=document.documentElement.scrollWidth,scrollHeight=document.documentElement.scrollHeight,clientWidth=document.documentElement.clientWidth,clientHeight=document.documentElement.clientHeight;return{scroll_left:scrollLeft,scroll_top:scrollTop,scroll_width:scrollWidth,scroll_height:scrollHeight,client_width:clientWidth,client_height:clientHeight}}function serializeSelectionEvent(event,target){let selectionStart=null,selectionEnd=null,selectionDirection=null,textControl=textControlTarget(target)??textControlTarget(event.target);if(textControl)selectionStart=textControl.selectionStart,selectionEnd=textControl.selectionEnd,selectionDirection=textControl.selectionDirection||"none";return{selection_start:selectionStart,selection_end:selectionEnd,selection_direction:selectionDirection}}function textControlTarget(target){if(target instanceof HTMLInputElement||target instanceof HTMLTextAreaElement)return target;return null}function extractSerializedFormValues(event,target){let contents={values:[]},form=target.closest("form");if(form){if(event.type==="input"||event.type==="change"||event.type==="submit"||event.type==="reset"||event.type==="click")contents=retrieveFormValues(form)}return contents}function retrieveFormValues(form){let formData=new FormData(form),contents=[];return formData.forEach((value,key)=>{if(value instanceof File){let fileData={path:value.name,size:value.size,last_modified:value.lastModified,content_type:value.type};contents.push({key,file:fileData})}else contents.push({key,text:value})}),{valid:form.checkValidity(),values:contents}}function retrieveSelectValue(target){let options=target.selectedOptions,values=[];for(let i=0;i<options.length;i++)values.push(options[i].value);return values}var JSChannel_;if(RawInterpreter!==void 0&&RawInterpreter!==null)JSChannel_=RawInterpreter;class NativeInterpreter extends JSChannel_{intercept_link_redirects;ipc;edits;baseUri;eventsPath;headless;kickStylesheets;queuedBytes=[];liveview;constructor(baseUri,headless){super();this.baseUri=baseUri,this.eventsPath=`${baseUri}/__events`,this.kickStylesheets=!1,this.headless=headless}initialize(root){this.intercept_link_redirects=!0,this.liveview=!1,window.addEventListener("dragover",function(e){if(e.target instanceof Element&&e.target.tagName!="INPUT")e.preventDefault()},!1),window.addEventListener("drop",function(e){if(!(e.target instanceof Element))return;e.preventDefault()},!1),window.addEventListener("click",(event)=>{let target=event.target;if(target instanceof HTMLInputElement&&target.getAttribute("type")==="file"){let target_id=getTargetId(target);if(target_id!==null){if(target instanceof HTMLInputElement&&target.getAttribute("type")==="file"){event.preventDefault();let contents=serializeEvent(event,target),target_name=target.getAttribute("name")||"",requestData={event:"change&input",accept:target.getAttribute("accept"),directory:target.getAttribute("webkitdirectory")==="true",multiple:target.hasAttribute("multiple"),target:target_id,bubbles:event.bubbles,target_name,values:contents.values};this.fetchAgainstHost("__file_dialog",requestData).then((response)=>response.json()).then((resp)=>{let formObjects=resp.values,dataTransfer=new DataTransfer;for(let formObject of formObjects)if(formObject.key==target_name&&formObject.file!=null){let file=new File([],formObject.file.path,{type:formObject.file.content_type,lastModified:formObject.file.last_modified});dataTransfer.items.add(file)}target.files=dataTransfer.files;let body={data:contents,element:target_id,bubbles:event.bubbles};contents.values=formObjects,this.sendSerializedEvent({...body,name:"input"}),this.sendSerializedEvent({...body,name:"change"})});return}}}}),this.ipc=window.ipc;let handler=(event)=>this.handleEvent(event,event.type,event.bubbles);super.initialize(root,handler)}fetchAgainstHost(path,data){let encoded_data=new TextEncoder().encode(JSON.stringify(data)),base64data=btoa(String.fromCharCode.apply(null,Array.from(encoded_data)));return fetch(`${this.baseUri}/${path}`,{method:"GET",headers:{"x-dioxus-data":base64data}})}sendIpcMessage(method,params={}){let body=JSON.stringify({method,params});this.ipc.postMessage(body)}scrollTo(id,options){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scrollIntoView(options),!0;return!1}scroll(id,x,y,behavior){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scroll({top:y,left:x,behavior}),!0;return!1}getScrollHeight(id){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scrollHeight}getScrollLeft(id){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scrollLeft}getScrollTop(id){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scrollTop}getScrollWidth(id){let node=this.nodes[id];if(node instanceof HTMLElement)return node.scrollWidth}getClientRect(id){let node=this.nodes[id];if(node instanceof HTMLElement){let rect=node.getBoundingClientRect();return{type:"GetClientRect",origin:[rect.x,rect.y],size:[rect.width,rect.height]}}}setFocus(id,focus){let node=this.nodes[id];if(node instanceof HTMLElement)if(focus)node.focus();else node.blur()}handleWindowsDragDrop(){if(window.dxDragLastElement){let dragLeaveEvent=new DragEvent("dragleave",{bubbles:!0,cancelable:!0});window.dxDragLastElement.dispatchEvent(dragLeaveEvent);let data=new DataTransfer,file=new File(["content"],"file.txt",{type:"text/plain"});data.items.add(file);let dragDropEvent=new DragEvent("drop",{bubbles:!0,cancelable:!0,dataTransfer:data});window.dxDragLastElement.dispatchEvent(dragDropEvent),window.dxDragLastElement=null}}handleWindowsDragOver(xPos,yPos){let displayScaleFactor=window.devicePixelRatio||1;xPos/=displayScaleFactor,yPos/=displayScaleFactor;let element=document.elementFromPoint(xPos,yPos);if(element!=window.dxDragLastElement){if(window.dxDragLastElement){let dragLeaveEvent=new DragEvent("dragleave",{bubbles:!0,cancelable:!0});window.dxDragLastElement.dispatchEvent(dragLeaveEvent)}let dragOverEvent=new DragEvent("dragover",{bubbles:!0,cancelable:!0});element.dispatchEvent(dragOverEvent),window.dxDragLastElement=element}}handleWindowsDragLeave(){if(window.dxDragLastElement){let dragLeaveEvent=new DragEvent("dragleave",{bubbles:!0,cancelable:!0});window.dxDragLastElement.dispatchEvent(dragLeaveEvent),window.dxDragLastElement=null}}loadChild(array){let node=this.stack[this.stack.length-1];for(let i=0;i<array.length;i++){let end=array[i];for(node=node.firstChild;end>0;end--)node=node.nextSibling}return node}appendChildren(id,many){let root=this.nodes[id],els=this.stack.splice(this.stack.length-many);for(let k=0;k<many;k++)root.appendChild(els[k])}handleEvent(event,name,bubbles){let target=event.target,element=getTargetId(target),contents=serializeEvent(event,target),body={name,data:contents,element,bubbles};if(this.liveview&&target instanceof HTMLInputElement&&(event.type==="change"||event.type==="input")){if(target.getAttribute("type")==="file"){this.readFiles(target,contents,bubbles,element,name);return}}let response=this.sendSerializedEvent(body);if(response){if(response.preventDefault)event.preventDefault();else if(target instanceof Element&&event.type==="click")this.handleClickNavigate(event,target);if(response.stopPropagation)event.stopPropagation()}}sendSerializedEvent(body){if(this.liveview)this.sendIpcMessage("user_event",body);else return handleVirtualdomEventSync(this.eventsPath,JSON.stringify(body))}handleClickNavigate(event,target){if(!this.intercept_link_redirects)return;let a_element=target.closest("a");if(a_element){event.preventDefault();let href=a_element.getAttribute("href");if(href!==""&&href!==null&&href!==void 0)this.sendIpcMessage("browser_open",{href})}}enqueueBytes(bytes){this.queuedBytes.push(bytes)}flushQueuedBytes(){let byteArray=this.queuedBytes;this.queuedBytes=[];for(let bytes of byteArray)this.run_from_bytes(bytes)}rafEdits(bytes){if(this.headless)this.run_from_bytes(bytes),this.markEditsFinished();else this.enqueueBytes(bytes),requestAnimationFrame(()=>{this.flushQueuedBytes(),this.markEditsFinished()})}waitForRequest(editsPath,required_server_key){this.edits=new WebSocket(editsPath);let authenticated=!1;this.edits.onclose=()=>{setTimeout(()=>{if(this.edits.url!=editsPath)return;this.waitForRequest(editsPath,required_server_key)},100)},this.edits.onmessage=(event)=>{let data=event.data;if(data instanceof Blob){if(!authenticated)return;data.arrayBuffer().then((buffer)=>{this.rafEdits(buffer)})}else if(typeof data==="string"){if(data===required_server_key){authenticated=!0;return}}}}markEditsFinished(){this.edits.send(new ArrayBuffer(0))}kickAllStylesheetsOnPage(){let stylesheets=document.querySelectorAll("link[rel=stylesheet]");for(let i=0;i<stylesheets.length;i++){let sheet=stylesheets[i],splitByQuery=sheet.href.split("?"),url=splitByQuery[0],query=splitByQuery[1];if(!query)query="";let queryParams=new URLSearchParams(query);queryParams.delete("dx_force_reload"),queryParams.append("dx_force_reload",Math.random().toString()),sheet.href=`${url}?${queryParams}`}}async readFiles(target,contents,bubbles,realId,name){let files=target.files,file_contents={};for(let i=0;i<files.length;i++){let file=files[i];file_contents[file.name]=Array.from(new Uint8Array(await file.arrayBuffer()))}contents.files={files:file_contents};let message=this.sendSerializedEvent({name,element:realId,data:contents,bubbles});this.ipc.postMessage(message)}}function handleVirtualdomEventSync(endpoint,contents){let xhr=new XMLHttpRequest;xhr.open("POST",endpoint,!1),xhr.setRequestHeader("Content-Type","application/json");let contents_bytes=new TextEncoder().encode(contents),contents_base64=btoa(String.fromCharCode.apply(null,contents_bytes));return xhr.setRequestHeader("dioxus-data",contents_base64),xhr.send(),JSON.parse(xhr.responseText)}function getTargetId(target){if(!(target instanceof Node))return null;let ourTarget=target,realId=null;while(realId==null){if(ourTarget===null)return null;if(ourTarget instanceof Element)realId=ourTarget.getAttribute("data-dioxus-id");ourTarget=ourTarget.parentNode}return parseInt(realId)}export{NativeInterpreter};
diff --git a/packages/interpreter/src/ts/serialize.ts b/packages/interpreter/src/ts/serialize.ts
index 8604bc7027..9abc0b0e6c 100644
--- a/packages/interpreter/src/ts/serialize.ts
+++ b/packages/interpreter/src/ts/serialize.ts
@@ -33,6 +33,13 @@ export function serializeEvent(
 
   if (event instanceof InputEvent) {
     extend(serializeInputEvent(event, target));
+    if (event.type === "beforeinput") {
+      extend({
+        input_type: event.inputType,
+        is_composing: event.isComposing,
+        data: event.data,
+      });
+    }
   }
   if (event instanceof PointerEvent) {
     extend(serializePointerEvent(event));
@@ -207,9 +214,16 @@ function serializeInputEvent(
     contents.value = retrieveSelectValue(event.target).join(",");
   }
 
-  // Ensure the serializer isn't quirky
+  // Contenteditable / generic targets: mirror the wasm renderer, which falls
+  // back to textContent for any HTMLElement that isn't a form control
+  // (see packages/web/src/events/before_input.rs WebBeforeInputData::value
+  // and packages/web/src/events/form.rs WebFormData::value).
   if (contents.value === undefined) {
-    contents.value = "";
+    if (event.target instanceof HTMLElement) {
+      contents.value = event.target.textContent ?? "";
+    } else {
+      contents.value = "";
+    }
   }
 
   return contents;
diff --git a/packages/liveview/src/events.rs b/packages/liveview/src/events.rs
index 27e42d93b0..b0ed011b58 100644
--- a/packages/liveview/src/events.rs
+++ b/packages/liveview/src/events.rs
@@ -15,6 +15,14 @@ impl HtmlEventConverter for SerializedHtmlEventConverter {
             .into()
     }
 
+    fn convert_before_input_data(&self, event: &PlatformEventData) -> BeforeInputData {
+        event
+            .downcast::<SerializedBeforeInputData>()
+            .cloned()
+            .unwrap()
+            .into()
+    }
+
     fn convert_cancel_data(&self, event: &PlatformEventData) -> CancelData {
         event
             .downcast::<SerializedCancelData>()
diff --git a/packages/native-dom/src/events.rs b/packages/native-dom/src/events.rs
index 52999480df..b1bc312d3e 100644
--- a/packages/native-dom/src/events.rs
+++ b/packages/native-dom/src/events.rs
@@ -4,12 +4,12 @@ use blitz_traits::events::{
     BlitzWheelEvent, MouseEventButton,
 };
 use dioxus_html::{
-    AnimationData, CancelData, ClipboardData, CompositionData, DragData, FocusData, FormData,
-    FormValue, HasFileData, HasFocusData, HasFormData, HasKeyboardData, HasMouseData,
-    HasPointerData, HasScrollData, HasWheelData, HtmlEventConverter, ImageData, KeyboardData,
-    MediaData, MountedData, MountedError, MountedResult, MouseData, PlatformEventData, PointerData,
-    RenderedElementBacking, ResizeData, ScrollBehavior, ScrollData, ScrollToOptions, SelectionData,
-    ToggleData, TouchData, TransitionData, VisibleData, WheelData,
+    AnimationData, BeforeInputData, CancelData, ClipboardData, CompositionData, DragData,
+    FocusData, FormData, FormValue, HasFileData, HasFocusData, HasFormData, HasKeyboardData,
+    HasMouseData, HasPointerData, HasScrollData, HasWheelData, HtmlEventConverter, ImageData,
+    KeyboardData, MediaData, MountedData, MountedError, MountedResult, MouseData,
+    PlatformEventData, PointerData, RenderedElementBacking, ResizeData, ScrollBehavior, ScrollData,
+    ScrollToOptions, SelectionData, ToggleData, TouchData, TransitionData, VisibleData, WheelData,
     geometry::{
         ClientPoint, ElementPoint, PagePoint, PixelsRect, PixelsSize, PixelsVector2D, ScreenPoint,
         WheelDelta,
@@ -67,6 +67,12 @@ impl HtmlEventConverter for NativeConverter {
         unimplemented!("todo: convert_animation_data in dioxus-native. requires support in blitz")
     }
 
+    fn convert_before_input_data(&self, _event: &PlatformEventData) -> BeforeInputData {
+        unimplemented!(
+            "todo: convert_before_input_data in dioxus-native. requires support in blitz"
+        )
+    }
+
     fn convert_clipboard_data(&self, _event: &PlatformEventData) -> ClipboardData {
         unimplemented!("todo: convert_clipboard_data in dioxus-native. requires support in blitz")
     }
diff --git a/packages/web/src/events/before_input.rs b/packages/web/src/events/before_input.rs
new file mode 100644
index 0000000000..953a2dd8d2
--- /dev/null
+++ b/packages/web/src/events/before_input.rs
@@ -0,0 +1,46 @@
+use dioxus_html::{HasBeforeInputData, InputType};
+use web_sys::{Element, InputEvent};
+
+use super::WebEventExt;
+
+pub(crate) struct WebBeforeInputData {
+    element: Element,
+    event: InputEvent,
+}
+
+impl WebBeforeInputData {
+    pub fn new(element: Element, event: InputEvent) -> Self {
+        Self { element, event }
+    }
+}
+
+impl HasBeforeInputData for WebBeforeInputData {
+    fn input_type(&self) -> InputType {
+        InputType::from(self.event.input_type().as_str())
+    }
+
+    fn data(&self) -> Option<String> {
+        self.event.data()
+    }
+
+    fn is_composing(&self) -> bool {
+        self.event.is_composing()
+    }
+
+    fn value(&self) -> String {
+        super::editable_element_value(&self.element).unwrap_or_default()
+    }
+
+    fn as_any(&self) -> &dyn std::any::Any {
+        &self.event as &dyn std::any::Any
+    }
+}
+
+impl WebEventExt for dioxus_html::BeforeInputData {
+    type WebEvent = web_sys::InputEvent;
+
+    #[inline(always)]
+    fn try_as_web_event(&self) -> Option<Self::WebEvent> {
+        self.downcast::<web_sys::InputEvent>().cloned()
+    }
+}
diff --git a/packages/web/src/events/form.rs b/packages/web/src/events/form.rs
index 32b418dd42..2c11ca48bc 100644
--- a/packages/web/src/events/form.rs
+++ b/packages/web/src/events/form.rs
@@ -28,40 +28,7 @@ impl WebFormData {
 
 impl HasFormData for WebFormData {
     fn value(&self) -> String {
-        let target = &self.element;
-        target
-            .dyn_ref()
-            .map(|input: &web_sys::HtmlInputElement| {
-                // todo: special case more input types
-                match input.type_().as_str() {
-                    "checkbox" => {
-                        match input.checked() {
-                            true => "true".to_string(),
-                            false => "false".to_string(),
-                        }
-                    },
-                    _ => {
-                        input.value()
-                    }
-                }
-            })
-            .or_else(|| {
-                target
-                    .dyn_ref()
-                    .map(|input: &web_sys::HtmlTextAreaElement| input.value())
-            })
-            // select elements are NOT input events - because - why woudn't they be??
-            .or_else(|| {
-                target
-                    .dyn_ref()
-                    .map(|input: &web_sys::HtmlSelectElement| input.value())
-            })
-            .or_else(|| {
-                target
-                    .dyn_ref::<web_sys::HtmlElement>()
-                    .unwrap()
-                    .text_content()
-            })
+        super::editable_element_value(&self.element)
             .expect("only an InputElement or TextAreaElement or an element with contenteditable=true can have an oninput event listener")
     }
 
diff --git a/packages/web/src/events/mod.rs b/packages/web/src/events/mod.rs
index f99c93d6db..7ff5342e46 100644
--- a/packages/web/src/events/mod.rs
+++ b/packages/web/src/events/mod.rs
@@ -1,10 +1,14 @@
-use dioxus_html::{DragData, FormData, HtmlEventConverter, ImageData, PlatformEventData};
+use before_input::WebBeforeInputData;
+use dioxus_html::{
+    BeforeInputData, DragData, FormData, HtmlEventConverter, ImageData, PlatformEventData,
+};
 use form::WebFormData;
 use load::WebImageEvent;
 use wasm_bindgen::JsCast;
 use web_sys::{Document, Element, Event};
 
 mod animation;
+mod before_input;
 mod cancel;
 mod clipboard;
 mod composition;
@@ -50,10 +54,55 @@ fn downcast_event(event: &dioxus_html::PlatformEventData) -> &GenericWebSysEvent
         .expect("event should be a GenericWebSysEvent")
 }
 
+/// Read the textual value of an editable element.
+///
+/// Mirrors what the wasm renderer reports for `value` across the input-shaped events
+/// (`oninput`, `onchange`, `onbeforeinput`, …): the element's `value` for
+/// `<input>`/`<textarea>`/`<select>` (with checkboxes coerced to `"true"`/`"false"`),
+/// falling back to `textContent` for `contenteditable` elements. Returns `None` only
+/// when the target is none of these.
+pub(crate) fn editable_element_value(element: &Element) -> Option<String> {
+    element
+        .dyn_ref()
+        .map(
+            |input: &web_sys::HtmlInputElement| match input.type_().as_str() {
+                // todo: special case more input types
+                "checkbox" => match input.checked() {
+                    true => "true".to_string(),
+                    false => "false".to_string(),
+                },
+                _ => input.value(),
+            },
+        )
+        .or_else(|| {
+            element
+                .dyn_ref()
+                .map(|input: &web_sys::HtmlTextAreaElement| input.value())
+        })
+        // select elements are NOT input events - because - why woudn't they be??
+        .or_else(|| {
+            element
+                .dyn_ref()
+                .map(|input: &web_sys::HtmlSelectElement| input.value())
+        })
+        .or_else(|| {
+            element
+                .dyn_ref::<web_sys::HtmlElement>()
+                .and_then(|el| el.text_content())
+        })
+}
+
 macro_rules! with_web_event_converters {
     ($macro:ident) => {
         $macro! {
             convert_animation_data(AnimationData) => web_sys::AnimationEvent;
+            convert_before_input_data(BeforeInputData) => web_sys::InputEvent => |event| {
+                let event = downcast_event(event);
+                BeforeInputData::new(WebBeforeInputData::new(
+                    event.element.clone(),
+                    event.raw.clone().unchecked_into::<web_sys::InputEvent>(),
+                ))
+            };
             convert_cancel_data(CancelData) => web_sys::Event;
             convert_clipboard_data(ClipboardData) => web_sys::Event;
             convert_composition_data(CompositionData) => web_sys::CompositionEvent;