diff --git a/packages/@rescript/runtime/JsxDOM.res b/packages/@rescript/runtime/JsxDOM.res
index f1c3fbfdae..45c0f10048 100644
--- a/packages/@rescript/runtime/JsxDOM.res
+++ b/packages/@rescript/runtime/JsxDOM.res
@@ -33,249 +33,17 @@ type popover = | @as("auto") Auto | @as("manual") Manual | @as("hint") Hint
 */
 type popoverTargetAction = | @as("toggle") Toggle | @as("show") Show | @as("hide") Hide
 
-/*
-  This list isn't exhaustive. We'll add more as we go.
-*/
-type domProps = {
+type jsx = {
   key?: string,
   children?: Jsx.element,
   ref?: domRef,
-  // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe#allow
-  allow?: string,
-  /* accessibility */
-  /* https://www.w3.org/TR/wai-aria-1.1/ */
-  /* https://accessibilityresources.org/<aria-tag> is a great resource for these */
-  @as("aria-current")
-  ariaCurrent?: [#page | #step | #location | #date | #time | #"true" | #"false"],
-  @as("aria-details")
-  ariaDetails?: string,
-  @as("aria-disabled")
-  ariaDisabled?: bool,
-  @as("aria-hidden")
-  ariaHidden?: bool,
-  @as("aria-invalid") ariaInvalid?: [#grammar | #"false" | #spelling | #"true"],
-  @as("aria-keyshortcuts")
-  ariaKeyshortcuts?: string,
-  @as("aria-label")
-  ariaLabel?: string,
-  @as("aria-roledescription")
-  ariaRoledescription?: string,
-  /* Widget Attributes */
-  @as("aria-autocomplete") ariaAutocomplete?: [#inline | #list | #both | #none],
-  /* https://www.w3.org/TR/wai-aria-1.1/#valuetype_tristate */
-  @as("aria-checked")
-  ariaChecked?: [#"true" | #"false" | #mixed],
-  @as("aria-expanded")
-  ariaExpanded?: bool,
-  @as("aria-haspopup")
-  ariaHaspopup?: [#menu | #listbox | #tree | #grid | #dialog | #"true" | #"false"],
-  @as("aria-level")
-  ariaLevel?: int,
-  @as("aria-modal")
-  ariaModal?: bool,
-  @as("aria-multiline")
-  ariaMultiline?: bool,
-  @as("aria-multiselectable")
-  ariaMultiselectable?: bool,
-  @as("aria-orientation") ariaOrientation?: [#horizontal | #vertical | #undefined],
-  @as("aria-placeholder")
-  ariaPlaceholder?: string,
-  /* https://www.w3.org/TR/wai-aria-1.1/#valuetype_tristate */
-  @as("aria-pressed") ariaPressed?: [#"true" | #"false" | #mixed],
-  @as("aria-readonly")
-  ariaReadonly?: bool,
-  @as("aria-required")
-  ariaRequired?: bool,
-  @as("aria-selected")
-  ariaSelected?: bool,
-  @as("aria-sort")
-  ariaSort?: string,
-  @as("aria-valuemax")
-  ariaValuemax?: float,
-  @as("aria-valuemin")
-  ariaValuemin?: float,
-  @as("aria-valuenow")
-  ariaValuenow?: float,
-  @as("aria-valuetext")
-  ariaValuetext?: string,
-  /* Live Region Attributes */
-  @as("aria-atomic")
-  ariaAtomic?: bool,
-  @as("aria-busy")
-  ariaBusy?: bool,
-  @as("aria-live") ariaLive?: [#off | #polite | #assertive | #rude],
-  @as("aria-relevant")
-  ariaRelevant?: string,
-  /* Drag-and-Drop Attributes */
-  @as("aria-dropeffect") ariaDropeffect?: [#copy | #move | #link | #execute | #popup | #none],
-  @as("aria-grabbed")
-  ariaGrabbed?: bool,
-  /* Relationship Attributes */
-  @as("aria-activedescendant")
-  ariaActivedescendant?: string,
-  @as("aria-colcount")
-  ariaColcount?: int,
-  @as("aria-colindex")
-  ariaColindex?: int,
-  @as("aria-colspan")
-  ariaColspan?: int,
-  @as("aria-controls")
-  ariaControls?: string,
-  @as("aria-describedby")
-  ariaDescribedby?: string,
-  @as("aria-errormessage")
-  ariaErrormessage?: string,
-  @as("aria-flowto")
-  ariaFlowto?: string,
-  @as("aria-labelledby")
-  ariaLabelledby?: string,
-  @as("aria-owns")
-  ariaOwns?: string,
-  @as("aria-posinset")
-  ariaPosinset?: int,
-  @as("aria-rowcount")
-  ariaRowcount?: int,
-  @as("aria-rowindex")
-  ariaRowindex?: int,
-  @as("aria-rowspan")
-  ariaRowspan?: int,
-  @as("aria-setsize")
-  ariaSetsize?: int,
-  /* react textarea/input */
-  defaultChecked?: bool,
-  defaultValue?: string,
-  /* global html attributes */
-  accessKey?: string,
-  capture?: [#user | #environment],
   className?: string /* substitute for "class" */,
-  contentEditable?: bool,
-  contextMenu?: string,
-  @as("data-testid") dataTestId?: string,
-  dir?: string /* "ltr", "rtl" or "auto" */,
-  draggable?: bool,
-  hidden?: bool,
-  id?: string,
-  inert?: bool,
-  lang?: string,
-  popover?: popover,
-  popoverTarget?: string,
-  popoverTargetAction?: popoverTargetAction,
-  role?: string /* ARIA role */,
-  style?: style,
-  spellCheck?: bool,
-  tabIndex?: int,
-  title?: string,
-  /* html5 microdata */
-  itemID?: string,
-  itemProp?: string,
-  itemRef?: string,
-  itemScope?: bool,
-  itemType?: string /* uri */,
-  /* tag-specific html attributes */
-  accept?: string,
-  acceptCharset?: string,
-  action?: string /* uri */,
-  allowFullScreen?: bool,
-  alt?: string,
-  @as("as")
-  as_?: string,
-  async?: bool,
-  autoComplete?: string /* has a fixed, but large-ish, set of possible values */,
-  autoCapitalize?: string /* Mobile Safari specific */,
-  autoFocus?: bool,
-  autoPlay?: bool,
-  challenge?: string,
-  charSet?: string,
-  checked?: bool,
-  cite?: string /* uri */,
-  crossOrigin?: string /* anonymous, use-credentials */,
-  cols?: int,
-  colSpan?: int,
-  content?: string,
-  controls?: bool,
-  coords?: string /* set of values specifying the coordinates of a region */,
-  data?: string /* uri */,
-  dateTime?: string /* "valid date string with optional time" */,
-  default?: bool,
-  defer?: bool,
-  disabled?: bool,
-  download?: string /* should really be either a boolean, signifying presence, or a string */,
-  encType?: string /* "application/x-www-form-urlencoded", "multipart/form-data" or "text/plain" */,
-  form?: string,
-  formAction?: string /* uri */,
-  formTarget?: string /* "_blank", "_self", etc. */,
-  formMethod?: string /* "post", "get", "put" */,
-  // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe#frameborder
-  frameBorder?: int /* "0", "1" */,
-  headers?: string,
-  height?: string /* in html5 this can only be a number, but in html4 it can ba a percentage as well */,
-  high?: int,
-  href?: string /* uri */,
-  hrefLang?: string,
-  htmlFor?: string /* substitute for "for" */,
-  httpEquiv?: string /* has a fixed set of possible values */,
-  icon?: string /* uri? */,
-  inputMode?: string /* "verbatim", "latin", "numeric", etc. */,
-  integrity?: string,
-  keyType?: string,
-  kind?: string /* has a fixed set of possible values */,
-  label?: string,
-  list?: string,
-  loading?: [#lazy | #eager],
-  loop?: bool,
-  low?: int,
-  manifest?: string /* uri */,
-  max?: string /* should be int or Date.t */,
-  maxLength?: int,
-  media?: string /* a valid media query */,
-  mediaGroup?: string,
-  method?: string /* "post" or "get" */,
-  min?: string,
-  minLength?: int,
-  multiple?: bool,
-  muted?: bool,
-  name?: string,
-  nonce?: string,
-  noValidate?: bool,
-  @as("open")
-  open_?: bool /* use this one. Previous one is deprecated */,
-  optimum?: int,
-  pattern?: string /* valid Js RegExp */,
-  placeholder?: string,
-  playsInline?: bool,
-  poster?: string /* uri */,
-  preload?: string /* "none", "metadata" or "auto" (and "" as a synonym for "auto") */,
-  radioGroup?: string,
-  readOnly?: bool,
-  rel?: string /* a space- or comma-separated (depending on the element) list of a fixed set of "link types" */,
-  required?: bool,
-  reversed?: bool,
-  rows?: int,
-  rowSpan?: int,
-  sandbox?: string /* has a fixed set of possible values */,
-  scope?: string /* has a fixed set of possible values */,
-  scoped?: bool,
-  scrolling?: string /* html4 only, "auto", "yes" or "no" */,
-  /* seamless - supported by React, but removed from the html5 spec */
-  selected?: bool,
-  shape?: string,
-  size?: int,
-  sizes?: string,
-  span?: int,
-  src?: string /* uri */,
-  srcDoc?: string,
-  srcLang?: string,
-  srcSet?: string,
-  start?: int,
-  step?: float,
-  summary?: string /* deprecated */,
-  target?: string,
-  @as("type")
-  type_?: string /* has a fixed but large-ish set of possible values */ /* use this one. Previous one is deprecated */,
-  useMap?: string,
-  value?: string,
-  width?: string /* in html5 this can only be a number, but in html4 it can ba a percentage as well */,
-  wrap?: string /* "hard" or "soft" */,
+  /* react-specific */
+  dangerouslySetInnerHTML?: {"__html": string},
+  suppressContentEditableWarning?: bool,
+}
+
+type events = {
   /* Clipboard events */
   onCopy?: JsxEvent.Clipboard.t => unit,
   onCut?: JsxEvent.Clipboard.t => unit,
@@ -371,7 +139,9 @@ type domProps = {
   onAnimationIteration?: JsxEvent.Animation.t => unit,
   /* Transition events */
   onTransitionEnd?: JsxEvent.Transition.t => unit,
-  /* svg */
+}
+
+type svg = {
   accentHeight?: string,
   accumulate?: string,
   additive?: string,
@@ -625,6 +395,243 @@ type domProps = {
   yChannelSelector?: string,
   z?: string,
   zoomAndPan?: string,
+}
+
+type baseProps = {
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe#allow
+  allow?: string,
+  /* accessibility */
+  /* https://www.w3.org/TR/wai-aria-1.1/ */
+  /* https://accessibilityresources.org/<aria-tag> is a great resource for these */
+  @as("aria-current")
+  ariaCurrent?: [#page | #step | #location | #date | #time | #"true" | #"false"],
+  @as("aria-details")
+  ariaDetails?: string,
+  @as("aria-disabled")
+  ariaDisabled?: bool,
+  @as("aria-hidden")
+  ariaHidden?: bool,
+  @as("aria-invalid") ariaInvalid?: [#grammar | #"false" | #spelling | #"true"],
+  @as("aria-keyshortcuts")
+  ariaKeyshortcuts?: string,
+  @as("aria-label")
+  ariaLabel?: string,
+  @as("aria-roledescription")
+  ariaRoledescription?: string,
+  /* Widget Attributes */
+  @as("aria-autocomplete") ariaAutocomplete?: [#inline | #list | #both | #none],
+  /* https://www.w3.org/TR/wai-aria-1.1/#valuetype_tristate */
+  @as("aria-checked")
+  ariaChecked?: [#"true" | #"false" | #mixed],
+  @as("aria-expanded")
+  ariaExpanded?: bool,
+  @as("aria-haspopup")
+  ariaHaspopup?: [#menu | #listbox | #tree | #grid | #dialog | #"true" | #"false"],
+  @as("aria-level")
+  ariaLevel?: int,
+  @as("aria-modal")
+  ariaModal?: bool,
+  @as("aria-multiline")
+  ariaMultiline?: bool,
+  @as("aria-multiselectable")
+  ariaMultiselectable?: bool,
+  @as("aria-orientation") ariaOrientation?: [#horizontal | #vertical | #undefined],
+  @as("aria-placeholder")
+  ariaPlaceholder?: string,
+  /* https://www.w3.org/TR/wai-aria-1.1/#valuetype_tristate */
+  @as("aria-pressed") ariaPressed?: [#"true" | #"false" | #mixed],
+  @as("aria-readonly")
+  ariaReadonly?: bool,
+  @as("aria-required")
+  ariaRequired?: bool,
+  @as("aria-selected")
+  ariaSelected?: bool,
+  @as("aria-sort")
+  ariaSort?: string,
+  @as("aria-valuemax")
+  ariaValuemax?: float,
+  @as("aria-valuemin")
+  ariaValuemin?: float,
+  @as("aria-valuenow")
+  ariaValuenow?: float,
+  @as("aria-valuetext")
+  ariaValuetext?: string,
+  /* Live Region Attributes */
+  @as("aria-atomic")
+  ariaAtomic?: bool,
+  @as("aria-busy")
+  ariaBusy?: bool,
+  @as("aria-live") ariaLive?: [#off | #polite | #assertive | #rude],
+  @as("aria-relevant")
+  ariaRelevant?: string,
+  /* Drag-and-Drop Attributes */
+  @as("aria-dropeffect") ariaDropeffect?: [#copy | #move | #link | #execute | #popup | #none],
+  @as("aria-grabbed")
+  ariaGrabbed?: bool,
+  /* Relationship Attributes */
+  @as("aria-activedescendant")
+  ariaActivedescendant?: string,
+  @as("aria-colcount")
+  ariaColcount?: int,
+  @as("aria-colindex")
+  ariaColindex?: int,
+  @as("aria-colspan")
+  ariaColspan?: int,
+  @as("aria-controls")
+  ariaControls?: string,
+  @as("aria-describedby")
+  ariaDescribedby?: string,
+  @as("aria-errormessage")
+  ariaErrormessage?: string,
+  @as("aria-flowto")
+  ariaFlowto?: string,
+  @as("aria-labelledby")
+  ariaLabelledby?: string,
+  @as("aria-owns")
+  ariaOwns?: string,
+  @as("aria-posinset")
+  ariaPosinset?: int,
+  @as("aria-rowcount")
+  ariaRowcount?: int,
+  @as("aria-rowindex")
+  ariaRowindex?: int,
+  @as("aria-rowspan")
+  ariaRowspan?: int,
+  @as("aria-setsize")
+  ariaSetsize?: int,
+  /* react textarea/input */
+  defaultChecked?: bool,
+  defaultValue?: string,
+  /* global html attributes */
+  accessKey?: string,
+  capture?: [#user | #environment],
+  contentEditable?: bool,
+  contextMenu?: string,
+  @as("data-testid") dataTestId?: string,
+  dir?: string /* "ltr", "rtl" or "auto" */,
+  draggable?: bool,
+  hidden?: bool,
+  id?: string,
+  inert?: bool,
+  lang?: string,
+  popover?: popover,
+  popoverTarget?: string,
+  popoverTargetAction?: popoverTargetAction,
+  role?: string /* ARIA role */,
+  spellCheck?: bool,
+  tabIndex?: int,
+  title?: string,
+  /* html5 microdata */
+  itemID?: string,
+  itemProp?: string,
+  itemRef?: string,
+  itemScope?: bool,
+  itemType?: string /* uri */,
+  /* tag-specific html attributes */
+  accept?: string,
+  acceptCharset?: string,
+  action?: string /* uri */,
+  allowFullScreen?: bool,
+  alt?: string,
+  @as("as")
+  as_?: string,
+  async?: bool,
+  autoComplete?: string /* has a fixed, but large-ish, set of possible values */,
+  autoCapitalize?: string /* Mobile Safari specific */,
+  autoFocus?: bool,
+  autoPlay?: bool,
+  challenge?: string,
+  charSet?: string,
+  checked?: bool,
+  cite?: string /* uri */,
+  crossOrigin?: string /* anonymous, use-credentials */,
+  cols?: int,
+  colSpan?: int,
+  content?: string,
+  controls?: bool,
+  coords?: string /* set of values specifying the coordinates of a region */,
+  data?: string /* uri */,
+  dateTime?: string /* "valid date string with optional time" */,
+  default?: bool,
+  defer?: bool,
+  disabled?: bool,
+  download?: string /* should really be either a boolean, signifying presence, or a string */,
+  encType?: string /* "application/x-www-form-urlencoded", "multipart/form-data" or "text/plain" */,
+  form?: string,
+  formAction?: string /* uri */,
+  formTarget?: string /* "_blank", "_self", etc. */,
+  formMethod?: string /* "post", "get", "put" */,
+  // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe#frameborder
+  frameBorder?: int /* "0", "1" */,
+  headers?: string,
+  height?: string /* in html5 this can only be a number, but in html4 it can ba a percentage as well */,
+  high?: int,
+  href?: string /* uri */,
+  hrefLang?: string,
+  htmlFor?: string /* substitute for "for" */,
+  httpEquiv?: string /* has a fixed set of possible values */,
+  icon?: string /* uri? */,
+  inputMode?: string /* "verbatim", "latin", "numeric", etc. */,
+  integrity?: string,
+  keyType?: string,
+  kind?: string /* has a fixed set of possible values */,
+  label?: string,
+  list?: string,
+  loading?: [#lazy | #eager],
+  loop?: bool,
+  low?: int,
+  manifest?: string /* uri */,
+  max?: string /* should be int or Date.t */,
+  maxLength?: int,
+  media?: string /* a valid media query */,
+  mediaGroup?: string,
+  method?: string /* "post" or "get" */,
+  min?: string,
+  minLength?: int,
+  multiple?: bool,
+  muted?: bool,
+  name?: string,
+  nonce?: string,
+  noValidate?: bool,
+  @as("open")
+  open_?: bool /* use this one. Previous one is deprecated */,
+  optimum?: int,
+  pattern?: string /* valid Js RegExp */,
+  placeholder?: string,
+  playsInline?: bool,
+  poster?: string /* uri */,
+  preload?: string /* "none", "metadata" or "auto" (and "" as a synonym for "auto") */,
+  radioGroup?: string,
+  readOnly?: bool,
+  rel?: string /* a space- or comma-separated (depending on the element) list of a fixed set of "link types" */,
+  required?: bool,
+  reversed?: bool,
+  rows?: int,
+  rowSpan?: int,
+  sandbox?: string /* has a fixed set of possible values */,
+  scope?: string /* has a fixed set of possible values */,
+  scoped?: bool,
+  scrolling?: string /* html4 only, "auto", "yes" or "no" */,
+  /* seamless - supported by React, but removed from the html5 spec */
+  selected?: bool,
+  shape?: string,
+  size?: int,
+  sizes?: string,
+  span?: int,
+  src?: string /* uri */,
+  srcDoc?: string,
+  srcLang?: string,
+  srcSet?: string,
+  start?: int,
+  step?: float,
+  summary?: string /* deprecated */,
+  target?: string,
+  @as("type")
+  type_?: string /* has a fixed but large-ish set of possible values */ /* use this one. Previous one is deprecated */,
+  useMap?: string,
+  value?: string,
+  width?: string /* in html5 this can only be a number, but in html4 it can ba a percentage as well */,
+  wrap?: string /* "hard" or "soft" */,
   /* RDFa */
   about?: string,
   datatype?: string,
@@ -634,7 +641,15 @@ type domProps = {
   resource?: string,
   typeof?: string,
   vocab?: string,
-  /* react-specific */
-  dangerouslySetInnerHTML?: {"__html": string},
-  suppressContentEditableWarning?: bool,
+}
+
+/*
+  This list isn't exhaustive. We'll add more as we go.
+*/
+type domProps = {
+  ...jsx,
+  ...baseProps,
+  ...events,
+  ...svg,
+  style?: style,
 }