diff --git a/packages/core/jsx-runtime.d.ts b/packages/core/jsx-runtime.d.ts
index b4c51a6568..244d9da08d 100644
--- a/packages/core/jsx-runtime.d.ts
+++ b/packages/core/jsx-runtime.d.ts
@@ -1652,6 +1652,7 @@ export declare namespace JSX {
     y?: number | string;
     width?: number | string;
     height?: number | string;
+    fill?: number | string;
   }
 
   interface ViewSVGAttributes<T>
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index c5be85650a..c5796e9297 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -484,8 +484,8 @@ exports[`Alpine.js > jsx > Javascript Test > ContentSlotJSX 1`] = `
     x-bind:name=\\"slotContent ? 'name1' : 'name2'\\"
     x-bind:title=\\"slotContent ? 'title1' : 'title2'\\"
     x-bind=\\"attributes\\"
-    x-on:click=\\"show()\\"
     x-bind:class=\\"slotContent ? \`\${name}-content\` : ''\\"
+    x-on:click=\\"show()\\"
   >
     <template x-if=\\"showContent && slotContent\\">
       <slot name=\\"content\\"><span x-html=\\"content\\"></span></slot>
@@ -524,7 +524,7 @@ exports[`Alpine.js > jsx > Javascript Test > CustomCode 1`] = `
   x-data=\\"customCode()\\"
   x-ref=\\"elem\\"
   x-bind:class=\\"'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')\\"
-  x-bind:innerHTML=\\"code\\"
+  x-bind:innerhtml=\\"code\\"
 ></div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
@@ -588,7 +588,7 @@ exports[`Alpine.js > jsx > Javascript Test > Embed 1`] = `
   x-data=\\"customCode()\\"
   x-ref=\\"elem\\"
   x-bind:class=\\"'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')\\"
-  x-bind:innerHTML=\\"code\\"
+  x-bind:innerhtml=\\"code\\"
 ></div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
@@ -662,8 +662,8 @@ exports[`Alpine.js > jsx > Javascript Test > Form 1`] = `
   x-bind:action=\\"!sendWithJs && action\\"
   x-bind:method=\\"method\\"
   x-bind:name=\\"name\\"
-  x-on:submit=\\"onSubmit($event)\\"
   x-bind=\\"attributes\\"
+  x-on:submit=\\"onSubmit($event)\\"
 >
   <template x-if=\\"builderBlock && builderBlock.children\\">
     <template x-for=\\"block in builderBlock?.children\\">
@@ -957,9 +957,9 @@ exports[`Alpine.js > jsx > Javascript Test > Image 1`] = `
         x-bind:aria-role=\\"altText ? 'presentation' : undefined\\"
         x-bind:class=\\"'builder-image' + (_class ? ' ' + _class : '') + ' img'\\"
         x-bind:src=\\"image\\"
-        x-on:load=\\"setLoaded()\\"
         x-bind:srcset=\\"srcset\\"
         x-bind:sizes=\\"sizes\\"
+        x-on:load=\\"setLoaded()\\"
       />
     </template>
 
@@ -1069,8 +1069,8 @@ exports[`Alpine.js > jsx > Javascript Test > Input 1`] = `
   x-bind:type=\\"type\\"
   x-bind:name=\\"name\\"
   x-bind:value=\\"value\\"
-  x-bind:defaultValue=\\"defaultValue\\"
   x-bind:required=\\"required\\"
+  x-bind:defaultvalue=\\"defaultValue\\"
 />
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
@@ -1084,7 +1084,7 @@ exports[`Alpine.js > jsx > Javascript Test > RawText 1`] = `
 "<span
   x-data=\\"rawText()\\"
   x-bind:class=\\"attributes?.class || attributes?.className\\"
-  x-bind:innerHTML=\\"text || ''\\"
+  x-bind:innerhtml=\\"text || ''\\"
 ></span>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
@@ -1142,8 +1142,8 @@ exports[`Alpine.js > jsx > Javascript Test > Select 1`] = `
   x-bind=\\"attributes\\"
   x-bind:value=\\"value\\"
   x-bind:key=\\"Builder.isEditing && defaultValue ? defaultValue : 'default-key'\\"
-  x-bind:defaultValue=\\"defaultValue\\"
   x-bind:name=\\"name\\"
+  x-bind:defaultvalue=\\"defaultValue\\"
 >
   <template x-for=\\"option in options\\">
     <option x-bind:value=\\"option.value\\" x-bind:data-index=\\"index\\">
@@ -1324,9 +1324,9 @@ exports[`Alpine.js > jsx > Javascript Test > Submit 1`] = `
 `;
 
 exports[`Alpine.js > jsx > Javascript Test > Text 1`] = `
-"<div  x-data=\\"text()\\"  x-bind:contentEditable=\\"allowEditingText || undefined\\"  x-bind:data-name=\\"{
+"<div  x-data=\\"text()\\"  x-bind:data-name=\\"{
   test: name || 'any name'
-}\\"  x-bind:innerHTML=\\"text || content || name || '<p class=\\"text-lg\\">my name</p>'\\" ></div><script>
+}\\"  x-bind:contenteditable=\\"allowEditingText || undefined\\"  x-bind:innerhtml=\\"text || content || name || '<p class=\\"text-lg\\">my name</p>'\\" ></div><script>
           document.addEventListener('alpine:init', () => {
   Alpine.data('text', () => ({
     name: 'Decadef20'
@@ -1342,7 +1342,7 @@ exports[`Alpine.js > jsx > Javascript Test > Textarea 1`] = `
   x-bind:placeholder=\\"placeholder\\"
   x-bind:name=\\"name\\"
   x-bind:value=\\"value\\"
-  x-bind:defaultValue=\\"defaultValue\\"
+  x-bind:defaultvalue=\\"defaultValue\\"
 ></textarea>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
@@ -1487,6 +1487,20 @@ exports[`Alpine.js > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > camelCasedAttributes 1`] = `
+"<div x-data=\\"myComponent()\\">
+  <img srcset=\\"http://example.com\\" />
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"myComponent\\", () => ({
+      name: \\"Steve\\",
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > class + ClassName + css 1`] = `
 "<style>
   .div {
@@ -2399,12 +2413,12 @@ exports[`Alpine.js > jsx > Javascript Test > svgComponent 1`] = `
   fill=\\"none\\"
   role=\\"img\\"
   x-data=\\"svgComponent()\\"
-  x-bind:viewBox=\\"'0 0 ' + 42 + ' ' + 42\\"
   x-bind:width=\\"42\\"
   x-bind:height=\\"42\\"
+  x-bind:viewbox=\\"'0 0 ' + 42 + ' ' + 42\\"
 >
   <defs>
-    <filter id=\\"prefix__filter0_f\\" filterUnits=\\"userSpaceOnUse\\">
+    <filter id=\\"prefix__filter0_f\\" filterunits=\\"userSpaceOnUse\\">
       <feFlood result=\\"BackgroundImageFix\\"></feFlood>
 
       <feBlend
@@ -2415,7 +2429,7 @@ exports[`Alpine.js > jsx > Javascript Test > svgComponent 1`] = `
 
       <feGaussianBlur
         result=\\"effect1_foregroundBlur\\"
-        x-bind:stdDeviation=\\"7\\"
+        x-bind:stddeviation=\\"7\\"
       ></feGaussianBlur>
     </filter>
   </defs>
@@ -2995,8 +3009,8 @@ exports[`Alpine.js > jsx > Typescript Test > ContentSlotJSX 1`] = `
     x-bind:name=\\"slotContent ? 'name1' : 'name2'\\"
     x-bind:title=\\"slotContent ? 'title1' : 'title2'\\"
     x-bind=\\"attributes\\"
-    x-on:click=\\"show()\\"
     x-bind:class=\\"slotContent ? \`\${name}-content\` : ''\\"
+    x-on:click=\\"show()\\"
   >
     <template x-if=\\"showContent && slotContent\\">
       <slot name=\\"content\\"><span x-html=\\"content\\"></span></slot>
@@ -3035,7 +3049,7 @@ exports[`Alpine.js > jsx > Typescript Test > CustomCode 1`] = `
   x-data=\\"customCode()\\"
   x-ref=\\"elem\\"
   x-bind:class=\\"'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')\\"
-  x-bind:innerHTML=\\"code\\"
+  x-bind:innerhtml=\\"code\\"
 ></div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
@@ -3099,7 +3113,7 @@ exports[`Alpine.js > jsx > Typescript Test > Embed 1`] = `
   x-data=\\"customCode()\\"
   x-ref=\\"elem\\"
   x-bind:class=\\"'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')\\"
-  x-bind:innerHTML=\\"code\\"
+  x-bind:innerhtml=\\"code\\"
 ></div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
@@ -3173,8 +3187,8 @@ exports[`Alpine.js > jsx > Typescript Test > Form 1`] = `
   x-bind:action=\\"!sendWithJs && action\\"
   x-bind:method=\\"method\\"
   x-bind:name=\\"name\\"
-  x-on:submit=\\"onSubmit($event)\\"
   x-bind=\\"attributes\\"
+  x-on:submit=\\"onSubmit($event)\\"
 >
   <template x-if=\\"builderBlock && builderBlock.children\\">
     <template x-for=\\"block in builderBlock?.children\\">
@@ -3468,9 +3482,9 @@ exports[`Alpine.js > jsx > Typescript Test > Image 1`] = `
         x-bind:aria-role=\\"altText ? 'presentation' : undefined\\"
         x-bind:class=\\"'builder-image' + (_class ? ' ' + _class : '') + ' img'\\"
         x-bind:src=\\"image\\"
-        x-on:load=\\"setLoaded()\\"
         x-bind:srcset=\\"srcset\\"
         x-bind:sizes=\\"sizes\\"
+        x-on:load=\\"setLoaded()\\"
       />
     </template>
 
@@ -3580,8 +3594,8 @@ exports[`Alpine.js > jsx > Typescript Test > Input 1`] = `
   x-bind:type=\\"type\\"
   x-bind:name=\\"name\\"
   x-bind:value=\\"value\\"
-  x-bind:defaultValue=\\"defaultValue\\"
   x-bind:required=\\"required\\"
+  x-bind:defaultvalue=\\"defaultValue\\"
 />
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
@@ -3595,7 +3609,7 @@ exports[`Alpine.js > jsx > Typescript Test > RawText 1`] = `
 "<span
   x-data=\\"rawText()\\"
   x-bind:class=\\"attributes?.class || attributes?.className\\"
-  x-bind:innerHTML=\\"text || ''\\"
+  x-bind:innerhtml=\\"text || ''\\"
 ></span>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
@@ -3653,8 +3667,8 @@ exports[`Alpine.js > jsx > Typescript Test > Select 1`] = `
   x-bind=\\"attributes\\"
   x-bind:value=\\"value\\"
   x-bind:key=\\"Builder.isEditing && defaultValue ? defaultValue : 'default-key'\\"
-  x-bind:defaultValue=\\"defaultValue\\"
   x-bind:name=\\"name\\"
+  x-bind:defaultvalue=\\"defaultValue\\"
 >
   <template x-for=\\"option in options\\">
     <option x-bind:value=\\"option.value\\" x-bind:data-index=\\"index\\">
@@ -3835,9 +3849,9 @@ exports[`Alpine.js > jsx > Typescript Test > Submit 1`] = `
 `;
 
 exports[`Alpine.js > jsx > Typescript Test > Text 1`] = `
-"<div  x-data=\\"text()\\"  x-bind:contentEditable=\\"allowEditingText || undefined\\"  x-bind:data-name=\\"{
+"<div  x-data=\\"text()\\"  x-bind:data-name=\\"{
   test: name || 'any name'
-}\\"  x-bind:innerHTML=\\"text || content || name || '<p class=\\"text-lg\\">my name</p>'\\" ></div><script>
+}\\"  x-bind:contenteditable=\\"allowEditingText || undefined\\"  x-bind:innerhtml=\\"text || content || name || '<p class=\\"text-lg\\">my name</p>'\\" ></div><script>
           document.addEventListener('alpine:init', () => {
   Alpine.data('text', () => ({
     name: 'Decadef20'
@@ -3853,7 +3867,7 @@ exports[`Alpine.js > jsx > Typescript Test > Textarea 1`] = `
   x-bind:placeholder=\\"placeholder\\"
   x-bind:name=\\"name\\"
   x-bind:value=\\"value\\"
-  x-bind:defaultValue=\\"defaultValue\\"
+  x-bind:defaultvalue=\\"defaultValue\\"
 ></textarea>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
@@ -3998,6 +4012,20 @@ exports[`Alpine.js > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > camelCasedAttributes 1`] = `
+"<div x-data=\\"myComponent()\\">
+  <img srcset=\\"http://example.com\\" />
+</div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"myComponent\\", () => ({
+      name: \\"Steve\\",
+    }));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > class + ClassName + css 1`] = `
 "<style>
   .div {
@@ -4910,12 +4938,12 @@ exports[`Alpine.js > jsx > Typescript Test > svgComponent 1`] = `
   fill=\\"none\\"
   role=\\"img\\"
   x-data=\\"svgComponent()\\"
-  x-bind:viewBox=\\"'0 0 ' + 42 + ' ' + 42\\"
   x-bind:width=\\"42\\"
   x-bind:height=\\"42\\"
+  x-bind:viewbox=\\"'0 0 ' + 42 + ' ' + 42\\"
 >
   <defs>
-    <filter id=\\"prefix__filter0_f\\" filterUnits=\\"userSpaceOnUse\\">
+    <filter id=\\"prefix__filter0_f\\" filterunits=\\"userSpaceOnUse\\">
       <feFlood result=\\"BackgroundImageFix\\"></feFlood>
 
       <feBlend
@@ -4926,7 +4954,7 @@ exports[`Alpine.js > jsx > Typescript Test > svgComponent 1`] = `
 
       <feGaussianBlur
         result=\\"effect1_foregroundBlur\\"
-        x-bind:stdDeviation=\\"7\\"
+        x-bind:stddeviation=\\"7\\"
       ></feGaussianBlur>
     </filter>
   </defs>
@@ -5008,7 +5036,7 @@ exports[`Alpine.js > jsx > Typescript Test > use-style-outside-component 1`] = `
 
 exports[`Alpine.js > svelte > Javascript Test > basic 1`] = `
 "<div x-data=\\"myComponent()\\">
-  <input x-on:change=\\"name = $event.target.value\\" x-bind:value=\\"name\\" />
+  <input x-bind:value=\\"name\\" x-on:change=\\"name = $event.target.value\\" />
 
   Hello! I can run in React, Vue, Solid, or Liquid!
 </div>
@@ -5162,7 +5190,7 @@ exports[`Alpine.js > svelte > Javascript Test > eventHandlers 1`] = `
 `;
 
 exports[`Alpine.js > svelte > Javascript Test > html 1`] = `
-"<div x-data=\\"myComponent()\\" x-bind:innerHTML=\\"html\\"></div>
+"<div x-data=\\"myComponent()\\" x-bind:innerhtml=\\"html\\"></div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
     Alpine.data(\\"myComponent\\", () => ({
@@ -5238,8 +5266,8 @@ exports[`Alpine.js > svelte > Javascript Test > reactive 1`] = `
 
 exports[`Alpine.js > svelte > Javascript Test > reactiveWithFn 1`] = `
 "<div x-data=\\"myComponent()\\">
-  <input type=\\"number\\" x-on:change=\\"a = $event.target.value\\" x-bind:value=\\"a\\" />
-  <input type=\\"number\\" x-on:change=\\"b = $event.target.value\\" x-bind:value=\\"b\\" />
+  <input type=\\"number\\" x-bind:value=\\"a\\" x-on:change=\\"a = $event.target.value\\" />
+  <input type=\\"number\\" x-bind:value=\\"b\\" x-on:change=\\"b = $event.target.value\\" />
 
   Result:
   <span x-html=\\"result\\"></span>
@@ -5322,7 +5350,7 @@ exports[`Alpine.js > svelte > Javascript Test > textExpressions 1`] = `
 
 exports[`Alpine.js > svelte > Typescript Test > basic 1`] = `
 "<div x-data=\\"myComponent()\\">
-  <input x-on:change=\\"name = $event.target.value\\" x-bind:value=\\"name\\" />
+  <input x-bind:value=\\"name\\" x-on:change=\\"name = $event.target.value\\" />
 
   Hello! I can run in React, Vue, Solid, or Liquid!
 </div>
@@ -5476,7 +5504,7 @@ exports[`Alpine.js > svelte > Typescript Test > eventHandlers 1`] = `
 `;
 
 exports[`Alpine.js > svelte > Typescript Test > html 1`] = `
-"<div x-data=\\"myComponent()\\" x-bind:innerHTML=\\"html\\"></div>
+"<div x-data=\\"myComponent()\\" x-bind:innerhtml=\\"html\\"></div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
     Alpine.data(\\"myComponent\\", () => ({
@@ -5552,8 +5580,8 @@ exports[`Alpine.js > svelte > Typescript Test > reactive 1`] = `
 
 exports[`Alpine.js > svelte > Typescript Test > reactiveWithFn 1`] = `
 "<div x-data=\\"myComponent()\\">
-  <input type=\\"number\\" x-on:change=\\"a = $event.target.value\\" x-bind:value=\\"a\\" />
-  <input type=\\"number\\" x-on:change=\\"b = $event.target.value\\" x-bind:value=\\"b\\" />
+  <input type=\\"number\\" x-bind:value=\\"a\\" x-on:change=\\"a = $event.target.value\\" />
+  <input type=\\"number\\" x-bind:value=\\"b\\" x-on:change=\\"b = $event.target.value\\" />
 
   Result:
   <span x-html=\\"result\\"></span>
diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
index d6a676c033..546ccaa283 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -2435,6 +2435,35 @@ export class MyBasicOnUpdateReturnComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > camelCasedAttributes 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+import React from \\"@builder.io/react\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <img srcset=\\"http://example.com\\" />
+    </div>
+  \`,
+})
+export class MyComponent {
+  name = \\"Steve\\";
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -6827,6 +6856,35 @@ export class MyBasicOnUpdateReturnComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > camelCasedAttributes 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+import React from \\"@builder.io/react\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <img srcset=\\"http://example.com\\" />
+    </div>
+  \`,
+})
+export class MyComponent {
+  name = \\"Steve\\";
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
index cb26efce91..3c4b585d2b 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -2477,6 +2477,36 @@ export class MyBasicOnUpdateReturnComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > camelCasedAttributes 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+import React from \\"@builder.io/react\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <img srcset=\\"http://example.com\\" />
+    </div>
+  \`,
+})
+export class MyComponent {
+  name = \\"Steve\\";
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -6960,6 +6990,36 @@ export class MyBasicOnUpdateReturnComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > camelCasedAttributes 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+import React from \\"@builder.io/react\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <img srcset=\\"http://example.com\\" />
+    </div>
+  \`,
+})
+export class MyComponent {
+  name = \\"Steve\\";
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+  bootstrap: [SomeOtherComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index 2f9a668877..2a892415f3 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -4996,6 +4996,67 @@ export class MyBasicOnUpdateReturnComponentModule {}
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > camelCasedAttributes 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+import React from \\"@builder.io/react\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <img srcset=\\"http://example.com\\" />
+    </div>
+  \`,
+})
+export class MyComponent {
+  name = \\"Steve\\";
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > camelCasedAttributes 2`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import React from \\"@builder.io/react\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <img srcset=\\"http://example.com\\" />
+    </div>
+  \`,
+  standalone: true,
+  imports: [CommonModule],
+})
+export class MyComponent {
+  name = \\"Steve\\";
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -14043,6 +14104,67 @@ export class MyBasicOnUpdateReturnComponentModule {}
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > camelCasedAttributes 1`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+import React from \\"@builder.io/react\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <img srcset=\\"http://example.com\\" />
+    </div>
+  \`,
+})
+export class MyComponent {
+  name = \\"Steve\\";
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > camelCasedAttributes 2`] = `
+"import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import React from \\"@builder.io/react\\";
+
+@Component({
+  selector: \\"my-component, MyComponent\\",
+  template: \`
+    <div>
+      <img srcset=\\"http://example.com\\" />
+    </div>
+  \`,
+  standalone: true,
+  imports: [CommonModule],
+})
+export class MyComponent {
+  name = \\"Steve\\";
+}
+
+@NgModule({
+  declarations: [MyComponent],
+  imports: [CommonModule],
+  exports: [MyComponent],
+})
+export class MyComponentModule {}
+"
+`;
+
 exports[`Angular > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
diff --git a/packages/core/src/__tests__/__snapshots__/camle-case.test.ts.snap b/packages/core/src/__tests__/__snapshots__/camle-case.test.ts.snap
new file mode 100644
index 0000000000..9674f7a346
--- /dev/null
+++ b/packages/core/src/__tests__/__snapshots__/camle-case.test.ts.snap
@@ -0,0 +1,15 @@
+// Vitest Snapshot v1
+
+exports[`map camle cased > map camle cased 1`] = `
+"<script>
+  import React from \\"@builder.io/react\\";
+
+  let name = \\"Steve\\";
+</script>
+
+<div>
+  <div />
+  <img srcset=\\"http://example.com\\" />
+  <div />
+</div>"
+`;
diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
index 729838ac6f..d5aca8a64c 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -3424,6 +3424,13 @@ exports[`Html > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
 "
 `;
 
+exports[`Html > jsx > Javascript Test > camelCasedAttributes 1`] = `
+"<div>
+  <img srcset=\\"http://example.com\\" />
+</div>
+"
+`;
+
 exports[`Html > jsx > Javascript Test > class + ClassName + css 1`] = `
 "<div class=\\"test2 test div\\">
   Hello! I can run in React, Vue, Solid, or Liquid!
@@ -9200,6 +9207,13 @@ exports[`Html > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
 "
 `;
 
+exports[`Html > jsx > Typescript Test > camelCasedAttributes 1`] = `
+"<div>
+  <img srcset=\\"http://example.com\\" />
+</div>
+"
+`;
+
 exports[`Html > jsx > Typescript Test > class + ClassName + css 1`] = `
 "<div class=\\"test2 test div\\">
   Hello! I can run in React, Vue, Solid, or Liquid!
diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
index 734aa0a4da..feffd70335 100644
--- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
@@ -467,6 +467,13 @@ exports[`Liquid > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Javascript Test > camelCasedAttributes 1`] = `
+"<div>
+  <img srcset=\\"http://example.com\\" />
+</div>
+"
+`;
+
 exports[`Liquid > jsx > Javascript Test > class + ClassName + css 1`] = `
 "<div class=\\"test2 test div\\">
   Hello! I can run in React, Vue, Solid, or Liquid!
@@ -1298,6 +1305,13 @@ exports[`Liquid > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Typescript Test > camelCasedAttributes 1`] = `
+"<div>
+  <img srcset=\\"http://example.com\\" />
+</div>
+"
+`;
+
 exports[`Liquid > jsx > Typescript Test > class + ClassName + css 1`] = `
 "<div class=\\"test2 test div\\">
   Hello! I can run in React, Vue, Solid, or Liquid!
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index f9db71299b..d61bad108f 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -48,7 +48,7 @@ export default class MyBasicRefComponent extends LitElement {
              ? html\`<my-fragment>
            <input ref=\\"inputRef\\" .value=\${this.name} @blur=\${(event) =>
                  this.onBlur()}
-           @input=\${(event) => (this.name = event.target.value)} />
+           @change=\${(event) => (this.name = event.target.value)} />
 
            <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
 
@@ -102,7 +102,7 @@ padding: 10px;
 }
 </style>
         <div>
-        <input .value=\${DEFAULT_VALUES.name || this.name} @input=\${(myEvent) =>
+        <input .value=\${DEFAULT_VALUES.name || this.name} @change=\${(myEvent) =>
       (this.name =
         myEvent.target.value)} /> Hello! I can run in React, Vue, Solid, or
         Liquid!
@@ -135,7 +135,7 @@ export default class MyBasicForShowComponent extends LitElement {
         (person, index) =>
           html\`\${
             person === this.name
-              ? html\`<input .value=\${this.name} @input=\${(event) => {
+              ? html\`<input .value=\${this.name} @change=\${(event) => {
                   this.name = event.target.value + \\" and \\" + person;
                 }} /> Hello \${person} ! I can run in
       Qwik, Web Component, React, Vue, Solid, or Liquid! \`
@@ -179,7 +179,7 @@ export default class MyBasicComponent extends LitElement {
         
         <div>
         \${myService.method(\\"hello\\") + this.name} Hello! I can run in React, Vue,
-        Solid, or Liquid! <input @input=\${(event) => this.onChange} />
+        Solid, or Liquid! <input @change=\${(event) => this.onChange} />
       </div>
 
       \`;
@@ -413,7 +413,7 @@ export default class MyBasicForComponent extends LitElement {
       <div>
       \${this.names?.map(
         (person, index) => html\`<my-fragment>
-        <input .value=\${this.name} @input=\${(event) => {
+        <input .value=\${this.name} @change=\${(event) => {
           this.name = event.target.value + \\" and \\" + person;
         }} /> Hello \${person} ! I can run in
         Qwik, Web Component, React, Vue, Solid, or Liquid! </my-fragment
@@ -471,7 +471,7 @@ export default class MyBasicRefComponent extends LitElement {
              ? html\`<my-fragment>
            <input ref=\\"inputRef\\" .value=\${this.name} @blur=\${(event) =>
                  this.onBlur()}
-           @input=\${(event) => (this.name = event.target.value)} />
+           @change=\${(event) => (this.name = event.target.value)} />
 
            <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
 
@@ -917,7 +917,7 @@ export default class CustomCode extends LitElement {
   render() {
     return html\`
         
-        <div  class={'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')}  ref=\\"elem\\"  .innerHTML=\${this.code} ></div>
+        <div  class={'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')}  ref=\\"elem\\"  .innerhtml=\${this.code} ></div>
       \`;
   }
 }
@@ -997,7 +997,7 @@ export default class CustomCode extends LitElement {
   render() {
     return html\`
         
-        <div  class={'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')}  ref=\\"elem\\"  .innerHTML=\${this.code} ></div>
+        <div  class={'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')}  ref=\\"elem\\"  .innerhtml=\${this.code} ></div>
       \`;
   }
 }
@@ -1305,8 +1305,9 @@ export default class FormComponent extends LitElement {
 </style>
          <form  .validate=\${this.validate}  ref=\\"formRef\\"  .action=\${
       !this.sendWithJs && this.action
-    }  .method=\${this.method}  .name=\${this.name}  @submit=\${(event) =>
-      this.onSubmit(event)}  \${spread(props.attributes)} >
+    }  .method=\${this.method}  .name=\${this.name}  \${spread(
+      props.attributes
+    )}  @submit=\${(event) => this.onSubmit(event)} >
              
        \${
          this.builderBlock && this.builderBlock.children
@@ -1463,8 +1464,8 @@ export default class Image extends LitElement {
            aria-role=\${this.altText ? \\"presentation\\" : undefined} .src=\${
                    this.image
                  }
-           @load=\${(event) => this.setLoaded()} .srcset=\${this.srcset}
-           .sizes=\${this.sizes} />\`
+           .srcset=\${this.srcset} .sizes=\${this.sizes} @load=\${(event) =>
+                   this.setLoaded()} />\`
                : null
            }
 
@@ -1616,7 +1617,7 @@ export default class FormInputComponent extends LitElement {
       Builder.isEditing && this.defaultValue ? this.defaultValue : \\"default-key\\"
     } .placeholder=\${this.placeholder}
       .type=\${this.type} .name=\${this.name} .value=\${this.value}
-      .defaultValue=\${this.defaultValue} .required=\${this.required} />
+      .required=\${this.required} .defaultvalue=\${this.defaultValue} />
 
       \`;
   }
@@ -1645,7 +1646,7 @@ export default class RawText extends LitElement {
   render() {
     return html\`
         
-        <span  class={props.attributes?.class || props.attributes?.className}  .innerHTML=\${
+        <span  class={props.attributes?.class || props.attributes?.className}  .innerhtml=\${
           this.text || \\"\\"
         } ></span>
       \`;
@@ -1797,7 +1798,7 @@ export default class SelectComponent extends LitElement {
         
         <select  \${spread(props.attributes)}  .value=\${this.value}  .key=\${
       Builder.isEditing && this.defaultValue ? this.defaultValue : \\"default-key\\"
-    }  .defaultValue=\${this.defaultValue}  .name=\${this.name} >
+    }  .name=\${this.name}  .defaultvalue=\${this.defaultValue} >
             
       \${this.options?.map(
         (option, index) =>
@@ -2126,9 +2127,9 @@ export default class Text extends LitElement {
   render() {
     return html\`
         
-        <div  .contentEditable=\${allowEditingText || undefined}  data-name=\${{
-      test: this.name || \\"any name\\",
-    }}  .innerHTML=\${
+        <div  data-name=\${{
+          test: this.name || \\"any name\\",
+        }}  .contenteditable=\${allowEditingText || undefined}  .innerhtml=\${
       this.text || this.content || this.name || '<p class=\\"text-lg\\">my name</p>'
     } ></div>
       \`;
@@ -2177,7 +2178,7 @@ export default class Textarea extends LitElement {
         .placeholder=\\"\${this.placeholder}\\"
         .name=\\"\${this.name}\\"
         .value=\\"\${this.value}\\"
-        .defaultValue=\\"\${this.defaultValue}\\"
+        .defaultvalue=\\"\${this.defaultValue}\\"
       ></textarea>
 
       \`;
@@ -2322,7 +2323,7 @@ color: red;
 }
 </style>
         <div>
-        <input ref=\\"props.inputRef\\" .value=\${this.name} @input=\${(event) =>
+        <input ref=\\"props.inputRef\\" .value=\${this.name} @change=\${(event) =>
       (this.name = event.target.value)} />
       </div>
 
@@ -2361,7 +2362,7 @@ color: red;
 }
 </style>
         <div>
-        <input ref=\\"props.inputRef\\" .value=\${this.name} @input=\${(event) =>
+        <input ref=\\"props.inputRef\\" .value=\${this.name} @change=\${(event) =>
       (this.name = event.target.value)} />
       </div>
 
@@ -2411,6 +2412,33 @@ export default class MyBasicOnUpdateReturnComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Javascript Test > camelCasedAttributes 1`] = `
+"import React from \\"@builder.io/react\\";
+
+import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"my-component\\")
+export default class MyComponent extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @state() name = \\"Steve\\";
+
+  render() {
+    return html\`
+      
+      <div>
+      <img srcset=\\"http://example.com\\" />
+    </div>
+
+    \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
@@ -4107,13 +4135,13 @@ export default class SvgComponent extends LitElement {
   render() {
     return html\`
       
-      <svg  fill=\\"none\\"  role=\\"img\\"  .viewBox=\${
-        \\"0 0 \\" + 42 + \\" \\" + 42
-      }  .width=\${42}  .height=\${42} >
+      <svg  fill=\\"none\\"  role=\\"img\\"  .width=\${42}  .height=\${42}  .viewbox=\${
+      \\"0 0 \\" + 42 + \\" \\" + 42
+    } >
           
     <defs >
             
-    <filter  id=\\"prefix__filter0_f\\"  filterUnits=\\"userSpaceOnUse\\" >
+    <filter  id=\\"prefix__filter0_f\\"  filterunits=\\"userSpaceOnUse\\" >
               
     <feFlood  result=\\"BackgroundImageFix\\" ></feFlood>
 
@@ -4121,7 +4149,7 @@ export default class SvgComponent extends LitElement {
     <feBlend  in=\\"SourceGraphic\\"  in2=\\"BackgroundImageFix\\"  result=\\"shape\\" ></feBlend>
 
               
-    <feGaussianBlur  result=\\"effect1_foregroundBlur\\"  .stdDeviation=\${7} ></feGaussianBlur>
+    <feGaussianBlur  result=\\"effect1_foregroundBlur\\"  .stddeviation=\${7} ></feGaussianBlur>
 
             </filter>
 
@@ -4319,7 +4347,7 @@ export default class MyBasicRefComponent extends LitElement {
              ? html\`<my-fragment>
            <input ref=\\"inputRef\\" .value=\${this.name} @blur=\${(event) =>
                  this.onBlur()}
-           @input=\${(event) => (this.name = event.target.value)} />
+           @change=\${(event) => (this.name = event.target.value)} />
 
            <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
 
@@ -4373,7 +4401,7 @@ padding: 10px;
 }
 </style>
         <div>
-        <input .value=\${DEFAULT_VALUES.name || this.name} @input=\${(myEvent) =>
+        <input .value=\${DEFAULT_VALUES.name || this.name} @change=\${(myEvent) =>
       (this.name =
         myEvent.target.value)} /> Hello! I can run in React, Vue, Solid, or
         Liquid!
@@ -4406,7 +4434,7 @@ export default class MyBasicForShowComponent extends LitElement {
         (person, index) =>
           html\`\${
             person === this.name
-              ? html\`<input .value=\${this.name} @input=\${(event) => {
+              ? html\`<input .value=\${this.name} @change=\${(event) => {
                   this.name = event.target.value + \\" and \\" + person;
                 }} /> Hello \${person} ! I can run in
       Qwik, Web Component, React, Vue, Solid, or Liquid! \`
@@ -4450,7 +4478,7 @@ export default class MyBasicComponent extends LitElement {
         
         <div>
         \${myService.method(\\"hello\\") + this.name} Hello! I can run in React, Vue,
-        Solid, or Liquid! <input @input=\${(event) => this.onChange} />
+        Solid, or Liquid! <input @change=\${(event) => this.onChange} />
       </div>
 
       \`;
@@ -4684,7 +4712,7 @@ export default class MyBasicForComponent extends LitElement {
       <div>
       \${this.names?.map(
         (person, index) => html\`<my-fragment>
-        <input .value=\${this.name} @input=\${(event) => {
+        <input .value=\${this.name} @change=\${(event) => {
           this.name = event.target.value + \\" and \\" + person;
         }} /> Hello \${person} ! I can run in
         Qwik, Web Component, React, Vue, Solid, or Liquid! </my-fragment
@@ -4742,7 +4770,7 @@ export default class MyBasicRefComponent extends LitElement {
              ? html\`<my-fragment>
            <input ref=\\"inputRef\\" .value=\${this.name} @blur=\${(event) =>
                  this.onBlur()}
-           @input=\${(event) => (this.name = event.target.value)} />
+           @change=\${(event) => (this.name = event.target.value)} />
 
            <label for=\\"cars\\" ref=\\"inputNoArgRef\\"> Choose a car: </label>
 
@@ -5188,7 +5216,7 @@ export default class CustomCode extends LitElement {
   render() {
     return html\`
         
-        <div  class={'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')}  ref=\\"elem\\"  .innerHTML=\${this.code} ></div>
+        <div  class={'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')}  ref=\\"elem\\"  .innerhtml=\${this.code} ></div>
       \`;
   }
 }
@@ -5268,7 +5296,7 @@ export default class CustomCode extends LitElement {
   render() {
     return html\`
         
-        <div  class={'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')}  ref=\\"elem\\"  .innerHTML=\${this.code} ></div>
+        <div  class={'builder-custom-code' + (props.replaceNodes ? ' replace-nodes' : '')}  ref=\\"elem\\"  .innerhtml=\${this.code} ></div>
       \`;
   }
 }
@@ -5576,8 +5604,9 @@ export default class FormComponent extends LitElement {
 </style>
          <form  .validate=\${this.validate}  ref=\\"formRef\\"  .action=\${
       !this.sendWithJs && this.action
-    }  .method=\${this.method}  .name=\${this.name}  @submit=\${(event) =>
-      this.onSubmit(event)}  \${spread(props.attributes)} >
+    }  .method=\${this.method}  .name=\${this.name}  \${spread(
+      props.attributes
+    )}  @submit=\${(event) => this.onSubmit(event)} >
              
        \${
          this.builderBlock && this.builderBlock.children
@@ -5734,8 +5763,8 @@ export default class Image extends LitElement {
            aria-role=\${this.altText ? \\"presentation\\" : undefined} .src=\${
                    this.image
                  }
-           @load=\${(event) => this.setLoaded()} .srcset=\${this.srcset}
-           .sizes=\${this.sizes} />\`
+           .srcset=\${this.srcset} .sizes=\${this.sizes} @load=\${(event) =>
+                   this.setLoaded()} />\`
                : null
            }
 
@@ -5887,7 +5916,7 @@ export default class FormInputComponent extends LitElement {
       Builder.isEditing && this.defaultValue ? this.defaultValue : \\"default-key\\"
     } .placeholder=\${this.placeholder}
       .type=\${this.type} .name=\${this.name} .value=\${this.value}
-      .defaultValue=\${this.defaultValue} .required=\${this.required} />
+      .required=\${this.required} .defaultvalue=\${this.defaultValue} />
 
       \`;
   }
@@ -5916,7 +5945,7 @@ export default class RawText extends LitElement {
   render() {
     return html\`
         
-        <span  class={props.attributes?.class || props.attributes?.className}  .innerHTML=\${
+        <span  class={props.attributes?.class || props.attributes?.className}  .innerhtml=\${
           this.text || \\"\\"
         } ></span>
       \`;
@@ -6068,7 +6097,7 @@ export default class SelectComponent extends LitElement {
         
         <select  \${spread(props.attributes)}  .value=\${this.value}  .key=\${
       Builder.isEditing && this.defaultValue ? this.defaultValue : \\"default-key\\"
-    }  .defaultValue=\${this.defaultValue}  .name=\${this.name} >
+    }  .name=\${this.name}  .defaultvalue=\${this.defaultValue} >
             
       \${this.options?.map(
         (option, index) =>
@@ -6397,9 +6426,9 @@ export default class Text extends LitElement {
   render() {
     return html\`
         
-        <div  .contentEditable=\${allowEditingText || undefined}  data-name=\${{
-      test: this.name || \\"any name\\",
-    }}  .innerHTML=\${
+        <div  data-name=\${{
+          test: this.name || \\"any name\\",
+        }}  .contenteditable=\${allowEditingText || undefined}  .innerhtml=\${
       this.text || this.content || this.name || '<p class=\\"text-lg\\">my name</p>'
     } ></div>
       \`;
@@ -6448,7 +6477,7 @@ export default class Textarea extends LitElement {
         .placeholder=\\"\${this.placeholder}\\"
         .name=\\"\${this.name}\\"
         .value=\\"\${this.value}\\"
-        .defaultValue=\\"\${this.defaultValue}\\"
+        .defaultvalue=\\"\${this.defaultValue}\\"
       ></textarea>
 
       \`;
@@ -6593,7 +6622,7 @@ color: red;
 }
 </style>
         <div>
-        <input ref=\\"props.inputRef\\" .value=\${this.name} @input=\${(event) =>
+        <input ref=\\"props.inputRef\\" .value=\${this.name} @change=\${(event) =>
       (this.name = event.target.value)} />
       </div>
 
@@ -6632,7 +6661,7 @@ color: red;
 }
 </style>
         <div>
-        <input ref=\\"props.inputRef\\" .value=\${this.name} @input=\${(event) =>
+        <input ref=\\"props.inputRef\\" .value=\${this.name} @change=\${(event) =>
       (this.name = event.target.value)} />
       </div>
 
@@ -6682,6 +6711,33 @@ export default class MyBasicOnUpdateReturnComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Typescript Test > camelCasedAttributes 1`] = `
+"import React from \\"@builder.io/react\\";
+
+import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"my-component\\")
+export default class MyComponent extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @state() name = \\"Steve\\";
+
+  render() {
+    return html\`
+      
+      <div>
+      <img srcset=\\"http://example.com\\" />
+    </div>
+
+    \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
@@ -8378,13 +8434,13 @@ export default class SvgComponent extends LitElement {
   render() {
     return html\`
       
-      <svg  fill=\\"none\\"  role=\\"img\\"  .viewBox=\${
-        \\"0 0 \\" + 42 + \\" \\" + 42
-      }  .width=\${42}  .height=\${42} >
+      <svg  fill=\\"none\\"  role=\\"img\\"  .width=\${42}  .height=\${42}  .viewbox=\${
+      \\"0 0 \\" + 42 + \\" \\" + 42
+    } >
           
     <defs >
             
-    <filter  id=\\"prefix__filter0_f\\"  filterUnits=\\"userSpaceOnUse\\" >
+    <filter  id=\\"prefix__filter0_f\\"  filterunits=\\"userSpaceOnUse\\" >
               
     <feFlood  result=\\"BackgroundImageFix\\" ></feFlood>
 
@@ -8392,7 +8448,7 @@ export default class SvgComponent extends LitElement {
     <feBlend  in=\\"SourceGraphic\\"  in2=\\"BackgroundImageFix\\"  result=\\"shape\\" ></feBlend>
 
               
-    <feGaussianBlur  result=\\"effect1_foregroundBlur\\"  .stdDeviation=\${7} ></feGaussianBlur>
+    <feGaussianBlur  result=\\"effect1_foregroundBlur\\"  .stddeviation=\${7} ></feGaussianBlur>
 
             </filter>
 
@@ -8535,9 +8591,8 @@ export default class MyComponent extends LitElement {
     return html\`
       
       <div>
-      <input @input=\${(event) => (this.name = event.target.value)} .value=\${
-      this.name
-    }
+      <input .value=\${this.name} @change=\${(event) =>
+      (this.name = event.target.value)}
       /> Hello! I can run in React, Vue, Solid, or Liquid!
     </div>
 
@@ -8583,21 +8638,21 @@ export default class MyComponent extends LitElement {
       
       <div>
       <input type=\\"radio\\" value=\\"Plain\\" .checked=\${this.tortilla === 'Plain'}
-      @input=\${event => this.tortilla = event.target.value} /> <input type=\\"radio\\"
-      value=\\"Whole wheat\\" .checked=\${this.tortilla === 'Whole wheat'} @input=\${event
-      => this.tortilla = event.target.value} /> <input type=\\"radio\\" value=\\"Spinach\\"
-      .checked=\${this.tortilla === 'Spinach'} @input=\${event => this.tortilla =
-      event.target.value} />
+      @change=\${event => this.tortilla = event.target.value} /> <input type=\\"radio\\"
+      value=\\"Whole wheat\\" .checked=\${this.tortilla === 'Whole wheat'}
+      @change=\${event => this.tortilla = event.target.value} /> <input type=\\"radio\\"
+      value=\\"Spinach\\" .checked=\${this.tortilla === 'Spinach'} @change=\${event =>
+      this.tortilla = event.target.value} />
       <br />
       <br />
       <input type=\\"checkbox\\" value=\\"Rice\\" .checked=\${this.fillings === 'Rice'}
-      @input=\${event => this.fillings = event.target.value} /> <input
+      @change=\${event => this.fillings = event.target.value} /> <input
       type=\\"checkbox\\" value=\\"Beans\\" .checked=\${this.fillings === 'Beans'}
-      @input=\${event => this.fillings = event.target.value} /> <input
+      @change=\${event => this.fillings = event.target.value} /> <input
       type=\\"checkbox\\" value=\\"Cheese\\" .checked=\${this.fillings === 'Cheese'}
-      @input=\${event => this.fillings = event.target.value} /> <input
+      @change=\${event => this.fillings = event.target.value} /> <input
       type=\\"checkbox\\" value=\\"Guac (extra)\\" .checked=\${this.fillings === 'Guac
-      (extra)'} @input=\${event => this.fillings = event.target.value} />
+      (extra)'} @change=\${event => this.fillings = event.target.value} />
       <p>Tortilla: \${this.tortilla}</p>
       <p>Fillings: \${this.fillings}</p>
     </div>
@@ -8764,7 +8819,7 @@ export default class MyComponent extends LitElement {
   render() {
     return html\`
       
-      <div .innerHTML=\\"\${this.html}\\"></div>
+      <div .innerhtml=\\"\${this.html}\\"></div>
 
     \`;
   }
@@ -8921,9 +8976,12 @@ export default class MyComponent extends LitElement {
     return html\`
         
         <div>
-        <input type=\\"number\\" @input=\${(event) => (this.a = event.target.value)}
-        .value=\${this.a} /> <input type=\\"number\\" @input=\${(event) =>
-      (this.b = event.target.value)} .value=\${this.b} /> Result: \${this.result}
+        <input type=\\"number\\" .value=\${this.a} @change=\${(event) =>
+      (this.a = event.target.value)} /> <input type=\\"number\\" .value=\${
+      this.b
+    } @change=\${(event) => (this.b = event.target.value)} /> Result: \${
+      this.result
+    }
       </div>
 
       \`;
@@ -9029,9 +9087,8 @@ export default class MyComponent extends LitElement {
     return html\`
       
       <div>
-      <input @input=\${(event) => (this.name = event.target.value)} .value=\${
-      this.name
-    }
+      <input .value=\${this.name} @change=\${(event) =>
+      (this.name = event.target.value)}
       /> Hello! I can run in React, Vue, Solid, or Liquid!
     </div>
 
@@ -9077,21 +9134,21 @@ export default class MyComponent extends LitElement {
       
       <div>
       <input type=\\"radio\\" value=\\"Plain\\" .checked=\${this.tortilla === 'Plain'}
-      @input=\${event => this.tortilla = event.target.value} /> <input type=\\"radio\\"
-      value=\\"Whole wheat\\" .checked=\${this.tortilla === 'Whole wheat'} @input=\${event
-      => this.tortilla = event.target.value} /> <input type=\\"radio\\" value=\\"Spinach\\"
-      .checked=\${this.tortilla === 'Spinach'} @input=\${event => this.tortilla =
-      event.target.value} />
+      @change=\${event => this.tortilla = event.target.value} /> <input type=\\"radio\\"
+      value=\\"Whole wheat\\" .checked=\${this.tortilla === 'Whole wheat'}
+      @change=\${event => this.tortilla = event.target.value} /> <input type=\\"radio\\"
+      value=\\"Spinach\\" .checked=\${this.tortilla === 'Spinach'} @change=\${event =>
+      this.tortilla = event.target.value} />
       <br />
       <br />
       <input type=\\"checkbox\\" value=\\"Rice\\" .checked=\${this.fillings === 'Rice'}
-      @input=\${event => this.fillings = event.target.value} /> <input
+      @change=\${event => this.fillings = event.target.value} /> <input
       type=\\"checkbox\\" value=\\"Beans\\" .checked=\${this.fillings === 'Beans'}
-      @input=\${event => this.fillings = event.target.value} /> <input
+      @change=\${event => this.fillings = event.target.value} /> <input
       type=\\"checkbox\\" value=\\"Cheese\\" .checked=\${this.fillings === 'Cheese'}
-      @input=\${event => this.fillings = event.target.value} /> <input
+      @change=\${event => this.fillings = event.target.value} /> <input
       type=\\"checkbox\\" value=\\"Guac (extra)\\" .checked=\${this.fillings === 'Guac
-      (extra)'} @input=\${event => this.fillings = event.target.value} />
+      (extra)'} @change=\${event => this.fillings = event.target.value} />
       <p>Tortilla: \${this.tortilla}</p>
       <p>Fillings: \${this.fillings}</p>
     </div>
@@ -9258,7 +9315,7 @@ export default class MyComponent extends LitElement {
   render() {
     return html\`
       
-      <div .innerHTML=\\"\${this.html}\\"></div>
+      <div .innerhtml=\\"\${this.html}\\"></div>
 
     \`;
   }
@@ -9415,9 +9472,12 @@ export default class MyComponent extends LitElement {
     return html\`
         
         <div>
-        <input type=\\"number\\" @input=\${(event) => (this.a = event.target.value)}
-        .value=\${this.a} /> <input type=\\"number\\" @input=\${(event) =>
-      (this.b = event.target.value)} .value=\${this.b} /> Result: \${this.result}
+        <input type=\\"number\\" .value=\${this.a} @change=\${(event) =>
+      (this.a = event.target.value)} /> <input type=\\"number\\" .value=\${
+      this.b
+    } @change=\${(event) => (this.b = event.target.value)} /> Result: \${
+      this.result
+    }
       </div>
 
       \`;
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index c08272708e..f2aa23f09f 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -95,8 +95,8 @@ style {
       class=\\"input-790d468a\\"
       key=\\"inputRef\\"
       value=(state.name)
-      on-blur(event => component.onBlur())
-      on-input(event => state.name = event.target.value)
+      onblur=(event => component.onBlur())
+      onchange=(event => state.name = event.target.value)
     />
 
     <label for=\\"cars\\" key=\\"inputNoArgRef\\"> Choose a car: </label>
@@ -136,7 +136,7 @@ style {
 <div class=\\"test div-48c79144\\">
   <input
     value=(DEFAULT_VALUES.name || state.name)
-    on-input(myEvent => state.name = myEvent.target.value)
+    onchange=(myEvent => state.name = myEvent.target.value)
   />
 
   Hello! I can run in React, Vue, Solid, or Liquid!
@@ -155,7 +155,7 @@ exports[`Marko > jsx > Javascript Test > Basic 2`] = `
     <if(person === state.name)>
       <input
         value=(state.name)
-        on-input(event => {
+        onchange=(event => {
   state.name = event.target.value + ' and ' + person;
 })
       />
@@ -190,7 +190,7 @@ class {
   \${myService.method('hello') + state.name} Hello! I can run in React, Vue,
   Solid, or Liquid!
 
-  <input on-input(event => component.onChange) />
+  <input onchange=(event => component.onChange) />
 </div>"
 `;
 
@@ -297,7 +297,7 @@ exports[`Marko > jsx > Javascript Test > BasicFor 1`] = `
   <for|person| of=(state.names)>
     <input
       value=(state.name)
-      on-input(event => {
+      onchange=(event => {
   state.name = event.target.value + ' and ' + person;
 })
     />
@@ -341,8 +341,8 @@ style {
       class=\\"input-cbb647ea\\"
       key=\\"inputRef\\"
       value=(state.name)
-      on-blur(event => component.onBlur())
-      on-input(event => state.name = event.target.value)
+      onblur=(event => component.onBlur())
+      onchange=(event => state.name = event.target.value)
     />
 
     <label for=\\"cars\\" key=\\"inputNoArgRef\\"> Choose a car: </label>
@@ -369,7 +369,7 @@ exports[`Marko > jsx > Javascript Test > BasicRefAssignment 1`] = `
 }
 
 <div>
-  <button on-click(evt => component.handlerClick(evt))>Click</button>
+  <button onclick=(evt => component.handlerClick(evt))>Click</button>
 </div>"
 `;
 
@@ -400,7 +400,7 @@ class {
 <div>
   <h1>Now: \${state.count} , before: \${this.prevCount}</h1>
 
-  <button on-click(event => state.count += 1)>Increment</button>
+  <button onclick=(event => state.count += 1)>Increment</button>
 </div>"
 `;
 
@@ -506,8 +506,8 @@ exports[`Marko > jsx > Javascript Test > ContentSlotJSX 1`] = `
   <div
     name=(input.slotContent ? 'name1' : 'name2')
     title=(input.slotContent ? 'title1' : 'title2')  ...(props.attributes)
-    on-click(event => component.show())
     class=(input.slotContent ? \`\${state.name}-content\` : '')
+    onclick=(event => component.show())
   >
     <if(state.showContent && input.slotContent)>
       <slot name=\\"content\\">\${input.content}</slot></if>
@@ -580,9 +580,8 @@ exports[`Marko > jsx > Javascript Test > CustomCode 1`] = `
 <div
   key=\\"elem\\"
   class=('builder-custom-code' + (input.replaceNodes ? ' replace-nodes' : ''))
->
-  $!{input.code}
-</div>"
+  innerhtml=(input.code)
+></div>"
 `;
 
 exports[`Marko > jsx > Javascript Test > Embed 1`] = `
@@ -645,9 +644,8 @@ exports[`Marko > jsx > Javascript Test > Embed 1`] = `
 <div
   key=\\"elem\\"
   class=('builder-custom-code' + (input.replaceNodes ? ' replace-nodes' : ''))
->
-  $!{input.code}
-</div>"
+  innerhtml=(input.code)
+></div>"
 `;
 
 exports[`Marko > jsx > Javascript Test > Form 1`] = `
@@ -892,7 +890,7 @@ class {
 }
 
 style { 
-  .pre-37eea1bf {
+  .pre-8989dad4 {
     padding: 10px;
     color: red;
     text-align: center;
@@ -903,8 +901,8 @@ style {
   key=\\"formRef\\"
   action=(!input.sendWithJs && input.action)
   method=(input.method)
-  name=(input.name)
-  on-submit(event => component.onSubmit(event))  ...(props.attributes)
+  name=(input.name)  ...(props.attributes)
+  onsubmit=(event => component.onSubmit(event))
 >
   <if(input.builderBlock && input.builderBlock.children)>
     <for|block,index| of=(input.builderBlock?.children)>
@@ -927,7 +925,7 @@ style {
     ></BuilderBlocks></if>
 
   <if(component.submissionState === 'error' && state.responseData)>
-    <pre class=\\"builder-form-error-text pre-37eea1bf\\">
+    <pre class=\\"builder-form-error-text pre-8989dad4\\">
           
 \${JSON.stringify(state.responseData, null, 2)}
 
@@ -1012,9 +1010,9 @@ style {
         aria-role=(input.altText ? 'presentation' : undefined)
         class=('builder-image' + (input._class ? ' ' + input._class : '') + ' img-45432c52')
         src=(input.image)
-        on-load(event => component.setLoaded())
         srcset=(input.srcset)
         sizes=(input.sizes)
+        onload=(event => component.setLoaded())
     /></if>
 
     <source srcset=(input.srcset) />
@@ -1066,16 +1064,18 @@ class {}
   type=(input.type)
   name=(input.name)
   value=(input.value)
-  defaultValue=(input.defaultValue)
   required=(input.required)
+  defaultvalue=(input.defaultValue)
 />"
 `;
 
 exports[`Marko > jsx > Javascript Test > RawText 1`] = `
 "class {}
 
-<span class=(input.attributes?.class || input.attributes?.className)
-  >$!{input.text || ''}</span>"
+<span
+  class=(input.attributes?.class || input.attributes?.className)
+  innerhtml=(input.text || '')
+></span>"
 `;
 
 exports[`Marko > jsx > Javascript Test > Section 1`] = `
@@ -1120,8 +1120,8 @@ class {}
   ...(props.attributes)
   value=(input.value)
   key=(Builder.isEditing && input.defaultValue ? input.defaultValue : 'default-key')
-  defaultValue=(input.defaultValue)
   name=(input.name)
+  defaultvalue=(input.defaultValue)
 >
   <for|option,index| of=(input.options)>
     <option value=(option.value) data-index=(index)>
@@ -1229,7 +1229,7 @@ style {
   }
 }
 <div data-user=(state.name)>
-  <button on-click(event => state.showReviewPrompt = true)>
+  <button onclick=(event => state.showReviewPrompt = true)>
     Write a review
   </button>
 
@@ -1242,7 +1242,7 @@ style {
     ></textarea>
     <button
       class=\\"button-c3470f28\\"
-      on-click(event => {
+      onclick=(event => {
   event.preventDefault();
   state.showReviewPrompt = false;
 })
@@ -1282,15 +1282,12 @@ class {
 }
 
 <div
-  contenteditable=(allowEditingText || undefined)
   data-name=({
   test: state.name || 'any name'
 })
->
-  $!{input.text || input.content || state.name || '
-  <p class=\\"text-lg\\">my name</p>
-  '}
-</div>"
+  contenteditable=(allowEditingText || undefined)
+  innerhtml=(input.text || input.content || state.name || '<p class=\\"text-lg\\">my name</p>')
+></div>"
 `;
 
 exports[`Marko > jsx > Javascript Test > Textarea 1`] = `
@@ -1301,7 +1298,7 @@ exports[`Marko > jsx > Javascript Test > Textarea 1`] = `
   placeholder=(input.placeholder)
   name=(input.name)
   value=(input.value)
-  defaultValue=(input.defaultValue)
+  defaultvalue=(input.defaultValue)
 ></textarea>"
 `;
 
@@ -1368,7 +1365,7 @@ style {
     class=\\"input-014e706f\\"
     key=\\"propsInputRef\\"
     value=(state.name)
-    on-input(event => state.name = event.target.value)
+    onchange=(event => state.name = event.target.value)
   />
 </div>"
 `;
@@ -1394,7 +1391,7 @@ style {
     class=\\"input-53a59b24\\"
     key=\\"propsInputRef\\"
     value=(state.name)
-    on-input(event => state.name = event.target.value)
+    onchange=(event => state.name = event.target.value)
   />
 </div>"
 `;
@@ -1426,6 +1423,20 @@ exports[`Marko > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
 <div>Hello! \${state.name}</div>"
 `;
 
+exports[`Marko > jsx > Javascript Test > camelCasedAttributes 1`] = `
+"import React from \\"@builder.io/react\\";
+
+class {
+  onCreate() {
+    this.state = { name: \\"Steve\\" };
+  }
+}
+
+<div>
+  <img srcset=\\"http://example.com\\" />
+</div>"
+`;
+
 exports[`Marko > jsx > Javascript Test > class + ClassName + css 1`] = `
 "class {}
 
@@ -1546,7 +1557,7 @@ exports[`Marko > jsx > Javascript Test > defaultProps 1`] = `
     <button
       type=\\"button\\"
       ...(props.attributes)
-      on-click(event => input.onClick(event))
+      onclick=(event => input.onClick(event))
     >
       \${input.buttonText}
     </button></if>
@@ -1570,7 +1581,7 @@ exports[`Marko > jsx > Javascript Test > defaultPropsOutsideComponent 1`] = `
     <button
       type=\\"button\\"
       ...(props.attributes)
-      on-click(event => input.onClick(event))
+      onclick=(event => input.onClick(event))
     >
       \${input.text}
     </button></if>
@@ -2089,7 +2100,7 @@ style {
     flex-direction: columns;
   }
 }
-<div class=\\"div-c8eb54c0\\" on-click(event => trackClick(input.content.id))>
+<div class=\\"div-c8eb54c0\\" onclick=(event => trackClick(input.content.id))>
   <RenderBlocks blocks=(input.content.blocks)></RenderBlocks>
 </div>"
 `;
@@ -2200,12 +2211,12 @@ exports[`Marko > jsx > Javascript Test > svgComponent 1`] = `
 <svg
   fill=\\"none\\"
   role=\\"img\\"
-  viewBox=('0 0 ' + 42 + ' ' + 42)
   width=(42)
   height=(42)
+  viewbox=('0 0 ' + 42 + ' ' + 42)
 >
   <defs>
-    <filter id=\\"prefix__filter0_f\\" filterUnits=\\"userSpaceOnUse\\">
+    <filter id=\\"prefix__filter0_f\\" filterunits=\\"userSpaceOnUse\\">
       <feFlood result=\\"BackgroundImageFix\\"></feFlood>
 
       <feBlend
@@ -2216,7 +2227,7 @@ exports[`Marko > jsx > Javascript Test > svgComponent 1`] = `
 
       <feGaussianBlur
         result=\\"effect1_foregroundBlur\\"
-        stdDeviation=(7)
+        stddeviation=(7)
       ></feGaussianBlur>
     </filter>
   </defs>
@@ -2323,8 +2334,8 @@ style {
       class=\\"input-790d468a\\"
       key=\\"inputRef\\"
       value=(state.name)
-      on-blur(event => component.onBlur())
-      on-input(event => state.name = event.target.value)
+      onblur=(event => component.onBlur())
+      onchange=(event => state.name = event.target.value)
     />
 
     <label for=\\"cars\\" key=\\"inputNoArgRef\\"> Choose a car: </label>
@@ -2364,7 +2375,7 @@ style {
 <div class=\\"test div-48c79144\\">
   <input
     value=(DEFAULT_VALUES.name || state.name)
-    on-input(myEvent => state.name = myEvent.target.value)
+    onchange=(myEvent => state.name = myEvent.target.value)
   />
 
   Hello! I can run in React, Vue, Solid, or Liquid!
@@ -2383,7 +2394,7 @@ exports[`Marko > jsx > Typescript Test > Basic 2`] = `
     <if(person === state.name)>
       <input
         value=(state.name)
-        on-input(event => {
+        onchange=(event => {
   state.name = event.target.value + ' and ' + person;
 })
       />
@@ -2418,7 +2429,7 @@ class {
   \${myService.method('hello') + state.name} Hello! I can run in React, Vue,
   Solid, or Liquid!
 
-  <input on-input(event => component.onChange) />
+  <input onchange=(event => component.onChange) />
 </div>"
 `;
 
@@ -2525,7 +2536,7 @@ exports[`Marko > jsx > Typescript Test > BasicFor 1`] = `
   <for|person| of=(state.names)>
     <input
       value=(state.name)
-      on-input(event => {
+      onchange=(event => {
   state.name = event.target.value + ' and ' + person;
 })
     />
@@ -2569,8 +2580,8 @@ style {
       class=\\"input-cbb647ea\\"
       key=\\"inputRef\\"
       value=(state.name)
-      on-blur(event => component.onBlur())
-      on-input(event => state.name = event.target.value)
+      onblur=(event => component.onBlur())
+      onchange=(event => state.name = event.target.value)
     />
 
     <label for=\\"cars\\" key=\\"inputNoArgRef\\"> Choose a car: </label>
@@ -2597,7 +2608,7 @@ exports[`Marko > jsx > Typescript Test > BasicRefAssignment 1`] = `
 }
 
 <div>
-  <button on-click(evt => component.handlerClick(evt))>Click</button>
+  <button onclick=(evt => component.handlerClick(evt))>Click</button>
 </div>"
 `;
 
@@ -2628,7 +2639,7 @@ class {
 <div>
   <h1>Now: \${state.count} , before: \${this.prevCount}</h1>
 
-  <button on-click(event => state.count += 1)>Increment</button>
+  <button onclick=(event => state.count += 1)>Increment</button>
 </div>"
 `;
 
@@ -2734,8 +2745,8 @@ exports[`Marko > jsx > Typescript Test > ContentSlotJSX 1`] = `
   <div
     name=(input.slotContent ? 'name1' : 'name2')
     title=(input.slotContent ? 'title1' : 'title2')  ...(props.attributes)
-    on-click(event => component.show())
     class=(input.slotContent ? \`\${state.name}-content\` : '')
+    onclick=(event => component.show())
   >
     <if(state.showContent && input.slotContent)>
       <slot name=\\"content\\">\${input.content}</slot></if>
@@ -2808,9 +2819,8 @@ exports[`Marko > jsx > Typescript Test > CustomCode 1`] = `
 <div
   key=\\"elem\\"
   class=('builder-custom-code' + (input.replaceNodes ? ' replace-nodes' : ''))
->
-  $!{input.code}
-</div>"
+  innerhtml=(input.code)
+></div>"
 `;
 
 exports[`Marko > jsx > Typescript Test > Embed 1`] = `
@@ -2873,9 +2883,8 @@ exports[`Marko > jsx > Typescript Test > Embed 1`] = `
 <div
   key=\\"elem\\"
   class=('builder-custom-code' + (input.replaceNodes ? ' replace-nodes' : ''))
->
-  $!{input.code}
-</div>"
+  innerhtml=(input.code)
+></div>"
 `;
 
 exports[`Marko > jsx > Typescript Test > Form 1`] = `
@@ -3120,7 +3129,7 @@ class {
 }
 
 style { 
-  .pre-37eea1bf {
+  .pre-8989dad4 {
     padding: 10px;
     color: red;
     text-align: center;
@@ -3131,8 +3140,8 @@ style {
   key=\\"formRef\\"
   action=(!input.sendWithJs && input.action)
   method=(input.method)
-  name=(input.name)
-  on-submit(event => component.onSubmit(event))  ...(props.attributes)
+  name=(input.name)  ...(props.attributes)
+  onsubmit=(event => component.onSubmit(event))
 >
   <if(input.builderBlock && input.builderBlock.children)>
     <for|block,index| of=(input.builderBlock?.children)>
@@ -3155,7 +3164,7 @@ style {
     ></BuilderBlocks></if>
 
   <if(component.submissionState === 'error' && state.responseData)>
-    <pre class=\\"builder-form-error-text pre-37eea1bf\\">
+    <pre class=\\"builder-form-error-text pre-8989dad4\\">
           
 \${JSON.stringify(state.responseData, null, 2)}
 
@@ -3240,9 +3249,9 @@ style {
         aria-role=(input.altText ? 'presentation' : undefined)
         class=('builder-image' + (input._class ? ' ' + input._class : '') + ' img-45432c52')
         src=(input.image)
-        on-load(event => component.setLoaded())
         srcset=(input.srcset)
         sizes=(input.sizes)
+        onload=(event => component.setLoaded())
     /></if>
 
     <source srcset=(input.srcset) />
@@ -3294,16 +3303,18 @@ class {}
   type=(input.type)
   name=(input.name)
   value=(input.value)
-  defaultValue=(input.defaultValue)
   required=(input.required)
+  defaultvalue=(input.defaultValue)
 />"
 `;
 
 exports[`Marko > jsx > Typescript Test > RawText 1`] = `
 "class {}
 
-<span class=(input.attributes?.class || input.attributes?.className)
-  >$!{input.text || ''}</span>"
+<span
+  class=(input.attributes?.class || input.attributes?.className)
+  innerhtml=(input.text || '')
+></span>"
 `;
 
 exports[`Marko > jsx > Typescript Test > Section 1`] = `
@@ -3348,8 +3359,8 @@ class {}
   ...(props.attributes)
   value=(input.value)
   key=(Builder.isEditing && input.defaultValue ? input.defaultValue : 'default-key')
-  defaultValue=(input.defaultValue)
   name=(input.name)
+  defaultvalue=(input.defaultValue)
 >
   <for|option,index| of=(input.options)>
     <option value=(option.value) data-index=(index)>
@@ -3457,7 +3468,7 @@ style {
   }
 }
 <div data-user=(state.name)>
-  <button on-click(event => state.showReviewPrompt = true)>
+  <button onclick=(event => state.showReviewPrompt = true)>
     Write a review
   </button>
 
@@ -3470,7 +3481,7 @@ style {
     ></textarea>
     <button
       class=\\"button-c3470f28\\"
-      on-click(event => {
+      onclick=(event => {
   event.preventDefault();
   state.showReviewPrompt = false;
 })
@@ -3510,15 +3521,12 @@ class {
 }
 
 <div
-  contenteditable=(allowEditingText || undefined)
   data-name=({
   test: state.name || 'any name'
 })
->
-  $!{input.text || input.content || state.name || '
-  <p class=\\"text-lg\\">my name</p>
-  '}
-</div>"
+  contenteditable=(allowEditingText || undefined)
+  innerhtml=(input.text || input.content || state.name || '<p class=\\"text-lg\\">my name</p>')
+></div>"
 `;
 
 exports[`Marko > jsx > Typescript Test > Textarea 1`] = `
@@ -3529,7 +3537,7 @@ exports[`Marko > jsx > Typescript Test > Textarea 1`] = `
   placeholder=(input.placeholder)
   name=(input.name)
   value=(input.value)
-  defaultValue=(input.defaultValue)
+  defaultvalue=(input.defaultValue)
 ></textarea>"
 `;
 
@@ -3596,7 +3604,7 @@ style {
     class=\\"input-014e706f\\"
     key=\\"propsInputRef\\"
     value=(state.name)
-    on-input(event => state.name = event.target.value)
+    onchange=(event => state.name = event.target.value)
   />
 </div>"
 `;
@@ -3622,7 +3630,7 @@ style {
     class=\\"input-53a59b24\\"
     key=\\"propsInputRef\\"
     value=(state.name)
-    on-input(event => state.name = event.target.value)
+    onchange=(event => state.name = event.target.value)
   />
 </div>"
 `;
@@ -3654,6 +3662,20 @@ exports[`Marko > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
 <div>Hello! \${state.name}</div>"
 `;
 
+exports[`Marko > jsx > Typescript Test > camelCasedAttributes 1`] = `
+"import React from \\"@builder.io/react\\";
+
+class {
+  onCreate() {
+    this.state = { name: \\"Steve\\" };
+  }
+}
+
+<div>
+  <img srcset=\\"http://example.com\\" />
+</div>"
+`;
+
 exports[`Marko > jsx > Typescript Test > class + ClassName + css 1`] = `
 "class {}
 
@@ -3774,7 +3796,7 @@ exports[`Marko > jsx > Typescript Test > defaultProps 1`] = `
     <button
       type=\\"button\\"
       ...(props.attributes)
-      on-click(event => input.onClick(event))
+      onclick=(event => input.onClick(event))
     >
       \${input.buttonText}
     </button></if>
@@ -3798,7 +3820,7 @@ exports[`Marko > jsx > Typescript Test > defaultPropsOutsideComponent 1`] = `
     <button
       type=\\"button\\"
       ...(props.attributes)
-      on-click(event => input.onClick(event))
+      onclick=(event => input.onClick(event))
     >
       \${input.text}
     </button></if>
@@ -4317,7 +4339,7 @@ style {
     flex-direction: columns;
   }
 }
-<div class=\\"div-c8eb54c0\\" on-click(event => trackClick(input.content.id))>
+<div class=\\"div-c8eb54c0\\" onclick=(event => trackClick(input.content.id))>
   <RenderBlocks blocks=(input.content.blocks)></RenderBlocks>
 </div>"
 `;
@@ -4428,12 +4450,12 @@ exports[`Marko > jsx > Typescript Test > svgComponent 1`] = `
 <svg
   fill=\\"none\\"
   role=\\"img\\"
-  viewBox=('0 0 ' + 42 + ' ' + 42)
   width=(42)
   height=(42)
+  viewbox=('0 0 ' + 42 + ' ' + 42)
 >
   <defs>
-    <filter id=\\"prefix__filter0_f\\" filterUnits=\\"userSpaceOnUse\\">
+    <filter id=\\"prefix__filter0_f\\" filterunits=\\"userSpaceOnUse\\">
       <feFlood result=\\"BackgroundImageFix\\"></feFlood>
 
       <feBlend
@@ -4444,7 +4466,7 @@ exports[`Marko > jsx > Typescript Test > svgComponent 1`] = `
 
       <feGaussianBlur
         result=\\"effect1_foregroundBlur\\"
-        stdDeviation=(7)
+        stddeviation=(7)
       ></feGaussianBlur>
     </filter>
   </defs>
@@ -4511,8 +4533,8 @@ exports[`Marko > svelte > Javascript Test > basic 1`] = `
 
 <div>
   <input
-    on-input(event => state.name = event.target.value)
     value=(state.name)
+    onchange=(event => state.name = event.target.value)
   />
 
   Hello! I can run in React, Vue, Solid, or Liquid!
@@ -4531,19 +4553,19 @@ exports[`Marko > svelte > Javascript Test > bindGroup 1`] = `
     type=\\"radio\\"
     value=\\"Plain\\"
     checked=(state.tortilla === 'Plain')
-    on-input(event => state.tortilla = event.target.value)
+    onchange=(event => state.tortilla = event.target.value)
   />
   <input
     type=\\"radio\\"
     value=\\"Whole wheat\\"
     checked=(state.tortilla === 'Whole wheat')
-    on-input(event => state.tortilla = event.target.value)
+    onchange=(event => state.tortilla = event.target.value)
   />
   <input
     type=\\"radio\\"
     value=\\"Spinach\\"
     checked=(state.tortilla === 'Spinach')
-    on-input(event => state.tortilla = event.target.value)
+    onchange=(event => state.tortilla = event.target.value)
   />
   <br />
   <br />
@@ -4551,25 +4573,25 @@ exports[`Marko > svelte > Javascript Test > bindGroup 1`] = `
     type=\\"checkbox\\"
     value=\\"Rice\\"
     checked=(state.fillings === 'Rice')
-    on-input(event => state.fillings = event.target.value)
+    onchange=(event => state.fillings = event.target.value)
   />
   <input
     type=\\"checkbox\\"
     value=\\"Beans\\"
     checked=(state.fillings === 'Beans')
-    on-input(event => state.fillings = event.target.value)
+    onchange=(event => state.fillings = event.target.value)
   />
   <input
     type=\\"checkbox\\"
     value=\\"Cheese\\"
     checked=(state.fillings === 'Cheese')
-    on-input(event => state.fillings = event.target.value)
+    onchange=(event => state.fillings = event.target.value)
   />
   <input
     type=\\"checkbox\\"
     value=\\"Guac (extra)\\"
     checked=(state.fillings === 'Guac (extra)')
-    on-input(event => state.fillings = event.target.value)
+    onchange=(event => state.fillings = event.target.value)
   />
   <p>Tortilla: \${state.tortilla}</p>
   <p>Fillings: \${state.fillings}</p>
@@ -4630,9 +4652,9 @@ exports[`Marko > svelte > Javascript Test > eventHandlers 1`] = `
 }
 
 <div>
-  <button on-click(a => component.log('hi'))>Log</button>
-  <button on-click(event => component.log(event))>Log</button>
-  <button on-click(event => component.log(event))>Log</button>
+  <button onclick=(a => component.log('hi'))>Log</button>
+  <button onclick=(event => component.log(event))>Log</button>
+  <button onclick=(event => component.log(event))>Log</button>
 </div>"
 `;
 
@@ -4643,7 +4665,7 @@ exports[`Marko > svelte > Javascript Test > html 1`] = `
   }
 }
 
-<div>$!{state.html}</div>"
+<div innerhtml=(state.html)></div>"
 `;
 
 exports[`Marko > svelte > Javascript Test > ifElse 1`] = `
@@ -4658,8 +4680,8 @@ exports[`Marko > svelte > Javascript Test > ifElse 1`] = `
 }
 
 <if(state.show)>
-  <button on-click(event => component.toggle(event))>Hide</button></if>
-<else><button on-click(event => component.toggle(event))>Show</button></else>"
+  <button onclick=(event => component.toggle(event))>Hide</button></if>
+<else><button onclick=(event => component.toggle(event))>Show</button></else>"
 `;
 
 exports[`Marko > svelte > Javascript Test > imports 1`] = `
@@ -4728,13 +4750,13 @@ exports[`Marko > svelte > Javascript Test > reactiveWithFn 1`] = `
 <div>
   <input
     type=\\"number\\"
-    on-input(event => state.a = event.target.value)
     value=(state.a)
+    onchange=(event => state.a = event.target.value)
   />
   <input
     type=\\"number\\"
-    on-input(event => state.b = event.target.value)
     value=(state.b)
+    onchange=(event => state.b = event.target.value)
   />
 
   Result: \${state.result}
@@ -4789,8 +4811,8 @@ exports[`Marko > svelte > Typescript Test > basic 1`] = `
 
 <div>
   <input
-    on-input(event => state.name = event.target.value)
     value=(state.name)
+    onchange=(event => state.name = event.target.value)
   />
 
   Hello! I can run in React, Vue, Solid, or Liquid!
@@ -4809,19 +4831,19 @@ exports[`Marko > svelte > Typescript Test > bindGroup 1`] = `
     type=\\"radio\\"
     value=\\"Plain\\"
     checked=(state.tortilla === 'Plain')
-    on-input(event => state.tortilla = event.target.value)
+    onchange=(event => state.tortilla = event.target.value)
   />
   <input
     type=\\"radio\\"
     value=\\"Whole wheat\\"
     checked=(state.tortilla === 'Whole wheat')
-    on-input(event => state.tortilla = event.target.value)
+    onchange=(event => state.tortilla = event.target.value)
   />
   <input
     type=\\"radio\\"
     value=\\"Spinach\\"
     checked=(state.tortilla === 'Spinach')
-    on-input(event => state.tortilla = event.target.value)
+    onchange=(event => state.tortilla = event.target.value)
   />
   <br />
   <br />
@@ -4829,25 +4851,25 @@ exports[`Marko > svelte > Typescript Test > bindGroup 1`] = `
     type=\\"checkbox\\"
     value=\\"Rice\\"
     checked=(state.fillings === 'Rice')
-    on-input(event => state.fillings = event.target.value)
+    onchange=(event => state.fillings = event.target.value)
   />
   <input
     type=\\"checkbox\\"
     value=\\"Beans\\"
     checked=(state.fillings === 'Beans')
-    on-input(event => state.fillings = event.target.value)
+    onchange=(event => state.fillings = event.target.value)
   />
   <input
     type=\\"checkbox\\"
     value=\\"Cheese\\"
     checked=(state.fillings === 'Cheese')
-    on-input(event => state.fillings = event.target.value)
+    onchange=(event => state.fillings = event.target.value)
   />
   <input
     type=\\"checkbox\\"
     value=\\"Guac (extra)\\"
     checked=(state.fillings === 'Guac (extra)')
-    on-input(event => state.fillings = event.target.value)
+    onchange=(event => state.fillings = event.target.value)
   />
   <p>Tortilla: \${state.tortilla}</p>
   <p>Fillings: \${state.fillings}</p>
@@ -4908,9 +4930,9 @@ exports[`Marko > svelte > Typescript Test > eventHandlers 1`] = `
 }
 
 <div>
-  <button on-click(a => component.log('hi'))>Log</button>
-  <button on-click(event => component.log(event))>Log</button>
-  <button on-click(event => component.log(event))>Log</button>
+  <button onclick=(a => component.log('hi'))>Log</button>
+  <button onclick=(event => component.log(event))>Log</button>
+  <button onclick=(event => component.log(event))>Log</button>
 </div>"
 `;
 
@@ -4921,7 +4943,7 @@ exports[`Marko > svelte > Typescript Test > html 1`] = `
   }
 }
 
-<div>$!{state.html}</div>"
+<div innerhtml=(state.html)></div>"
 `;
 
 exports[`Marko > svelte > Typescript Test > ifElse 1`] = `
@@ -4936,8 +4958,8 @@ exports[`Marko > svelte > Typescript Test > ifElse 1`] = `
 }
 
 <if(state.show)>
-  <button on-click(event => component.toggle(event))>Hide</button></if>
-<else><button on-click(event => component.toggle(event))>Show</button></else>"
+  <button onclick=(event => component.toggle(event))>Hide</button></if>
+<else><button onclick=(event => component.toggle(event))>Show</button></else>"
 `;
 
 exports[`Marko > svelte > Typescript Test > imports 1`] = `
@@ -5006,13 +5028,13 @@ exports[`Marko > svelte > Typescript Test > reactiveWithFn 1`] = `
 <div>
   <input
     type=\\"number\\"
-    on-input(event => state.a = event.target.value)
     value=(state.a)
+    onchange=(event => state.a = event.target.value)
   />
   <input
     type=\\"number\\"
-    on-input(event => state.b = event.target.value)
     value=(state.b)
+    onchange=(event => state.b = event.target.value)
   />
 
   Result: \${state.result}
diff --git a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
index 29e71230fc..2794512ded 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -7158,6 +7158,84 @@ exports[`Parse JSX > boolean attribute 1`] = `
 }
 `;
 
+exports[`Parse JSX > camelCasedAttributes 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "
+      ",
+          },
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "img",
+          "properties": {
+            "srcSet": "http://example.com",
+          },
+          "scope": {},
+        },
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {},
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {
+            "_text": "    
+    ",
+          },
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {},
+  "imports": [
+    {
+      "imports": {
+        "React": "default",
+      },
+      "path": "@builder.io/react",
+    },
+  ],
+  "inputs": [],
+  "meta": {},
+  "name": "MyComponent",
+  "refs": {},
+  "state": {
+    "name": {
+      "code": "\\"Steve\\"",
+      "type": "property",
+    },
+  },
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > class + ClassName + css 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
diff --git a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
index a6a934f7a6..09cc4a769e 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -915,8 +915,8 @@ function FormComponent(props) {
               get(body, props.errorMessagePath);
             if (message) {
               if (typeof message !== \\"string\\") {
-                /* TODO: ideally convert json to yaml so it woul dbe like          error: - email has been taken */ message =
-                  JSON.stringify(message);
+                /* TODO: ideally convert json to yaml so it woul dbe like
+          error: - email has been taken */ message = JSON.stringify(message);
               }
               setFormErrorMessage(message);
             }
@@ -1708,6 +1708,26 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`Preact > jsx > Javascript Test > camelCasedAttributes 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useState } from \\"preact/hooks\\";
+import React from \\"@builder.io/react\\";
+
+function MyComponent(props) {
+  const [name, setName] = useState(() => \\"Steve\\");
+
+  return (
+    <div>
+      <img srcSet=\\"http://example.com\\" />
+    </div>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`Preact > jsx > Javascript Test > class + ClassName + css 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -4115,8 +4135,8 @@ function FormComponent(props: FormProps) {
               get(body, props.errorMessagePath);
             if (message) {
               if (typeof message !== \\"string\\") {
-                /* TODO: ideally convert json to yaml so it woul dbe like          error: - email has been taken */ message =
-                  JSON.stringify(message);
+                /* TODO: ideally convert json to yaml so it woul dbe like
+          error: - email has been taken */ message = JSON.stringify(message);
               }
               setFormErrorMessage(message);
             }
@@ -5058,6 +5078,26 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`Preact > jsx > Typescript Test > camelCasedAttributes 1`] = `
+"/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+import { useState } from \\"preact/hooks\\";
+import React from \\"@builder.io/react\\";
+
+function MyComponent(props: any) {
+  const [name, setName] = useState(() => \\"Steve\\");
+
+  return (
+    <div>
+      <img srcSet=\\"http://example.com\\" />
+    </div>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`Preact > jsx > Typescript Test > class + ClassName + css 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
diff --git a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
index 70e5533235..8862d881e7 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -1185,7 +1185,9 @@ export const MyBasicComponent = component$((props) => {
     <div class=\\"test div-MyBasicComponent\\">
       <input
         value={DEFAULT_VALUES.name || state.name}
-        onChange$={(event) => (state.name = myEvent.target.value)}
+        onchange={(() => {
+          state.name = myEvent.target.value;
+        })()}
       />
       Hello! I can run in React, Vue, Solid, or Liquid!
     </div>
@@ -1203,33 +1205,43 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Javascript Test > Basic 2`] = `
-"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
-
-export const MyBasicForShowComponent = component$((props) => {
-  const state = useStore({ name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] });
-
-  return (
-    <div>
-      {(state.names || []).map(function (person) {
-        return person === state.name ? (
-          <>
-            <input
-              value={state.name}
-              onChange$={(event) => {
-                state.name = event.target.value + \\" and \\" + person;
-              }}
-            />
-            Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid,
-            or Liquid!
-          </>
-        ) : null;
-      })}
-    </div>
-  );
-});
+"Error: SyntaxError: ',' expected. (6:8)
+  4 |
+  5 | return (<div>{(state.names||[]).map(function(person){return(person === state.name?<><input value={state.name} onchange={{
+> 6 |   state.name = event.target.value + ' and ' + person;
+    |        ^
+  7 | }} />
+  8 |             Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid, or Liquid!
+  9 |           </>:null);})}</div>)});
+========================================================================
+import{Fragment,component$,h,useStore}from\\"@builder.io/qwik\\";
+
+export const MyBasicForShowComponent=component$((props)=>{const state=useStore({\\"name\\":'PatrickJS',\\"names\\":['Steve', 'PatrickJS']});
+
+return (<div>{(state.names||[]).map(function(person){return(person === state.name?<><input value={state.name} onchange={{
+  state.name = event.target.value + ' and ' + person;
+}} />
+            Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid, or Liquid!
+          </>:null);})}</div>)});
 
 export default MyBasicForShowComponent;
-"
+
+========================================================================
+    at File.toString (C:/projects/mitosis2/packages/core/src/generators/qwik/src-generator.ts:84:15)
+    at C:/projects/mitosis2/packages/core/src/generators/qwik/component-generator.ts:97:27
+    at getOutput (C:/projects/mitosis2/packages/core/src/__tests__/shared.ts:492:62)
+    at C:/projects/mitosis2/packages/core/src/__tests__/shared.ts:494:28
+    at async runTest (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:417:7)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runFiles (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:646:5)
+    at async startTestsNode (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:664:3)
+    at async C:/projects/mitosis2/packages/core/node_modules/vitest/dist/entry.js:96:11
+    at async Module.withEnv (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:162:5)
+    at async run (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/entry.js:89:7)
+    at async file:///C:/projects/mitosis2/packages/core/node_modules/tinypool/dist/esm/worker.js:109:20"
 `;
 
 exports[`qwik > jsx > Javascript Test > Basic Context 1`] = `
@@ -1267,7 +1279,7 @@ export const MyBasicComponent = component$((props) => {
     <div>
       {myService.method(\\"hello\\") + state.name}
       Hello! I can run in React, Vue, Solid, or Liquid!
-      <input onChange$={(event) => state.onChange} />
+      <input onchange={state.onChange} />
     </div>
   );
 });
@@ -1408,42 +1420,43 @@ export default MyBasicChildComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > BasicFor 1`] = `
-"import {
-  Fragment,
-  component$,
-  h,
-  useClientEffect$,
-  useStore,
-} from \\"@builder.io/qwik\\";
-
-export const MyBasicForComponent = component$((props) => {
-  const state = useStore({ name: \\"PatrickJS\\", names: [\\"Steve\\", \\"PatrickJS\\"] });
-  useClientEffect$(() => {
-    console.log(\\"onMount code\\");
-  });
-
-  return (
-    <div>
-      {(state.names || []).map(function (person) {
-        return (
-          <Fragment>
-            <input
-              value={state.name}
-              onChange$={(event) => {
-                state.name = event.target.value + \\" and \\" + person;
-              }}
-            />
-            Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid,
-            or Liquid!
-          </Fragment>
-        );
-      })}
-    </div>
-  );
-});
+"Error: SyntaxError: ',' expected. (6:8)
+  4 |
+  5 | return (<div>{(state.names||[]).map(function(person){return(<Fragment><input value={state.name} onchange={{
+> 6 |   state.name = event.target.value + ' and ' + person;
+    |        ^
+  7 | }} />
+  8 |             Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid, or Liquid!
+  9 |           </Fragment>);})}</div>)});
+========================================================================
+import{Fragment,component$,h,useClientEffect$,useStore}from\\"@builder.io/qwik\\";
+
+export const MyBasicForComponent=component$((props)=>{const state=useStore({\\"name\\":'PatrickJS',\\"names\\":['Steve', 'PatrickJS']});useClientEffect$(()=>{console.log('onMount code')});
+
+return (<div>{(state.names||[]).map(function(person){return(<Fragment><input value={state.name} onchange={{
+  state.name = event.target.value + ' and ' + person;
+}} />
+            Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid, or Liquid!
+          </Fragment>);})}</div>)});
 
 export default MyBasicForComponent;
-"
+
+========================================================================
+    at File.toString (C:/projects/mitosis2/packages/core/src/generators/qwik/src-generator.ts:84:15)
+    at C:/projects/mitosis2/packages/core/src/generators/qwik/component-generator.ts:97:27
+    at getOutput (C:/projects/mitosis2/packages/core/src/__tests__/shared.ts:492:62)
+    at C:/projects/mitosis2/packages/core/src/__tests__/shared.ts:494:28
+    at async runTest (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:417:7)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runFiles (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:646:5)
+    at async startTestsNode (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:664:3)
+    at async C:/projects/mitosis2/packages/core/node_modules/vitest/dist/entry.js:96:11
+    at async Module.withEnv (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:162:5)
+    at async run (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/entry.js:89:7)
+    at async file:///C:/projects/mitosis2/packages/core/node_modules/tinypool/dist/esm/worker.js:109:20"
 `;
 
 exports[`qwik > jsx > Javascript Test > BasicRef 1`] = `
@@ -1483,8 +1496,10 @@ export const MyBasicRefComponent = component$((props) => {
             class=\\"input-MyBasicRefComponent\\"
             ref={inputRef}
             value={state.name}
-            onBlur$={(event) => state.onBlur()}
-            onChange$={(event) => (state.name = event.target.value)}
+            onblur={state.onBlur()}
+            onchange={(() => {
+              state.name = event.target.value;
+            })()}
           />
           <label htmlFor=\\"cars\\" ref={inputNoArgRef}>
             Choose a car:
@@ -1531,7 +1546,7 @@ export const MyBasicRefAssignmentComponent = component$((props) => {
 
   return (
     <div>
-      <button onClick$={(event) => state.handlerClick(evt)}>Click</button>
+      <button onclick={state.handlerClick(evt)}>Click</button>
     </div>
   );
 });
@@ -1575,7 +1590,13 @@ export const MyPreviousComponent = component$((props) => {
       <h1>
         Now: {state.count}, before: {prevCount}
       </h1>
-      <button onClick$={(event) => (state.count += 1)}>Increment</button>
+      <button
+        onclick={(() => {
+          state.count += 1;
+        })()}
+      >
+        Increment
+      </button>
     </div>
   );
 });
@@ -1724,8 +1745,8 @@ export const ContentSlotJsxCode = component$((props) => {
           name={props.slotContent ? \\"name1\\" : \\"name2\\"}
           title={props.slotContent ? \\"title1\\" : \\"title2\\"}
           {...props.attributes}
-          onClick$={(event) => show(props, state)}
           class={props.slotContent ? \`\${state.name}-content\` : \\"\\"}
+          onclick={show(props, state)}
         >
           {state.showContent && props.slotContent ? (
             <Slot name=\\"content\\">{props.content}</Slot>
@@ -1814,7 +1835,7 @@ export const CustomCode = component$((props) => {
       class={
         \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
       }
-      dangerouslySetInnerHTML={props.code}
+      innerhtml={props.code}
     ></div>
   );
 });
@@ -1891,7 +1912,7 @@ export const CustomCode = component$((props) => {
       class={
         \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
       }
-      dangerouslySetInnerHTML={props.code}
+      innerhtml={props.code}
     ></div>
   );
 });
@@ -2154,8 +2175,8 @@ export const FormComponent = component$((props) => {
       })()}
       method={props.method}
       name={props.name}
-      onSubmit$={(event) => onSubmit(props, state, formRef, event)}
       {...props.attributes}
+      onsubmit={onSubmit(props, state, formRef, event)}
     >
       {props.builderBlock && props.builderBlock.children
         ? (props.builderBlock?.children || []).map(function (block, index) {
@@ -2289,9 +2310,9 @@ export const Image = component$((props) => {
               \\" img-Image\\"
             }
             src={props.image}
-            onLoad$={(event) => setLoaded(props, state, pictureRef)}
             srcset={props.srcset}
             sizes={props.sizes}
+            onload={setLoaded(props, state, pictureRef)}
           />
         ) : null}
         <source srcset={props.srcset} />
@@ -2382,8 +2403,8 @@ export const FormInputComponent = component$((props) => {
       type={props.type}
       name={props.name}
       value={props.value}
-      defaultValue={props.defaultValue}
       required={props.required}
+      defaultvalue={props.defaultValue}
     />
   );
 });
@@ -2399,7 +2420,7 @@ export const RawText = component$((props) => {
   return (
     <span
       class={props.attributes?.class || props.attributes?.className}
-      dangerouslySetInnerHTML={props.text || \\"\\"}
+      innerhtml={props.text || \\"\\"}
     ></span>
   );
 });
@@ -2477,8 +2498,8 @@ export const SelectComponent = component$((props) => {
           ? props.defaultValue
           : \\"default-key\\"
       }
-      defaultValue={props.defaultValue}
       name={props.name}
+      defaultvalue={props.defaultValue}
     >
       {(props.options || []).map(function (option, index) {
         return (
@@ -2580,87 +2601,39 @@ export default SlotCode;
 `;
 
 exports[`qwik > jsx > Javascript Test > Stamped.io 1`] = `
-"import {
-  Fragment,
-  component$,
-  h,
-  useClientEffect$,
-  useStore,
-  useStylesScoped$,
-} from \\"@builder.io/qwik\\";
-
-import { kebabCase, snakeCase } from \\"lodash\\";
-
-export const kebabCaseValue = function kebabCaseValue(props, state) {
-  return kebabCase(\\"testThat\\");
-};
-export const snakeCaseValue = function snakeCaseValue(props, state) {
-  return snakeCase(\\"testThis\\");
-};
-export const SmileReviews = component$((props) => {
-  useStylesScoped$(STYLES);
-
-  const state = useStore({
-    name: \\"test\\",
-    reviews: [],
-    showReviewPrompt: false,
-  });
-  useClientEffect$(() => {
-    fetch(
-      \`https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=\${
-        props.apiKey || \\"pubkey-8bbDq7W6w4sB3OWeM1HUy2s47702hM\\"
-      }&productId=\${props.productId || \\"2410511106127\\"}\`
-    )
-      .then((res) => res.json())
-      .then((data) => {
-        state.reviews = data.data;
-      });
-  });
-
-  return (
-    <div data-user={state.name}>
-      <button onClick$={(event) => (state.showReviewPrompt = true)}>
-        Write a review
-      </button>
-      {state.showReviewPrompt || \\"asdf\\" ? (
-        <>
-          <input placeholder=\\"Email\\" />
-          <input placeholder=\\"Title\\" class=\\"input-SmileReviews\\" />
-          <textarea
-            placeholder=\\"How was your experience?\\"
-            class=\\"textarea-SmileReviews\\"
-          ></textarea>
-          <button
-            preventdefault:click=\\"\\"
-            class=\\"button-SmileReviews\\"
-            onClick$={(event) => {
-              event.preventDefault();
-              state.showReviewPrompt = false;
-            }}
-          >
-            Submit
-          </button>
-        </>
-      ) : null}
-      {(state.reviews || []).map(function (review, index) {
-        return (
-          <div class=\\"review-SmileReviews\\" key={review.id}>
-            <img class=\\"img-SmileReviews\\" src={review.avatar} />
-            <div class={state.showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}>
-              <div>N: {index}</div>
-              <div>{review.author}</div>
-              <div>{review.reviewMessage}</div>
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-});
+"Error: SyntaxError: ',' expected. (16:8)
+  14 |
+  15 | return (<div data-user={state.name}><button onclick={(()=>{state.showReviewPrompt = true})()}>Write a review</button>{state.showReviewPrompt || 'asdf'?<><input placeholder=\\"Email\\" /><input placeholder=\\"Title\\" class=\\"input-SmileReviews\\" /><textarea placeholder=\\"How was your experience?\\" class=\\"textarea-SmileReviews\\"></textarea><button preventdefault:click=\\"\\" class=\\"button-SmileReviews\\" onclick={{
+> 16 |   event.preventDefault();
+     |        ^
+  17 |   state.showReviewPrompt = false;
+  18 | }}>
+  19 |           Submit
+========================================================================
+import{Fragment,component$,h,useClientEffect$,useStore,useStylesScoped$}from\\"@builder.io/qwik\\";
+
+import{kebabCase,snakeCase}from\\"lodash\\";
+
+export const kebabCaseValue=function  kebabCaseValue(props, state) {
+  return kebabCase('testThat');
+};export const snakeCaseValue=function  snakeCaseValue(props, state) {
+  return snakeCase('testThis');
+};export const SmileReviews=component$((props)=>{useStylesScoped$(STYLES);
+
+const state=useStore({\\"name\\":'test',\\"reviews\\":[],\\"showReviewPrompt\\":false});useClientEffect$(()=>{fetch(\`https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=\${props.apiKey || 'pubkey-8bbDq7W6w4sB3OWeM1HUy2s47702hM'}&productId=\${props.productId || '2410511106127'}\`).then(res => res.json()).then(data => {
+    state.reviews = data.data;
+  })});
+
+return (<div data-user={state.name}><button onclick={(()=>{state.showReviewPrompt = true})()}>Write a review</button>{state.showReviewPrompt || 'asdf'?<><input placeholder=\\"Email\\" /><input placeholder=\\"Title\\" class=\\"input-SmileReviews\\" /><textarea placeholder=\\"How was your experience?\\" class=\\"textarea-SmileReviews\\"></textarea><button preventdefault:click=\\"\\" class=\\"button-SmileReviews\\" onclick={{
+  event.preventDefault();
+  state.showReviewPrompt = false;
+}}>
+          Submit
+        </button></>:null}{(state.reviews||[]).map(function(review,index){return(<div class=\\"review-SmileReviews\\" key={review.id}><img class=\\"img-SmileReviews\\" src={review.avatar} /><div class={state.showReviewPrompt ? 'bg-primary' : 'bg-secondary'}><div>N: {index}</div><div>{review.author}</div><div>{review.reviewMessage}</div></div></div>);})}</div>)});
 
 export default SmileReviews;
 
-export const STYLES = \`
+export const STYLES=\`
 .input-SmileReviews {
   display: block;
 }
@@ -2683,8 +2656,25 @@ export const STYLES = \`
   width: 30px;
   margin-right: 10px;
 }
-\`;
-"
+\`
+;
+
+========================================================================
+    at File.toString (C:/projects/mitosis2/packages/core/src/generators/qwik/src-generator.ts:84:15)
+    at C:/projects/mitosis2/packages/core/src/generators/qwik/component-generator.ts:97:27
+    at getOutput (C:/projects/mitosis2/packages/core/src/__tests__/shared.ts:492:62)
+    at C:/projects/mitosis2/packages/core/src/__tests__/shared.ts:494:28
+    at async runTest (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:417:7)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runFiles (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:646:5)
+    at async startTestsNode (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:664:3)
+    at async C:/projects/mitosis2/packages/core/node_modules/vitest/dist/entry.js:96:11
+    at async Module.withEnv (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:162:5)
+    at async run (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/entry.js:89:7)
+    at async file:///C:/projects/mitosis2/packages/core/node_modules/tinypool/dist/esm/worker.js:109:20"
 `;
 
 exports[`qwik > jsx > Javascript Test > Submit 1`] = `
@@ -2712,11 +2702,11 @@ export const Text = component$((props) => {
 
   return (
     <div
-      contentEditable={allowEditingText || undefined}
       data-name={{
         test: state.name || \\"any name\\",
       }}
-      dangerouslySetInnerHTML={
+      contenteditable={allowEditingText || undefined}
+      innerhtml={
         props.text ||
         props.content ||
         state.name ||
@@ -2740,7 +2730,7 @@ export const Textarea = component$((props) => {
       placeholder={props.placeholder}
       name={props.name}
       value={props.value}
-      defaultValue={props.defaultValue}
+      defaultvalue={props.defaultValue}
     ></textarea>
   );
 });
@@ -2824,7 +2814,9 @@ export const MyBasicForwardRefComponent = component$((props) => {
         class=\\"input-MyBasicForwardRefComponent\\"
         ref={props.inputRef}
         value={state.name}
-        onChange$={(event) => (state.name = event.target.value)}
+        onchange={(() => {
+          state.name = event.target.value;
+        })()}
       />
     </div>
   );
@@ -2860,7 +2852,9 @@ export const MyBasicForwardRefComponent = component$((props) => {
         class=\\"input-MyBasicForwardRefComponent\\"
         ref={props.inputRef}
         value={state.name}
-        onChange$={(event) => (state.name = event.target.value)}
+        onchange={(() => {
+          state.name = event.target.value;
+        })()}
       />
     </div>
   );
@@ -2876,6 +2870,25 @@ export const STYLES = \`
 "
 `;
 
+exports[`qwik > jsx > Javascript Test > camelCasedAttributes 1`] = `
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
+
+import React from \\"@builder.io/react\\";
+
+export const MyComponent = component$((props) => {
+  const state = useStore({ name: \\"Steve\\" });
+
+  return (
+    <div>
+      <img srcset=\\"http://example.com\\" />
+    </div>
+  );
+});
+
+export default MyComponent;
+"
+`;
+
 exports[`qwik > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
@@ -3048,7 +3061,7 @@ export const Button = component$((props) => {
         <button
           type=\\"button\\"
           {...props.attributes}
-          onClick$={(event) => props.onClick(event)}
+          onclick={props.onClick(event)}
         >
           {props.buttonText}
         </button>
@@ -3080,7 +3093,7 @@ export const Button = component$((props) => {
         <button
           type=\\"button\\"
           {...props.attributes}
-          onClick$={(event) => props.onClick(event)}
+          onclick={props.onClick(event)}
         >
           {props.text}
         </button>
@@ -3805,10 +3818,7 @@ export const RenderContent = component$((props) => {
   });
 
   return (
-    <div
-      class=\\"div-RenderContent\\"
-      onClick$={(event) => trackClick(props.content.id)}
-    >
+    <div class=\\"div-RenderContent\\" onclick={trackClick(props.content.id)}>
       <RenderBlocks blocks={props.content.blocks}></RenderBlocks>
     </div>
   );
@@ -4006,12 +4016,12 @@ export const SvgComponent = component$((props) => {
     <svg
       fill=\\"none\\"
       role=\\"img\\"
-      viewBox={\\"0 0 \\" + 42 + \\" \\" + 42}
       width={42}
       height={42}
+      viewbox={\\"0 0 \\" + 42 + \\" \\" + 42}
     >
       <defs>
-        <filter id=\\"prefix__filter0_f\\" filterUnits=\\"userSpaceOnUse\\">
+        <filter id=\\"prefix__filter0_f\\" filterunits=\\"userSpaceOnUse\\">
           <feFlood result=\\"BackgroundImageFix\\"></feFlood>
           <feBlend
             in=\\"SourceGraphic\\"
@@ -4020,7 +4030,7 @@ export const SvgComponent = component$((props) => {
           ></feBlend>
           <feGaussianBlur
             result=\\"effect1_foregroundBlur\\"
-            stdDeviation={7}
+            stddeviation={7}
           ></feGaussianBlur>
         </filter>
       </defs>
@@ -4160,7 +4170,9 @@ export const MyBasicComponent = component$((props: MyBasicComponentProps) => {
     <div class=\\"test div-MyBasicComponent\\">
       <input
         value={DEFAULT_VALUES.name || state.name}
-        onChange$={(event) => (state.name = myEvent.target.value)}
+        onchange={(() => {
+          state.name = myEvent.target.value;
+        })()}
       />
       Hello! I can run in React, Vue, Solid, or Liquid!
     </div>
@@ -4178,36 +4190,43 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Typescript Test > Basic 2`] = `
-"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
-
-export const MyBasicForShowComponent = component$((props: any) => {
-  const state = useStore<any>({
-    name: \\"PatrickJS\\",
-    names: [\\"Steve\\", \\"PatrickJS\\"],
-  });
-
-  return (
-    <div>
-      {(state.names || []).map(function (person) {
-        return person === state.name ? (
-          <>
-            <input
-              value={state.name}
-              onChange$={(event) => {
-                state.name = event.target.value + \\" and \\" + person;
-              }}
-            />
-            Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid,
-            or Liquid!
-          </>
-        ) : null;
-      })}
-    </div>
-  );
-});
+"Error: SyntaxError: ',' expected. (6:8)
+  4 |
+  5 | return (<div>{(state.names||[]).map(function(person){return(person === state.name?<><input value={state.name} onchange={{
+> 6 |   state.name = event.target.value + ' and ' + person;
+    |        ^
+  7 | }} />
+  8 |             Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid, or Liquid!
+  9 |           </>:null);})}</div>)});
+========================================================================
+import{Fragment,component$,h,useStore}from\\"@builder.io/qwik\\";
+
+export const MyBasicForShowComponent=component$((props:any)=>{const state=useStore<any>({\\"name\\":'PatrickJS',\\"names\\":['Steve', 'PatrickJS']});
+
+return (<div>{(state.names||[]).map(function(person){return(person === state.name?<><input value={state.name} onchange={{
+  state.name = event.target.value + ' and ' + person;
+}} />
+            Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid, or Liquid!
+          </>:null);})}</div>)});
 
 export default MyBasicForShowComponent;
-"
+
+========================================================================
+    at File.toString (C:/projects/mitosis2/packages/core/src/generators/qwik/src-generator.ts:84:15)
+    at C:/projects/mitosis2/packages/core/src/generators/qwik/component-generator.ts:97:27
+    at getOutput (C:/projects/mitosis2/packages/core/src/__tests__/shared.ts:492:62)
+    at C:/projects/mitosis2/packages/core/src/__tests__/shared.ts:494:28
+    at async runTest (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:417:7)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runFiles (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:646:5)
+    at async startTestsNode (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:664:3)
+    at async C:/projects/mitosis2/packages/core/node_modules/vitest/dist/entry.js:96:11
+    at async Module.withEnv (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:162:5)
+    at async run (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/entry.js:89:7)
+    at async file:///C:/projects/mitosis2/packages/core/node_modules/tinypool/dist/esm/worker.js:109:20"
 `;
 
 exports[`qwik > jsx > Typescript Test > Basic Context 1`] = `
@@ -4245,7 +4264,7 @@ export const MyBasicComponent = component$((props: any) => {
     <div>
       {myService.method(\\"hello\\") + state.name}
       Hello! I can run in React, Vue, Solid, or Liquid!
-      <input onChange$={(event) => state.onChange} />
+      <input onchange={state.onChange} />
     </div>
   );
 });
@@ -4397,45 +4416,43 @@ export default MyBasicChildComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > BasicFor 1`] = `
-"import {
-  Fragment,
-  component$,
-  h,
-  useClientEffect$,
-  useStore,
-} from \\"@builder.io/qwik\\";
-
-export const MyBasicForComponent = component$((props: any) => {
-  const state = useStore<any>({
-    name: \\"PatrickJS\\",
-    names: [\\"Steve\\", \\"PatrickJS\\"],
-  });
-  useClientEffect$(() => {
-    console.log(\\"onMount code\\");
-  });
-
-  return (
-    <div>
-      {(state.names || []).map(function (person) {
-        return (
-          <Fragment>
-            <input
-              value={state.name}
-              onChange$={(event) => {
-                state.name = event.target.value + \\" and \\" + person;
-              }}
-            />
-            Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid,
-            or Liquid!
-          </Fragment>
-        );
-      })}
-    </div>
-  );
-});
+"Error: SyntaxError: ',' expected. (6:8)
+  4 |
+  5 | return (<div>{(state.names||[]).map(function(person){return(<Fragment><input value={state.name} onchange={{
+> 6 |   state.name = event.target.value + ' and ' + person;
+    |        ^
+  7 | }} />
+  8 |             Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid, or Liquid!
+  9 |           </Fragment>);})}</div>)});
+========================================================================
+import{Fragment,component$,h,useClientEffect$,useStore}from\\"@builder.io/qwik\\";
+
+export const MyBasicForComponent=component$((props:any)=>{const state=useStore<any>({\\"name\\":'PatrickJS',\\"names\\":['Steve', 'PatrickJS']});useClientEffect$(()=>{console.log('onMount code')});
+
+return (<div>{(state.names||[]).map(function(person){return(<Fragment><input value={state.name} onchange={{
+  state.name = event.target.value + ' and ' + person;
+}} />
+            Hello {person}! I can run in Qwik, Web Component, React, Vue, Solid, or Liquid!
+          </Fragment>);})}</div>)});
 
 export default MyBasicForComponent;
-"
+
+========================================================================
+    at File.toString (C:/projects/mitosis2/packages/core/src/generators/qwik/src-generator.ts:84:15)
+    at C:/projects/mitosis2/packages/core/src/generators/qwik/component-generator.ts:97:27
+    at getOutput (C:/projects/mitosis2/packages/core/src/__tests__/shared.ts:492:62)
+    at C:/projects/mitosis2/packages/core/src/__tests__/shared.ts:494:28
+    at async runTest (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:417:7)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runFiles (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:646:5)
+    at async startTestsNode (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:664:3)
+    at async C:/projects/mitosis2/packages/core/node_modules/vitest/dist/entry.js:96:11
+    at async Module.withEnv (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:162:5)
+    at async run (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/entry.js:89:7)
+    at async file:///C:/projects/mitosis2/packages/core/node_modules/tinypool/dist/esm/worker.js:109:20"
 `;
 
 exports[`qwik > jsx > Typescript Test > BasicRef 1`] = `
@@ -4478,8 +4495,10 @@ export const MyBasicRefComponent = component$((props: Props) => {
             class=\\"input-MyBasicRefComponent\\"
             ref={inputRef}
             value={state.name}
-            onBlur$={(event) => state.onBlur()}
-            onChange$={(event) => (state.name = event.target.value)}
+            onblur={state.onBlur()}
+            onchange={(() => {
+              state.name = event.target.value;
+            })()}
           />
           <label htmlFor=\\"cars\\" ref={inputNoArgRef}>
             Choose a car:
@@ -4529,7 +4548,7 @@ export const MyBasicRefAssignmentComponent = component$((props: Props) => {
 
   return (
     <div>
-      <button onClick$={(event) => state.handlerClick(evt)}>Click</button>
+      <button onclick={state.handlerClick(evt)}>Click</button>
     </div>
   );
 });
@@ -4576,7 +4595,13 @@ export const MyPreviousComponent = component$((props: Props) => {
       <h1>
         Now: {state.count}, before: {prevCount}
       </h1>
-      <button onClick$={(event) => (state.count += 1)}>Increment</button>
+      <button
+        onclick={(() => {
+          state.count += 1;
+        })()}
+      >
+        Increment
+      </button>
     </div>
   );
 });
@@ -4752,8 +4777,8 @@ export const ContentSlotJsxCode = component$((props: Props) => {
           name={props.slotContent ? \\"name1\\" : \\"name2\\"}
           title={props.slotContent ? \\"title1\\" : \\"title2\\"}
           {...props.attributes}
-          onClick$={(event) => show(props, state)}
           class={props.slotContent ? \`\${state.name}-content\` : \\"\\"}
+          onclick={show(props, state)}
         >
           {state.showContent && props.slotContent ? (
             <Slot name=\\"content\\">{props.content}</Slot>
@@ -4846,7 +4871,7 @@ export const CustomCode = component$((props: CustomCodeProps) => {
       class={
         \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
       }
-      dangerouslySetInnerHTML={props.code}
+      innerhtml={props.code}
     ></div>
   );
 });
@@ -4927,7 +4952,7 @@ export const CustomCode = component$((props: CustomCodeProps) => {
       class={
         \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
       }
-      dangerouslySetInnerHTML={props.code}
+      innerhtml={props.code}
     ></div>
   );
 });
@@ -5223,8 +5248,8 @@ export const FormComponent = component$((props: FormProps) => {
       })()}
       method={props.method}
       name={props.name}
-      onSubmit$={(event) => onSubmit(props, state, formRef, event)}
       {...props.attributes}
+      onsubmit={onSubmit(props, state, formRef, event)}
     >
       {props.builderBlock && props.builderBlock.children
         ? (props.builderBlock?.children || []).map(function (block, index) {
@@ -5376,9 +5401,9 @@ export const Image = component$((props: ImageProps) => {
               \\" img-Image\\"
             }
             src={props.image}
-            onLoad$={(event) => setLoaded(props, state, pictureRef)}
             srcset={props.srcset}
             sizes={props.sizes}
+            onload={setLoaded(props, state, pictureRef)}
           />
         ) : null}
         <source srcset={props.srcset} />
@@ -5494,8 +5519,8 @@ export const FormInputComponent = component$((props: FormInputProps) => {
       type={props.type}
       name={props.name}
       value={props.value}
-      defaultValue={props.defaultValue}
       required={props.required}
+      defaultvalue={props.defaultValue}
     />
   );
 });
@@ -5515,7 +5540,7 @@ export const RawText = component$((props: RawTextProps) => {
   return (
     <span
       class={props.attributes?.class || props.attributes?.className}
-      dangerouslySetInnerHTML={props.text || \\"\\"}
+      innerhtml={props.text || \\"\\"}
     ></span>
   );
 });
@@ -5613,8 +5638,8 @@ export const SelectComponent = component$((props: FormSelectProps) => {
           ? props.defaultValue
           : \\"default-key\\"
       }
-      defaultValue={props.defaultValue}
       name={props.name}
+      defaultvalue={props.defaultValue}
     >
       {(props.options || []).map(function (option, index) {
         return (
@@ -5728,91 +5753,43 @@ export default SlotCode;
 `;
 
 exports[`qwik > jsx > Typescript Test > Stamped.io 1`] = `
-"import {
-  Fragment,
-  component$,
-  h,
-  useClientEffect$,
-  useStore,
-  useStylesScoped$,
-} from \\"@builder.io/qwik\\";
-
-import { kebabCase, snakeCase } from \\"lodash\\";
+"Error: SyntaxError: ',' expected. (20:8)
+  18 |
+  19 | return (<div data-user={state.name}><button onclick={(()=>{state.showReviewPrompt = true})()}>Write a review</button>{state.showReviewPrompt || 'asdf'?<><input placeholder=\\"Email\\" /><input placeholder=\\"Title\\" class=\\"input-SmileReviews\\" /><textarea placeholder=\\"How was your experience?\\" class=\\"textarea-SmileReviews\\"></textarea><button preventdefault:click=\\"\\" class=\\"button-SmileReviews\\" onclick={{
+> 20 |   event.preventDefault();
+     |        ^
+  21 |   state.showReviewPrompt = false;
+  22 | }}>
+  23 |           Submit
+========================================================================
+import{Fragment,component$,h,useClientEffect$,useStore,useStylesScoped$}from\\"@builder.io/qwik\\";
+
+import{kebabCase,snakeCase}from\\"lodash\\";
 
 type SmileReviewsProps = {
   productId: string;
   apiKey: string;
 };
-export const kebabCaseValue = function kebabCaseValue(props, state) {
-  return kebabCase(\\"testThat\\");
-};
-export const snakeCaseValue = function snakeCaseValue(props, state) {
-  return snakeCase(\\"testThis\\");
-};
-export const SmileReviews = component$((props: SmileReviewsProps) => {
-  useStylesScoped$(STYLES);
+export const kebabCaseValue=function kebabCaseValue(props,state,) {
+  return kebabCase('testThat');
+};export const snakeCaseValue=function snakeCaseValue(props,state,) {
+  return snakeCase('testThis');
+};export const SmileReviews=component$((props:SmileReviewsProps)=>{useStylesScoped$(STYLES);
 
-  const state = useStore<any>({
-    name: \\"test\\",
-    reviews: [],
-    showReviewPrompt: false,
-  });
-  useClientEffect$(() => {
-    fetch(
-      \`https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=\${
-        props.apiKey || \\"pubkey-8bbDq7W6w4sB3OWeM1HUy2s47702hM\\"
-      }&productId=\${props.productId || \\"2410511106127\\"}\`
-    )
-      .then((res) => res.json())
-      .then((data) => {
-        state.reviews = data.data;
-      });
-  });
+const state=useStore<any>({\\"name\\":'test',\\"reviews\\":[],\\"showReviewPrompt\\":false});useClientEffect$(()=>{fetch(\`https://stamped.io/api/widget/reviews?storeUrl=builder-io.myshopify.com&apiKey=\${props.apiKey || 'pubkey-8bbDq7W6w4sB3OWeM1HUy2s47702hM'}&productId=\${props.productId || '2410511106127'}\`).then(res => res.json()).then(data => {
+    state.reviews = data.data;
+  })});
 
-  return (
-    <div data-user={state.name}>
-      <button onClick$={(event) => (state.showReviewPrompt = true)}>
-        Write a review
-      </button>
-      {state.showReviewPrompt || \\"asdf\\" ? (
-        <>
-          <input placeholder=\\"Email\\" />
-          <input placeholder=\\"Title\\" class=\\"input-SmileReviews\\" />
-          <textarea
-            placeholder=\\"How was your experience?\\"
-            class=\\"textarea-SmileReviews\\"
-          ></textarea>
-          <button
-            preventdefault:click=\\"\\"
-            class=\\"button-SmileReviews\\"
-            onClick$={(event) => {
-              event.preventDefault();
-              state.showReviewPrompt = false;
-            }}
-          >
-            Submit
-          </button>
-        </>
-      ) : null}
-      {(state.reviews || []).map(function (review, index) {
-        return (
-          <div class=\\"review-SmileReviews\\" key={review.id}>
-            <img class=\\"img-SmileReviews\\" src={review.avatar} />
-            <div class={state.showReviewPrompt ? \\"bg-primary\\" : \\"bg-secondary\\"}>
-              <div>N: {index}</div>
-              <div>{review.author}</div>
-              <div>{review.reviewMessage}</div>
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-});
+return (<div data-user={state.name}><button onclick={(()=>{state.showReviewPrompt = true})()}>Write a review</button>{state.showReviewPrompt || 'asdf'?<><input placeholder=\\"Email\\" /><input placeholder=\\"Title\\" class=\\"input-SmileReviews\\" /><textarea placeholder=\\"How was your experience?\\" class=\\"textarea-SmileReviews\\"></textarea><button preventdefault:click=\\"\\" class=\\"button-SmileReviews\\" onclick={{
+  event.preventDefault();
+  state.showReviewPrompt = false;
+}}>
+          Submit
+        </button></>:null}{(state.reviews||[]).map(function(review,index){return(<div class=\\"review-SmileReviews\\" key={review.id}><img class=\\"img-SmileReviews\\" src={review.avatar} /><div class={state.showReviewPrompt ? 'bg-primary' : 'bg-secondary'}><div>N: {index}</div><div>{review.author}</div><div>{review.reviewMessage}</div></div></div>);})}</div>)});
 
 export default SmileReviews;
 
-export const STYLES = \`
+export const STYLES=\`
 .input-SmileReviews {
   display: block;
 }
@@ -5835,8 +5812,25 @@ export const STYLES = \`
   width: 30px;
   margin-right: 10px;
 }
-\`;
-"
+\`
+;
+
+========================================================================
+    at File.toString (C:/projects/mitosis2/packages/core/src/generators/qwik/src-generator.ts:84:15)
+    at C:/projects/mitosis2/packages/core/src/generators/qwik/component-generator.ts:97:27
+    at getOutput (C:/projects/mitosis2/packages/core/src/__tests__/shared.ts:492:62)
+    at C:/projects/mitosis2/packages/core/src/__tests__/shared.ts:494:28
+    at async runTest (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:417:7)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runSuite (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:512:15)
+    at async runFiles (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:646:5)
+    at async startTestsNode (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:664:3)
+    at async C:/projects/mitosis2/packages/core/node_modules/vitest/dist/entry.js:96:11
+    at async Module.withEnv (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/chunk-runtime-setup.ab6b6274.js:162:5)
+    at async run (C:/projects/mitosis2/packages/core/node_modules/vitest/dist/entry.js:89:7)
+    at async file:///C:/projects/mitosis2/packages/core/node_modules/tinypool/dist/esm/worker.js:109:20"
 `;
 
 exports[`qwik > jsx > Typescript Test > Submit 1`] = `
@@ -5875,11 +5869,11 @@ export const Text = component$((props: TextProps) => {
 
   return (
     <div
-      contentEditable={allowEditingText || undefined}
       data-name={{
         test: state.name || \\"any name\\",
       }}
-      dangerouslySetInnerHTML={
+      contenteditable={allowEditingText || undefined}
+      innerhtml={
         props.text ||
         props.content ||
         state.name ||
@@ -5910,7 +5904,7 @@ export const Textarea = component$((props: TextareaProps) => {
       placeholder={props.placeholder}
       name={props.name}
       value={props.value}
-      defaultValue={props.defaultValue}
+      defaultvalue={props.defaultValue}
     ></textarea>
   );
 });
@@ -6023,7 +6017,9 @@ export const MyBasicForwardRefComponent = component$((props: Props) => {
         class=\\"input-MyBasicForwardRefComponent\\"
         ref={props.inputRef}
         value={state.name}
-        onChange$={(event) => (state.name = event.target.value)}
+        onchange={(() => {
+          state.name = event.target.value;
+        })()}
       />
     </div>
   );
@@ -6063,7 +6059,9 @@ export const MyBasicForwardRefComponent = component$((props: Props) => {
         class=\\"input-MyBasicForwardRefComponent\\"
         ref={props.inputRef}
         value={state.name}
-        onChange$={(event) => (state.name = event.target.value)}
+        onchange={(() => {
+          state.name = event.target.value;
+        })()}
       />
     </div>
   );
@@ -6079,6 +6077,25 @@ export const STYLES = \`
 "
 `;
 
+exports[`qwik > jsx > Typescript Test > camelCasedAttributes 1`] = `
+"import { Fragment, component$, h, useStore } from \\"@builder.io/qwik\\";
+
+import React from \\"@builder.io/react\\";
+
+export const MyComponent = component$((props: any) => {
+  const state = useStore<any>({ name: \\"Steve\\" });
+
+  return (
+    <div>
+      <img srcset=\\"http://example.com\\" />
+    </div>
+  );
+});
+
+export default MyComponent;
+"
+`;
+
 exports[`qwik > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import { Fragment, component$, h, useStylesScoped$ } from \\"@builder.io/qwik\\";
 
@@ -6264,7 +6281,7 @@ export const Button = component$((props: ButtonProps) => {
         <button
           type=\\"button\\"
           {...props.attributes}
-          onClick$={(event) => props.onClick(event)}
+          onclick={props.onClick(event)}
         >
           {props.buttonText}
         </button>
@@ -6303,7 +6320,7 @@ export const Button = component$((props: ButtonProps) => {
         <button
           type=\\"button\\"
           {...props.attributes}
-          onClick$={(event) => props.onClick(event)}
+          onclick={props.onClick(event)}
         >
           {props.text}
         </button>
@@ -7098,10 +7115,7 @@ export const RenderContent = component$((props: Props) => {
   });
 
   return (
-    <div
-      class=\\"div-RenderContent\\"
-      onClick$={(event) => trackClick(props.content.id)}
-    >
+    <div class=\\"div-RenderContent\\" onclick={trackClick(props.content.id)}>
       <RenderBlocks blocks={props.content.blocks}></RenderBlocks>
     </div>
   );
@@ -7312,12 +7326,12 @@ export const SvgComponent = component$((props: any) => {
     <svg
       fill=\\"none\\"
       role=\\"img\\"
-      viewBox={\\"0 0 \\" + 42 + \\" \\" + 42}
       width={42}
       height={42}
+      viewbox={\\"0 0 \\" + 42 + \\" \\" + 42}
     >
       <defs>
-        <filter id=\\"prefix__filter0_f\\" filterUnits=\\"userSpaceOnUse\\">
+        <filter id=\\"prefix__filter0_f\\" filterunits=\\"userSpaceOnUse\\">
           <feFlood result=\\"BackgroundImageFix\\"></feFlood>
           <feBlend
             in=\\"SourceGraphic\\"
@@ -7326,7 +7340,7 @@ export const SvgComponent = component$((props: any) => {
           ></feBlend>
           <feGaussianBlur
             result=\\"effect1_foregroundBlur\\"
-            stdDeviation={7}
+            stddeviation={7}
           ></feGaussianBlur>
         </filter>
       </defs>
@@ -7742,8 +7756,10 @@ export const MyComponent = component$((props) => {
   return (
     <div>
       <input
-        onChange$={(event) => (state.name = event.target.value)}
         value={state.name}
+        onchange={(() => {
+          state.name = event.target.value;
+        })()}
       />
       Hello! I can run in React, Vue, Solid, or Liquid!
     </div>
@@ -7768,7 +7784,9 @@ export const MyComponent = component$((props) => {
         checked={(() => {
           state.tortilla === \\"Plain\\";
         })()}
-        onChange$={(event) => (state.tortilla = event.target.value)}
+        onchange={(() => {
+          state.tortilla = event.target.value;
+        })()}
       />
       <input
         type=\\"radio\\"
@@ -7776,7 +7794,9 @@ export const MyComponent = component$((props) => {
         checked={(() => {
           state.tortilla === \\"Whole wheat\\";
         })()}
-        onChange$={(event) => (state.tortilla = event.target.value)}
+        onchange={(() => {
+          state.tortilla = event.target.value;
+        })()}
       />
       <input
         type=\\"radio\\"
@@ -7784,7 +7804,9 @@ export const MyComponent = component$((props) => {
         checked={(() => {
           state.tortilla === \\"Spinach\\";
         })()}
-        onChange$={(event) => (state.tortilla = event.target.value)}
+        onchange={(() => {
+          state.tortilla = event.target.value;
+        })()}
       />
       <br />
       <br />
@@ -7794,7 +7816,9 @@ export const MyComponent = component$((props) => {
         checked={(() => {
           state.fillings === \\"Rice\\";
         })()}
-        onChange$={(event) => (state.fillings = event.target.value)}
+        onchange={(() => {
+          state.fillings = event.target.value;
+        })()}
       />
       <input
         type=\\"checkbox\\"
@@ -7802,7 +7826,9 @@ export const MyComponent = component$((props) => {
         checked={(() => {
           state.fillings === \\"Beans\\";
         })()}
-        onChange$={(event) => (state.fillings = event.target.value)}
+        onchange={(() => {
+          state.fillings = event.target.value;
+        })()}
       />
       <input
         type=\\"checkbox\\"
@@ -7810,7 +7836,9 @@ export const MyComponent = component$((props) => {
         checked={(() => {
           state.fillings === \\"Cheese\\";
         })()}
-        onChange$={(event) => (state.fillings = event.target.value)}
+        onchange={(() => {
+          state.fillings = event.target.value;
+        })()}
       />
       <input
         type=\\"checkbox\\"
@@ -7818,7 +7846,9 @@ export const MyComponent = component$((props) => {
         checked={(() => {
           state.fillings === \\"Guac (extra)\\";
         })()}
-        onChange$={(event) => (state.fillings = event.target.value)}
+        onchange={(() => {
+          state.fillings = event.target.value;
+        })()}
       />
       <p>Tortilla: {state.tortilla}</p>
       <p>Fillings: {state.fillings}</p>
@@ -7914,9 +7944,9 @@ export const MyComponent = component$((props) => {
 
   return (
     <div>
-      <button onClick$={(event) => state.log(\\"hi\\")}>Log</button>
-      <button onClick$={(event) => state.log(event)}>Log</button>
-      <button onClick$={(event) => state.log(event)}>Log</button>
+      <button onclick={state.log(\\"hi\\")}>Log</button>
+      <button onclick={state.log(event)}>Log</button>
+      <button onclick={state.log(event)}>Log</button>
     </div>
   );
 });
@@ -7931,7 +7961,7 @@ exports[`qwik > svelte > Javascript Test > html 1`] = `
 export const MyComponent = component$((props) => {
   const state = useStore({ html: \\"<b>bold</b>\\" });
 
-  return <div dangerouslySetInnerHTML={state.html}></div>;
+  return <div innerhtml={state.html}></div>;
 });
 
 export default MyComponent;
@@ -7950,9 +7980,9 @@ export const MyComponent = component$((props) => {
   return (
     <>
       {state.show ? (
-        <button onClick$={(event) => state.toggle(event)}> Hide </button>
+        <button onclick={state.toggle(event)}> Hide </button>
       ) : (
-        <button onClick$={(event) => state.toggle(event)}> Show </button>
+        <button onclick={state.toggle(event)}> Show </button>
       )}
     </>
   );
@@ -8052,13 +8082,17 @@ export const MyComponent = component$((props) => {
     <div>
       <input
         type=\\"number\\"
-        onChange$={(event) => (state.a = event.target.value)}
         value={state.a}
+        onchange={(() => {
+          state.a = event.target.value;
+        })()}
       />
       <input
         type=\\"number\\"
-        onChange$={(event) => (state.b = event.target.value)}
         value={state.b}
+        onchange={(() => {
+          state.b = event.target.value;
+        })()}
       />
       Result: {state.result}
     </div>
@@ -8143,8 +8177,10 @@ export const MyComponent = component$((props: any) => {
   return (
     <div>
       <input
-        onChange$={(event) => (state.name = event.target.value)}
         value={state.name}
+        onchange={(() => {
+          state.name = event.target.value;
+        })()}
       />
       Hello! I can run in React, Vue, Solid, or Liquid!
     </div>
@@ -8169,7 +8205,9 @@ export const MyComponent = component$((props: any) => {
         checked={(() => {
           state.tortilla === \\"Plain\\";
         })()}
-        onChange$={(event) => (state.tortilla = event.target.value)}
+        onchange={(() => {
+          state.tortilla = event.target.value;
+        })()}
       />
       <input
         type=\\"radio\\"
@@ -8177,7 +8215,9 @@ export const MyComponent = component$((props: any) => {
         checked={(() => {
           state.tortilla === \\"Whole wheat\\";
         })()}
-        onChange$={(event) => (state.tortilla = event.target.value)}
+        onchange={(() => {
+          state.tortilla = event.target.value;
+        })()}
       />
       <input
         type=\\"radio\\"
@@ -8185,7 +8225,9 @@ export const MyComponent = component$((props: any) => {
         checked={(() => {
           state.tortilla === \\"Spinach\\";
         })()}
-        onChange$={(event) => (state.tortilla = event.target.value)}
+        onchange={(() => {
+          state.tortilla = event.target.value;
+        })()}
       />
       <br />
       <br />
@@ -8195,7 +8237,9 @@ export const MyComponent = component$((props: any) => {
         checked={(() => {
           state.fillings === \\"Rice\\";
         })()}
-        onChange$={(event) => (state.fillings = event.target.value)}
+        onchange={(() => {
+          state.fillings = event.target.value;
+        })()}
       />
       <input
         type=\\"checkbox\\"
@@ -8203,7 +8247,9 @@ export const MyComponent = component$((props: any) => {
         checked={(() => {
           state.fillings === \\"Beans\\";
         })()}
-        onChange$={(event) => (state.fillings = event.target.value)}
+        onchange={(() => {
+          state.fillings = event.target.value;
+        })()}
       />
       <input
         type=\\"checkbox\\"
@@ -8211,7 +8257,9 @@ export const MyComponent = component$((props: any) => {
         checked={(() => {
           state.fillings === \\"Cheese\\";
         })()}
-        onChange$={(event) => (state.fillings = event.target.value)}
+        onchange={(() => {
+          state.fillings = event.target.value;
+        })()}
       />
       <input
         type=\\"checkbox\\"
@@ -8219,7 +8267,9 @@ export const MyComponent = component$((props: any) => {
         checked={(() => {
           state.fillings === \\"Guac (extra)\\";
         })()}
-        onChange$={(event) => (state.fillings = event.target.value)}
+        onchange={(() => {
+          state.fillings = event.target.value;
+        })()}
       />
       <p>Tortilla: {state.tortilla}</p>
       <p>Fillings: {state.fillings}</p>
@@ -8315,9 +8365,9 @@ export const MyComponent = component$((props: any) => {
 
   return (
     <div>
-      <button onClick$={(event) => state.log(\\"hi\\")}>Log</button>
-      <button onClick$={(event) => state.log(event)}>Log</button>
-      <button onClick$={(event) => state.log(event)}>Log</button>
+      <button onclick={state.log(\\"hi\\")}>Log</button>
+      <button onclick={state.log(event)}>Log</button>
+      <button onclick={state.log(event)}>Log</button>
     </div>
   );
 });
@@ -8332,7 +8382,7 @@ exports[`qwik > svelte > Typescript Test > html 1`] = `
 export const MyComponent = component$((props: any) => {
   const state = useStore<any>({ html: \\"<b>bold</b>\\" });
 
-  return <div dangerouslySetInnerHTML={state.html}></div>;
+  return <div innerhtml={state.html}></div>;
 });
 
 export default MyComponent;
@@ -8351,9 +8401,9 @@ export const MyComponent = component$((props: any) => {
   return (
     <>
       {state.show ? (
-        <button onClick$={(event) => state.toggle(event)}> Hide </button>
+        <button onclick={state.toggle(event)}> Hide </button>
       ) : (
-        <button onClick$={(event) => state.toggle(event)}> Show </button>
+        <button onclick={state.toggle(event)}> Show </button>
       )}
     </>
   );
@@ -8453,13 +8503,17 @@ export const MyComponent = component$((props: any) => {
     <div>
       <input
         type=\\"number\\"
-        onChange$={(event) => (state.a = event.target.value)}
         value={state.a}
+        onchange={(() => {
+          state.a = event.target.value;
+        })()}
       />
       <input
         type=\\"number\\"
-        onChange$={(event) => (state.b = event.target.value)}
         value={state.b}
+        onchange={(() => {
+          state.b = event.target.value;
+        })()}
       />
       Result: {state.result}
     </div>
diff --git a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
index a35195207d..ff73e227bb 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -1018,8 +1018,8 @@ function FormComponent(props) {
               get(body, props.errorMessagePath);
             if (message) {
               if (typeof message !== \\"string\\") {
-                /* TODO: ideally convert json to yaml so it woul dbe like          error: - email has been taken */ message =
-                  JSON.stringify(message);
+                /* TODO: ideally convert json to yaml so it woul dbe like
+          error: - email has been taken */ message = JSON.stringify(message);
               }
               setFormErrorMessage(message);
             }
@@ -1910,6 +1910,33 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`React Native > jsx > Javascript Test > camelCasedAttributes 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from \\"react-native\\";
+import { useState } from \\"react\\";
+import React from \\"@builder.io/react\\";
+
+function MyComponent(props) {
+  const [name, setName] = useState(() => \\"Steve\\");
+
+  return (
+    <View>
+      <View srcSet=\\"http://example.com\\" />
+    </View>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`React Native > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -4728,8 +4755,8 @@ function FormComponent(props: FormProps) {
               get(body, props.errorMessagePath);
             if (message) {
               if (typeof message !== \\"string\\") {
-                /* TODO: ideally convert json to yaml so it woul dbe like          error: - email has been taken */ message =
-                  JSON.stringify(message);
+                /* TODO: ideally convert json to yaml so it woul dbe like
+          error: - email has been taken */ message = JSON.stringify(message);
               }
               setFormErrorMessage(message);
             }
@@ -5770,6 +5797,33 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`React Native > jsx > Typescript Test > camelCasedAttributes 1`] = `
+"import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+} from \\"react-native\\";
+import { useState } from \\"react\\";
+import React from \\"@builder.io/react\\";
+
+function MyComponent(props: any) {
+  const [name, setName] = useState(() => \\"Steve\\");
+
+  return (
+    <View>
+      <View srcSet=\\"http://example.com\\" />
+    </View>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`React Native > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import {
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 2d98258949..f3d19a0618 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -893,8 +893,8 @@ function FormComponent(props) {
               get(body, props.errorMessagePath);
             if (message) {
               if (typeof message !== \\"string\\") {
-                /* TODO: ideally convert json to yaml so it woul dbe like          error: - email has been taken */ message =
-                  JSON.stringify(message);
+                /* TODO: ideally convert json to yaml so it woul dbe like
+          error: - email has been taken */ message = JSON.stringify(message);
               }
               setFormErrorMessage(message);
             }
@@ -1666,6 +1666,25 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`React > jsx > Javascript Test > camelCasedAttributes 1`] = `
+"import * as React from \\"react\\";
+import { useState } from \\"react\\";
+import React from \\"@builder.io/react\\";
+
+function MyComponent(props) {
+  const [name, setName] = useState(() => \\"Steve\\");
+
+  return (
+    <div>
+      <img srcSet=\\"http://example.com\\" />
+    </div>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`React > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 
@@ -4004,8 +4023,8 @@ function FormComponent(props: FormProps) {
               get(body, props.errorMessagePath);
             if (message) {
               if (typeof message !== \\"string\\") {
-                /* TODO: ideally convert json to yaml so it woul dbe like          error: - email has been taken */ message =
-                  JSON.stringify(message);
+                /* TODO: ideally convert json to yaml so it woul dbe like
+          error: - email has been taken */ message = JSON.stringify(message);
               }
               setFormErrorMessage(message);
             }
@@ -4927,6 +4946,25 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`React > jsx > Typescript Test > camelCasedAttributes 1`] = `
+"import * as React from \\"react\\";
+import { useState } from \\"react\\";
+import React from \\"@builder.io/react\\";
+
+function MyComponent(props: any) {
+  const [name, setName] = useState(() => \\"Steve\\");
+
+  return (
+    <div>
+      <img srcSet=\\"http://example.com\\" />
+    </div>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`React > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
index 110d15918a..3fb1dbc7eb 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -824,8 +824,8 @@ function FormComponent(props) {
                 get(body, props.errorMessagePath);
               if (message) {
                 if (typeof message !== \\"string\\") {
-                  /* TODO: ideally convert json to yaml so it woul dbe like          error: - email has been taken */ message =
-                    JSON.stringify(message);
+                  /* TODO: ideally convert json to yaml so it woul dbe like
+          error: - email has been taken */ message = JSON.stringify(message);
                 }
                 state.formErrorMessage = message;
               }
@@ -924,7 +924,7 @@ function FormComponent(props) {
         ) : null}{\\" \\"}
         {state.submissionState === \\"error\\" && state.responseData ? (
           <>
-            <pre className=\\"builder-form-error-text pre-170708b2\\">
+            <pre className=\\"builder-form-error-text pre-77e275da\\">
               {\\" \\"}
               {JSON.stringify(state.responseData, null, 2)}{\\" \\"}
             </pre>
@@ -940,7 +940,7 @@ function FormComponent(props) {
           </>
         ) : null}{\\" \\"}
       </form>{\\" \\"}
-      <style>{\`.pre-170708b2 { padding: 10px; color: red; text-align: center; }\`}</style>{\\" \\"}
+      <style>{\`.pre-77e275da { padding: 10px; color: red; text-align: center; }\`}</style>{\\" \\"}
     </>
   );
 }
@@ -1521,6 +1521,26 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`RSC > jsx > Javascript Test > camelCasedAttributes 1`] = `
+"import * as React from \\"react\\";
+import React from \\"@builder.io/react\\";
+
+function MyComponent(props) {
+  const _context = { ...props[\\"_context\\"] };
+
+  const state = { name: \\"Steve\\" };
+
+  return (
+    <div>
+      <img srcSet=\\"http://example.com\\" />
+    </div>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`RSC > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 
@@ -3768,8 +3788,8 @@ function FormComponent(props: FormProps) {
                 get(body, props.errorMessagePath);
               if (message) {
                 if (typeof message !== \\"string\\") {
-                  /* TODO: ideally convert json to yaml so it woul dbe like          error: - email has been taken */ message =
-                    JSON.stringify(message);
+                  /* TODO: ideally convert json to yaml so it woul dbe like
+          error: - email has been taken */ message = JSON.stringify(message);
                 }
                 state.formErrorMessage = message;
               }
@@ -3868,7 +3888,7 @@ function FormComponent(props: FormProps) {
         ) : null}{\\" \\"}
         {state.submissionState === \\"error\\" && state.responseData ? (
           <>
-            <pre className=\\"builder-form-error-text pre-170708b2\\">
+            <pre className=\\"builder-form-error-text pre-77e275da\\">
               {\\" \\"}
               {JSON.stringify(state.responseData, null, 2)}{\\" \\"}
             </pre>
@@ -3884,7 +3904,7 @@ function FormComponent(props: FormProps) {
           </>
         ) : null}{\\" \\"}
       </form>{\\" \\"}
-      <style>{\`.pre-170708b2 { padding: 10px; color: red; text-align: center; }\`}</style>{\\" \\"}
+      <style>{\`.pre-77e275da { padding: 10px; color: red; text-align: center; }\`}</style>{\\" \\"}
     </>
   );
 }
@@ -4615,6 +4635,26 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`RSC > jsx > Typescript Test > camelCasedAttributes 1`] = `
+"import * as React from \\"react\\";
+import React from \\"@builder.io/react\\";
+
+function MyComponent(props: any) {
+  const _context = { ...props[\\"_context\\"] };
+
+  const state = { name: \\"Steve\\" };
+
+  return (
+    <div>
+      <img srcSet=\\"http://example.com\\" />
+    </div>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`RSC > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index 2e34b61702..7aa4874310 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -35,8 +35,8 @@ function MyBasicRefComponent(props) {
             })}
             ref={inputRef}
             value={name()}
-            onBlur={(event) => onBlur()}
-            onInput={(event) => setName(event.target.value)}
+            onblur={(event) => onBlur()}
+            onchange={(event) => setName(event.target.value)}
           />
           <label htmlFor=\\"cars\\" ref={inputNoArgRef}>
             Choose a car:
@@ -88,11 +88,11 @@ function MyBasicRefComponent(props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-593943a4\\"
+              class=\\"input-5f80214c\\"
               ref={inputRef}
               value={name()}
-              onBlur={(event) => onBlur()}
-              onInput={(event) => setName(event.target.value)}
+              onblur={(event) => onBlur()}
+              onchange={(event) => setName(event.target.value)}
             />
             <label htmlFor=\\"cars\\" ref={inputNoArgRef}>
               Choose a car:
@@ -108,7 +108,7 @@ function MyBasicRefComponent(props) {
         Component!
       </div>
       <style jsx>{\`
-        .input-593943a4 {
+        .input-5f80214c {
           color: red;
         }
       \`}</style>
@@ -151,7 +151,7 @@ function MyBasicComponent(props) {
     >
       <input
         value={DEFAULT_VALUES.name || name()}
-        onInput={(myEvent) => setName(myEvent.target.value)}
+        onchange={(myEvent) => setName(myEvent.target.value)}
       />
       Hello! I can run in React, Vue, Solid, or Liquid!
     </div>
@@ -179,7 +179,7 @@ function MyBasicForShowComponent(props) {
             <Show when={person === name()}>
               <input
                 value={name()}
-                onInput={(event) => {
+                onchange={(event) => {
                   setName(event.target.value + \\" and \\" + person);
                 }}
               />
@@ -220,15 +220,15 @@ function MyBasicComponent(props) {
 
   return (
     <>
-      <div class=\\"test div-0de70668\\">
+      <div class=\\"test div-7e871d5a\\">
         <input
           value={DEFAULT_VALUES.name || name()}
-          onInput={(myEvent) => setName(myEvent.target.value)}
+          onchange={(myEvent) => setName(myEvent.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
       <style jsx>{\`
-        .div-0de70668 {
+        .div-7e871d5a {
           padding: 10px;
         }
       \`}</style>
@@ -260,7 +260,7 @@ function MyBasicForShowComponent(props) {
               <Show when={person === name()}>
                 <input
                   value={name()}
-                  onInput={(event) => {
+                  onchange={(event) => {
                     setName(event.target.value + \\" and \\" + person);
                   }}
                 />
@@ -305,7 +305,7 @@ function MyBasicComponent(props) {
       <div>
         {myService.method(\\"hello\\") + name()}
         Hello! I can run in React, Vue, Solid, or Liquid!
-        <input onInput={(event) => onChange} />
+        <input onchange={(event) => onChange} />
       </div>
     </Injector.Provider>
   );
@@ -343,7 +343,7 @@ function MyBasicComponent(props) {
         <div>
           {myService.method(\\"hello\\") + name()}
           Hello! I can run in React, Vue, Solid, or Liquid!
-          <input onInput={(event) => onChange} />
+          <input onchange={(event) => onChange} />
         </div>
       </Injector.Provider>
     </>
@@ -641,7 +641,7 @@ function MyBasicForComponent(props) {
             <>
               <input
                 value={name()}
-                onInput={(event) => {
+                onchange={(event) => {
                   setName(event.target.value + \\" and \\" + person);
                 }}
               />
@@ -684,7 +684,7 @@ function MyBasicForComponent(props) {
               <>
                 <input
                   value={name()}
-                  onInput={(event) => {
+                  onchange={(event) => {
                     setName(event.target.value + \\" and \\" + person);
                   }}
                 />
@@ -734,8 +734,8 @@ function MyBasicRefComponent(props) {
             })}
             ref={inputRef}
             value={name()}
-            onBlur={(event) => onBlur()}
-            onInput={(event) => setName(event.target.value)}
+            onblur={(event) => onBlur()}
+            onchange={(event) => setName(event.target.value)}
           />
           <label htmlFor=\\"cars\\" ref={inputNoArgRef}>
             Choose a car:
@@ -782,11 +782,11 @@ function MyBasicRefComponent(props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-c02ab02c\\"
+              class=\\"input-3209a0a6\\"
               ref={inputRef}
               value={name()}
-              onBlur={(event) => onBlur()}
-              onInput={(event) => setName(event.target.value)}
+              onblur={(event) => onBlur()}
+              onchange={(event) => setName(event.target.value)}
             />
             <label htmlFor=\\"cars\\" ref={inputNoArgRef}>
               Choose a car:
@@ -802,7 +802,7 @@ function MyBasicRefComponent(props) {
         Component!
       </div>
       <style jsx>{\`
-        .input-c02ab02c {
+        .input-3209a0a6 {
           color: red;
         }
       \`}</style>
@@ -826,7 +826,7 @@ function MyBasicRefAssignmentComponent(props) {
 
   return (
     <div>
-      <button onClick={(evt) => handlerClick(evt)}>Click</button>
+      <button onclick={(evt) => handlerClick(evt)}>Click</button>
     </div>
   );
 }
@@ -850,7 +850,7 @@ function MyBasicRefAssignmentComponent(props) {
   return (
     <>
       <div>
-        <button onClick={(evt) => handlerClick(evt)}>Click</button>
+        <button onclick={(evt) => handlerClick(evt)}>Click</button>
       </div>
     </>
   );
@@ -891,7 +891,7 @@ function MyPreviousComponent(props) {
         {count()}, before:
         {prevCount}
       </h1>
-      <button onClick={(event) => setCount(1)}>Increment</button>
+      <button onclick={(event) => setCount(1)}>Increment</button>
     </div>
   );
 }
@@ -934,7 +934,7 @@ function MyPreviousComponent(props) {
           {count()}, before:
           {prevCount}
         </h1>
-        <button onClick={(event) => setCount(1)}>Increment</button>
+        <button onclick={(event) => setCount(1)}>Increment</button>
       </div>
     </>
   );
@@ -1209,7 +1209,7 @@ function ContentSlotJsxCode(props) {
         name={props.slotContent ? \\"name1\\" : \\"name2\\"}
         title={props.slotContent ? \\"title1\\" : \\"title2\\"}
         {...props.attributes}
-        onClick={(event) => show()}
+        onclick={(event) => show()}
       >
         <Show when={showContent() && props.slotContent}>
           <Slot name=\\"content\\">{props.content}</Slot>
@@ -1253,7 +1253,7 @@ function ContentSlotJsxCode(props) {
           name={props.slotContent ? \\"name1\\" : \\"name2\\"}
           title={props.slotContent ? \\"title1\\" : \\"title2\\"}
           {...props.attributes}
-          onClick={(event) => show()}
+          onclick={(event) => show()}
         >
           <Show when={showContent() && props.slotContent}>
             <Slot name=\\"content\\">{props.content}</Slot>
@@ -1334,7 +1334,7 @@ function CustomCode(props) {
         \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
       }
       ref={elem}
-      innerHTML={props.code}
+      innerhtml={props.code}
     ></div>
   );
 }
@@ -1408,7 +1408,7 @@ function CustomCode(props) {
           \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
         }
         ref={elem}
-        innerHTML={props.code}
+        innerhtml={props.code}
       ></div>
     </>
   );
@@ -1480,7 +1480,7 @@ function CustomCode(props) {
         \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
       }
       ref={elem}
-      innerHTML={props.code}
+      innerhtml={props.code}
     ></div>
   );
 }
@@ -1554,7 +1554,7 @@ function CustomCode(props) {
           \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
         }
         ref={elem}
-        innerHTML={props.code}
+        innerhtml={props.code}
       ></div>
     </>
   );
@@ -1809,8 +1809,8 @@ function FormComponent(props) {
       action={!props.sendWithJs && props.action}
       method={props.method}
       name={props.name}
-      onSubmit={(event) => onSubmit(event)}
       {...props.attributes}
+      onsubmit={(event) => onSubmit(event)}
     >
       <Show when={props.builderBlock && props.builderBlock.children}>
         <For each={props.builderBlock?.children}>
@@ -2112,8 +2112,8 @@ function FormComponent(props) {
         action={!props.sendWithJs && props.action}
         method={props.method}
         name={props.name}
-        onSubmit={(event) => onSubmit(event)}
         {...props.attributes}
+        onsubmit={(event) => onSubmit(event)}
       >
         <Show when={props.builderBlock && props.builderBlock.children}>
           <For each={props.builderBlock?.children}>
@@ -2142,7 +2142,7 @@ function FormComponent(props) {
           ></BuilderBlocks>
         </Show>
         <Show when={submissionState() === \\"error\\" && responseData()}>
-          <pre class=\\"builder-form-error-text pre-2d2d05c3\\">
+          <pre class=\\"builder-form-error-text pre-c2bd2800\\">
             {JSON.stringify(responseData(), null, 2)}
           </pre>
         </Show>
@@ -2154,7 +2154,7 @@ function FormComponent(props) {
         </Show>
       </form>
       <style jsx>{\`
-        .pre-2d2d05c3 {
+        .pre-c2bd2800 {
           padding: 10px;
           color: red;
           text-align: center;
@@ -2241,9 +2241,9 @@ function Image(props) {
             alt={props.altText}
             aria-role={props.altText ? \\"presentation\\" : undefined}
             src={props.image}
-            onLoad={(event) => setLoaded()}
             srcset={props.srcset}
             sizes={props.sizes}
+            onload={(event) => setLoaded()}
           />
         </Show>
         <source srcset={props.srcset} />
@@ -2320,14 +2320,14 @@ function Image(props) {
               class={
                 \\"builder-image\\" +
                 (props._class ? \\" \\" + props._class : \\"\\") +
-                \\" img-0a07dada\\"
+                \\" img-37418d7a\\"
               }
               alt={props.altText}
               aria-role={props.altText ? \\"presentation\\" : undefined}
               src={props.image}
-              onLoad={(event) => setLoaded()}
               srcset={props.srcset}
               sizes={props.sizes}
+              onload={(event) => setLoaded()}
             />
           </Show>
           <source srcset={props.srcset} />
@@ -2335,7 +2335,7 @@ function Image(props) {
         {props.children}
       </div>
       <style jsx>{\`
-        .img-0a07dada {
+        .img-37418d7a {
           opacity: 1;
           transition: opacity 0.2s ease-in-out;
           object-fit: cover;
@@ -2474,8 +2474,8 @@ function FormInputComponent(props) {
       type={props.type}
       name={props.name}
       value={props.value}
-      defaultValue={props.defaultValue}
       required={props.required}
+      defaultvalue={props.defaultValue}
     />
   );
 }
@@ -2503,8 +2503,8 @@ function FormInputComponent(props) {
         type={props.type}
         name={props.name}
         value={props.value}
-        defaultValue={props.defaultValue}
         required={props.required}
+        defaultvalue={props.defaultValue}
       />
     </>
   );
@@ -2519,7 +2519,7 @@ exports[`Solid > jsx > Javascript Test > RawText 1`] = `
   return (
     <span
       class={props.attributes?.class || props.attributes?.className}
-      innerHTML={props.text || \\"\\"}
+      innerhtml={props.text || \\"\\"}
     ></span>
   );
 }
@@ -2536,7 +2536,7 @@ function RawText(props) {
     <>
       <span
         class={props.attributes?.class || props.attributes?.className}
-        innerHTML={props.text || \\"\\"}
+        innerhtml={props.text || \\"\\"}
       ></span>
     </>
   );
@@ -2679,8 +2679,8 @@ function SelectComponent(props) {
           ? props.defaultValue
           : \\"default-key\\"
       }
-      defaultValue={props.defaultValue}
       name={props.name}
+      defaultvalue={props.defaultValue}
     >
       <For each={props.options}>
         {(option, _index) => {
@@ -2718,8 +2718,8 @@ function SelectComponent(props) {
             ? props.defaultValue
             : \\"default-key\\"
         }
-        defaultValue={props.defaultValue}
         name={props.name}
+        defaultvalue={props.defaultValue}
       >
         <For each={props.options}>
           {(option, _index) => {
@@ -2917,7 +2917,7 @@ function SmileReviews(props) {
 
   return (
     <div data-user={name()}>
-      <button onClick={(event) => setShowReviewPrompt(true)}>
+      <button onclick={(event) => setShowReviewPrompt(true)}>
         Write a review
       </button>
       <Show when={showReviewPrompt() || \\"asdf\\"}>
@@ -2938,7 +2938,7 @@ function SmileReviews(props) {
           class={css({
             display: \\"block\\",
           })}
-          onClick={(event) => {
+          onclick={(event) => {
             event.preventDefault();
             setShowReviewPrompt(false);
           }}
@@ -3027,19 +3027,19 @@ function SmileReviews(props) {
   return (
     <>
       <div data-user={name()}>
-        <button onClick={(event) => setShowReviewPrompt(true)}>
+        <button onclick={(event) => setShowReviewPrompt(true)}>
           Write a review
         </button>
         <Show when={showReviewPrompt() || \\"asdf\\"}>
           <input placeholder=\\"Email\\" />
-          <input class=\\"input-4bfe25f8\\" placeholder=\\"Title\\" />
+          <input class=\\"input-2c0c2d58\\" placeholder=\\"Title\\" />
           <textarea
-            class=\\"textarea-4bfe25f8\\"
+            class=\\"textarea-2c0c2d58\\"
             placeholder=\\"How was your experience?\\"
           ></textarea>
           <button
-            class=\\"button-4bfe25f8\\"
-            onClick={(event) => {
+            class=\\"button-2c0c2d58\\"
+            onclick={(event) => {
               event.preventDefault();
               setShowReviewPrompt(false);
             }}
@@ -3051,8 +3051,8 @@ function SmileReviews(props) {
           {(review, _index) => {
             const index = _index();
             return (
-              <div class=\\"div-4bfe25f8\\" key={review.id}>
-                <img class=\\"img-4bfe25f8\\" src={review.avatar} />
+              <div class=\\"div-2c0c2d58\\" key={review.id}>
+                <img class=\\"img-2c0c2d58\\" src={review.avatar} />
                 <div class={showReviewPrompt() ? \\"bg-primary\\" : \\"bg-secondary\\"}>
                   <div>
                     N:
@@ -3067,16 +3067,16 @@ function SmileReviews(props) {
         </For>
       </div>
       <style jsx>{\`
-        .input-4bfe25f8 {
+        .input-2c0c2d58 {
           display: block;
         }
-        .textarea-4bfe25f8 {
+        .textarea-2c0c2d58 {
           display: block;
         }
-        .button-4bfe25f8 {
+        .button-2c0c2d58 {
           display: block;
         }
-        .div-4bfe25f8 {
+        .div-2c0c2d58 {
           margin: 10px;
           padding: 10px;
           background: white;
@@ -3084,7 +3084,7 @@ function SmileReviews(props) {
           border-radius: 5px;
           box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         }
-        .img-4bfe25f8 {
+        .img-2c0c2d58 {
           height: 30px;
           width: 30px;
           margin-right: 10px;
@@ -3138,11 +3138,11 @@ function Text(props) {
 
   return (
     <div
-      contentEditable={allowEditingText || undefined}
       data-name={{
         test: name() || \\"any name\\",
       }}
-      innerHTML={
+      contenteditable={allowEditingText || undefined}
+      innerhtml={
         props.text ||
         props.content ||
         name() ||
@@ -3169,11 +3169,11 @@ function Text(props) {
   return (
     <>
       <div
-        contentEditable={allowEditingText || undefined}
         data-name={{
           test: name() || \\"any name\\",
         }}
-        innerHTML={
+        contenteditable={allowEditingText || undefined}
+        innerhtml={
           props.text ||
           props.content ||
           name() ||
@@ -3196,7 +3196,7 @@ exports[`Solid > jsx > Javascript Test > Textarea 1`] = `
       placeholder={props.placeholder}
       name={props.name}
       value={props.value}
-      defaultValue={props.defaultValue}
+      defaultvalue={props.defaultValue}
     ></textarea>
   );
 }
@@ -3216,7 +3216,7 @@ function Textarea(props) {
         placeholder={props.placeholder}
         name={props.name}
         value={props.value}
-        defaultValue={props.defaultValue}
+        defaultvalue={props.defaultValue}
       ></textarea>
     </>
   );
@@ -3422,6 +3422,48 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`Solid > jsx > Javascript Test > camelCasedAttributes 1`] = `
+"import { createSignal } from \\"solid-js\\";
+
+import React from \\"@builder.io/react\\";
+
+function MyComponent(props) {
+  const [name, setName] = createSignal(\\"Steve\\");
+
+  return (
+    <div>
+      <img srcset=\\"http://example.com\\" />
+    </div>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Solid > jsx > Javascript Test > camelCasedAttributes 2`] = `
+"import { createSignal } from \\"solid-js\\";
+
+import { css } from \\"solid-styled-components\\";
+
+import React from \\"@builder.io/react\\";
+
+function MyComponent(props) {
+  const [name, setName] = createSignal(\\"Steve\\");
+
+  return (
+    <>
+      <div>
+        <img srcset=\\"http://example.com\\" />
+      </div>
+    </>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`Solid > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import { css } from \\"solid-styled-components\\";
 
@@ -3873,7 +3915,7 @@ function Button(props) {
         <button
           type=\\"button\\"
           {...props.attributes}
-          onClick={(event) => props.onClick(event)}
+          onclick={(event) => props.onClick(event)}
         >
           {props.buttonText}
         </button>
@@ -3908,7 +3950,7 @@ function Button(props) {
           <button
             type=\\"button\\"
             {...props.attributes}
-            onClick={(event) => props.onClick(event)}
+            onclick={(event) => props.onClick(event)}
           >
             {props.buttonText}
           </button>
@@ -3941,7 +3983,7 @@ function Button(props) {
         <button
           type=\\"button\\"
           {...props.attributes}
-          onClick={(event) => props.onClick(event)}
+          onclick={(event) => props.onClick(event)}
         >
           {props.text}
         </button>
@@ -3976,7 +4018,7 @@ function Button(props) {
           <button
             type=\\"button\\"
             {...props.attributes}
-            onClick={(event) => props.onClick(event)}
+            onclick={(event) => props.onClick(event)}
           >
             {props.text}
           </button>
@@ -5367,7 +5409,7 @@ function RenderContent(props) {
           display: \\"flex\\",
           flexDirection: \\"columns\\",
         })}
-        onClick={(event) => trackClick(props.content.id)}
+        onclick={(event) => trackClick(props.content.id)}
       >
         <RenderBlocks blocks={props.content.blocks}></RenderBlocks>
       </div>
@@ -5416,14 +5458,14 @@ function RenderContent(props) {
         }}
       >
         <div
-          class=\\"div-aeca8ad0\\"
-          onClick={(event) => trackClick(props.content.id)}
+          class=\\"div-2344f438\\"
+          onclick={(event) => trackClick(props.content.id)}
         >
           <RenderBlocks blocks={props.content.blocks}></RenderBlocks>
         </div>
       </BuilderContext.Provider>
       <style jsx>{\`
-        .div-aeca8ad0 {
+        .div-2344f438 {
           display: flex;
           flex-direction: columns;
         }
@@ -5818,12 +5860,12 @@ exports[`Solid > jsx > Javascript Test > svgComponent 1`] = `
     <svg
       fill=\\"none\\"
       role=\\"img\\"
-      viewBox={\\"0 0 \\" + 42 + \\" \\" + 42}
       width={42}
       height={42}
+      viewbox={\\"0 0 \\" + 42 + \\" \\" + 42}
     >
       <defs>
-        <filter id=\\"prefix__filter0_f\\" filterUnits=\\"userSpaceOnUse\\">
+        <filter id=\\"prefix__filter0_f\\" filterunits=\\"userSpaceOnUse\\">
           <feFlood result=\\"BackgroundImageFix\\"></feFlood>
           <feBlend
             in=\\"SourceGraphic\\"
@@ -5832,7 +5874,7 @@ exports[`Solid > jsx > Javascript Test > svgComponent 1`] = `
           ></feBlend>
           <feGaussianBlur
             result=\\"effect1_foregroundBlur\\"
-            stdDeviation={7}
+            stddeviation={7}
           ></feGaussianBlur>
         </filter>
       </defs>
@@ -5853,12 +5895,12 @@ function SvgComponent(props) {
       <svg
         fill=\\"none\\"
         role=\\"img\\"
-        viewBox={\\"0 0 \\" + 42 + \\" \\" + 42}
         width={42}
         height={42}
+        viewbox={\\"0 0 \\" + 42 + \\" \\" + 42}
       >
         <defs>
-          <filter id=\\"prefix__filter0_f\\" filterUnits=\\"userSpaceOnUse\\">
+          <filter id=\\"prefix__filter0_f\\" filterunits=\\"userSpaceOnUse\\">
             <feFlood result=\\"BackgroundImageFix\\"></feFlood>
             <feBlend
               in=\\"SourceGraphic\\"
@@ -5867,7 +5909,7 @@ function SvgComponent(props) {
             ></feBlend>
             <feGaussianBlur
               result=\\"effect1_foregroundBlur\\"
-              stdDeviation={7}
+              stddeviation={7}
             ></feGaussianBlur>
           </filter>
         </defs>
@@ -6099,8 +6141,8 @@ function MyBasicRefComponent(props: Props) {
             })}
             ref={inputRef!}
             value={name()}
-            onBlur={(event) => onBlur()}
-            onInput={(event) => setName(event.target.value)}
+            onblur={(event) => onBlur()}
+            onchange={(event) => setName(event.target.value)}
           />
           <label htmlFor=\\"cars\\" ref={inputNoArgRef!}>
             Choose a car:
@@ -6155,11 +6197,11 @@ function MyBasicRefComponent(props: Props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-593943a4\\"
+              class=\\"input-5f80214c\\"
               ref={inputRef!}
               value={name()}
-              onBlur={(event) => onBlur()}
-              onInput={(event) => setName(event.target.value)}
+              onblur={(event) => onBlur()}
+              onchange={(event) => setName(event.target.value)}
             />
             <label htmlFor=\\"cars\\" ref={inputNoArgRef!}>
               Choose a car:
@@ -6175,7 +6217,7 @@ function MyBasicRefComponent(props: Props) {
         Component!
       </div>
       <style jsx>{\`
-        .input-593943a4 {
+        .input-5f80214c {
           color: red;
         }
       \`}</style>
@@ -6221,7 +6263,7 @@ function MyBasicComponent(props: MyBasicComponentProps) {
     >
       <input
         value={DEFAULT_VALUES.name || name()}
-        onInput={(myEvent) => setName(myEvent.target.value)}
+        onchange={(myEvent) => setName(myEvent.target.value)}
       />
       Hello! I can run in React, Vue, Solid, or Liquid!
     </div>
@@ -6249,7 +6291,7 @@ function MyBasicForShowComponent(props: any) {
             <Show when={person === name()}>
               <input
                 value={name()}
-                onInput={(event) => {
+                onchange={(event) => {
                   setName(event.target.value + \\" and \\" + person);
                 }}
               />
@@ -6293,15 +6335,15 @@ function MyBasicComponent(props: MyBasicComponentProps) {
 
   return (
     <>
-      <div class=\\"test div-0de70668\\">
+      <div class=\\"test div-7e871d5a\\">
         <input
           value={DEFAULT_VALUES.name || name()}
-          onInput={(myEvent) => setName(myEvent.target.value)}
+          onchange={(myEvent) => setName(myEvent.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
       <style jsx>{\`
-        .div-0de70668 {
+        .div-7e871d5a {
           padding: 10px;
         }
       \`}</style>
@@ -6333,7 +6375,7 @@ function MyBasicForShowComponent(props: any) {
               <Show when={person === name()}>
                 <input
                   value={name()}
-                  onInput={(event) => {
+                  onchange={(event) => {
                     setName(event.target.value + \\" and \\" + person);
                   }}
                 />
@@ -6378,7 +6420,7 @@ function MyBasicComponent(props: any) {
       <div>
         {myService.method(\\"hello\\") + name()}
         Hello! I can run in React, Vue, Solid, or Liquid!
-        <input onInput={(event) => onChange} />
+        <input onchange={(event) => onChange} />
       </div>
     </Injector.Provider>
   );
@@ -6416,7 +6458,7 @@ function MyBasicComponent(props: any) {
         <div>
           {myService.method(\\"hello\\") + name()}
           Hello! I can run in React, Vue, Solid, or Liquid!
-          <input onInput={(event) => onChange} />
+          <input onchange={(event) => onChange} />
         </div>
       </Injector.Provider>
     </>
@@ -6732,7 +6774,7 @@ function MyBasicForComponent(props: any) {
             <>
               <input
                 value={name()}
-                onInput={(event) => {
+                onchange={(event) => {
                   setName(event.target.value + \\" and \\" + person);
                 }}
               />
@@ -6775,7 +6817,7 @@ function MyBasicForComponent(props: any) {
               <>
                 <input
                   value={name()}
-                  onInput={(event) => {
+                  onchange={(event) => {
                     setName(event.target.value + \\" and \\" + person);
                   }}
                 />
@@ -6828,8 +6870,8 @@ function MyBasicRefComponent(props: Props) {
             })}
             ref={inputRef!}
             value={name()}
-            onBlur={(event) => onBlur()}
-            onInput={(event) => setName(event.target.value)}
+            onblur={(event) => onBlur()}
+            onchange={(event) => setName(event.target.value)}
           />
           <label htmlFor=\\"cars\\" ref={inputNoArgRef!}>
             Choose a car:
@@ -6879,11 +6921,11 @@ function MyBasicRefComponent(props: Props) {
         <Show when={props.showInput}>
           <>
             <input
-              class=\\"input-c02ab02c\\"
+              class=\\"input-3209a0a6\\"
               ref={inputRef!}
               value={name()}
-              onBlur={(event) => onBlur()}
-              onInput={(event) => setName(event.target.value)}
+              onblur={(event) => onBlur()}
+              onchange={(event) => setName(event.target.value)}
             />
             <label htmlFor=\\"cars\\" ref={inputNoArgRef!}>
               Choose a car:
@@ -6899,7 +6941,7 @@ function MyBasicRefComponent(props: Props) {
         Component!
       </div>
       <style jsx>{\`
-        .input-c02ab02c {
+        .input-3209a0a6 {
           color: red;
         }
       \`}</style>
@@ -6927,7 +6969,7 @@ function MyBasicRefAssignmentComponent(props: Props) {
 
   return (
     <div>
-      <button onClick={(evt) => handlerClick(evt)}>Click</button>
+      <button onclick={(evt) => handlerClick(evt)}>Click</button>
     </div>
   );
 }
@@ -6954,7 +6996,7 @@ function MyBasicRefAssignmentComponent(props: Props) {
   return (
     <>
       <div>
-        <button onClick={(evt) => handlerClick(evt)}>Click</button>
+        <button onclick={(evt) => handlerClick(evt)}>Click</button>
       </div>
     </>
   );
@@ -6999,7 +7041,7 @@ function MyPreviousComponent(props: Props) {
         {count()}, before:
         {prevCount}
       </h1>
-      <button onClick={(event) => setCount(1)}>Increment</button>
+      <button onclick={(event) => setCount(1)}>Increment</button>
     </div>
   );
 }
@@ -7045,7 +7087,7 @@ function MyPreviousComponent(props: Props) {
           {count()}, before:
           {prevCount}
         </h1>
-        <button onClick={(event) => setCount(1)}>Increment</button>
+        <button onclick={(event) => setCount(1)}>Increment</button>
       </div>
     </>
   );
@@ -7374,7 +7416,7 @@ function ContentSlotJsxCode(props: Props) {
         name={props.slotContent ? \\"name1\\" : \\"name2\\"}
         title={props.slotContent ? \\"title1\\" : \\"title2\\"}
         {...props.attributes}
-        onClick={(event) => show()}
+        onclick={(event) => show()}
       >
         <Show when={showContent() && props.slotContent}>
           <Slot name=\\"content\\">{props.content}</Slot>
@@ -7421,7 +7463,7 @@ function ContentSlotJsxCode(props: Props) {
           name={props.slotContent ? \\"name1\\" : \\"name2\\"}
           title={props.slotContent ? \\"title1\\" : \\"title2\\"}
           {...props.attributes}
-          onClick={(event) => show()}
+          onclick={(event) => show()}
         >
           <Show when={showContent() && props.slotContent}>
             <Slot name=\\"content\\">{props.content}</Slot>
@@ -7507,7 +7549,7 @@ function CustomCode(props: CustomCodeProps) {
         \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
       }
       ref={elem!}
-      innerHTML={props.code}
+      innerhtml={props.code}
     ></div>
   );
 }
@@ -7585,7 +7627,7 @@ function CustomCode(props: CustomCodeProps) {
           \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
         }
         ref={elem!}
-        innerHTML={props.code}
+        innerhtml={props.code}
       ></div>
     </>
   );
@@ -7662,7 +7704,7 @@ function CustomCode(props: CustomCodeProps) {
         \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
       }
       ref={elem!}
-      innerHTML={props.code}
+      innerhtml={props.code}
     ></div>
   );
 }
@@ -7740,7 +7782,7 @@ function CustomCode(props: CustomCodeProps) {
           \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
         }
         ref={elem!}
-        innerHTML={props.code}
+        innerhtml={props.code}
       ></div>
     </>
   );
@@ -8018,8 +8060,8 @@ function FormComponent(props: FormProps) {
       action={!props.sendWithJs && props.action}
       method={props.method}
       name={props.name}
-      onSubmit={(event) => onSubmit(event)}
       {...props.attributes}
+      onsubmit={(event) => onSubmit(event)}
     >
       <Show when={props.builderBlock && props.builderBlock.children}>
         <For each={props.builderBlock?.children}>
@@ -8344,8 +8386,8 @@ function FormComponent(props: FormProps) {
         action={!props.sendWithJs && props.action}
         method={props.method}
         name={props.name}
-        onSubmit={(event) => onSubmit(event)}
         {...props.attributes}
+        onsubmit={(event) => onSubmit(event)}
       >
         <Show when={props.builderBlock && props.builderBlock.children}>
           <For each={props.builderBlock?.children}>
@@ -8374,7 +8416,7 @@ function FormComponent(props: FormProps) {
           ></BuilderBlocks>
         </Show>
         <Show when={submissionState() === \\"error\\" && responseData()}>
-          <pre class=\\"builder-form-error-text pre-2d2d05c3\\">
+          <pre class=\\"builder-form-error-text pre-c2bd2800\\">
             {JSON.stringify(responseData(), null, 2)}
           </pre>
         </Show>
@@ -8386,7 +8428,7 @@ function FormComponent(props: FormProps) {
         </Show>
       </form>
       <style jsx>{\`
-        .pre-2d2d05c3 {
+        .pre-c2bd2800 {
           padding: 10px;
           color: red;
           text-align: center;
@@ -8491,9 +8533,9 @@ function Image(props: ImageProps) {
             alt={props.altText}
             aria-role={props.altText ? \\"presentation\\" : undefined}
             src={props.image}
-            onLoad={(event) => setLoaded()}
             srcset={props.srcset}
             sizes={props.sizes}
+            onload={(event) => setLoaded()}
           />
         </Show>
         <source srcset={props.srcset} />
@@ -8588,14 +8630,14 @@ function Image(props: ImageProps) {
               class={
                 \\"builder-image\\" +
                 (props._class ? \\" \\" + props._class : \\"\\") +
-                \\" img-0a07dada\\"
+                \\" img-37418d7a\\"
               }
               alt={props.altText}
               aria-role={props.altText ? \\"presentation\\" : undefined}
               src={props.image}
-              onLoad={(event) => setLoaded()}
               srcset={props.srcset}
               sizes={props.sizes}
+              onload={(event) => setLoaded()}
             />
           </Show>
           <source srcset={props.srcset} />
@@ -8603,7 +8645,7 @@ function Image(props: ImageProps) {
         {props.children}
       </div>
       <style jsx>{\`
-        .img-0a07dada {
+        .img-37418d7a {
           opacity: 1;
           transition: opacity 0.2s ease-in-out;
           object-fit: cover;
@@ -8785,8 +8827,8 @@ function FormInputComponent(props: FormInputProps) {
       type={props.type}
       name={props.name}
       value={props.value}
-      defaultValue={props.defaultValue}
       required={props.required}
+      defaultvalue={props.defaultValue}
     />
   );
 }
@@ -8823,8 +8865,8 @@ function FormInputComponent(props: FormInputProps) {
         type={props.type}
         name={props.name}
         value={props.value}
-        defaultValue={props.defaultValue}
         required={props.required}
+        defaultvalue={props.defaultValue}
       />
     </>
   );
@@ -8844,7 +8886,7 @@ function RawText(props: RawTextProps) {
   return (
     <span
       class={props.attributes?.class || props.attributes?.className}
-      innerHTML={props.text || \\"\\"}
+      innerhtml={props.text || \\"\\"}
     ></span>
   );
 }
@@ -8865,7 +8907,7 @@ function RawText(props: RawTextProps) {
     <>
       <span
         class={props.attributes?.class || props.attributes?.className}
-        innerHTML={props.text || \\"\\"}
+        innerhtml={props.text || \\"\\"}
       ></span>
     </>
   );
@@ -9041,8 +9083,8 @@ function SelectComponent(props: FormSelectProps) {
           ? props.defaultValue
           : \\"default-key\\"
       }
-      defaultValue={props.defaultValue}
       name={props.name}
+      defaultvalue={props.defaultValue}
     >
       <For each={props.options}>
         {(option, _index) => {
@@ -9090,8 +9132,8 @@ function SelectComponent(props: FormSelectProps) {
             ? props.defaultValue
             : \\"default-key\\"
         }
-        defaultValue={props.defaultValue}
         name={props.name}
+        defaultvalue={props.defaultValue}
       >
         <For each={props.options}>
           {(option, _index) => {
@@ -9321,7 +9363,7 @@ function SmileReviews(props: SmileReviewsProps) {
 
   return (
     <div data-user={name()}>
-      <button onClick={(event) => setShowReviewPrompt(true)}>
+      <button onclick={(event) => setShowReviewPrompt(true)}>
         Write a review
       </button>
       <Show when={showReviewPrompt() || \\"asdf\\"}>
@@ -9342,7 +9384,7 @@ function SmileReviews(props: SmileReviewsProps) {
           class={css({
             display: \\"block\\",
           })}
-          onClick={(event) => {
+          onclick={(event) => {
             event.preventDefault();
             setShowReviewPrompt(false);
           }}
@@ -9435,19 +9477,19 @@ function SmileReviews(props: SmileReviewsProps) {
   return (
     <>
       <div data-user={name()}>
-        <button onClick={(event) => setShowReviewPrompt(true)}>
+        <button onclick={(event) => setShowReviewPrompt(true)}>
           Write a review
         </button>
         <Show when={showReviewPrompt() || \\"asdf\\"}>
           <input placeholder=\\"Email\\" />
-          <input class=\\"input-4bfe25f8\\" placeholder=\\"Title\\" />
+          <input class=\\"input-2c0c2d58\\" placeholder=\\"Title\\" />
           <textarea
-            class=\\"textarea-4bfe25f8\\"
+            class=\\"textarea-2c0c2d58\\"
             placeholder=\\"How was your experience?\\"
           ></textarea>
           <button
-            class=\\"button-4bfe25f8\\"
-            onClick={(event) => {
+            class=\\"button-2c0c2d58\\"
+            onclick={(event) => {
               event.preventDefault();
               setShowReviewPrompt(false);
             }}
@@ -9459,8 +9501,8 @@ function SmileReviews(props: SmileReviewsProps) {
           {(review, _index) => {
             const index = _index();
             return (
-              <div class=\\"div-4bfe25f8\\" key={review.id}>
-                <img class=\\"img-4bfe25f8\\" src={review.avatar} />
+              <div class=\\"div-2c0c2d58\\" key={review.id}>
+                <img class=\\"img-2c0c2d58\\" src={review.avatar} />
                 <div class={showReviewPrompt() ? \\"bg-primary\\" : \\"bg-secondary\\"}>
                   <div>
                     N:
@@ -9475,16 +9517,16 @@ function SmileReviews(props: SmileReviewsProps) {
         </For>
       </div>
       <style jsx>{\`
-        .input-4bfe25f8 {
+        .input-2c0c2d58 {
           display: block;
         }
-        .textarea-4bfe25f8 {
+        .textarea-2c0c2d58 {
           display: block;
         }
-        .button-4bfe25f8 {
+        .button-2c0c2d58 {
           display: block;
         }
-        .div-4bfe25f8 {
+        .div-2c0c2d58 {
           margin: 10px;
           padding: 10px;
           background: white;
@@ -9492,7 +9534,7 @@ function SmileReviews(props: SmileReviewsProps) {
           border-radius: 5px;
           box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
         }
-        .img-4bfe25f8 {
+        .img-2c0c2d58 {
           height: 30px;
           width: 30px;
           margin-right: 10px;
@@ -9563,11 +9605,11 @@ function Text(props: TextProps) {
 
   return (
     <div
-      contentEditable={allowEditingText || undefined}
       data-name={{
         test: name() || \\"any name\\",
       }}
-      innerHTML={
+      contenteditable={allowEditingText || undefined}
+      innerhtml={
         props.text ||
         props.content ||
         name() ||
@@ -9601,11 +9643,11 @@ function Text(props: TextProps) {
   return (
     <>
       <div
-        contentEditable={allowEditingText || undefined}
         data-name={{
           test: name() || \\"any name\\",
         }}
-        innerHTML={
+        contenteditable={allowEditingText || undefined}
+        innerhtml={
           props.text ||
           props.content ||
           name() ||
@@ -9636,7 +9678,7 @@ function Textarea(props: TextareaProps) {
       placeholder={props.placeholder}
       name={props.name}
       value={props.value}
-      defaultValue={props.defaultValue}
+      defaultvalue={props.defaultValue}
     ></textarea>
   );
 }
@@ -9663,7 +9705,7 @@ function Textarea(props: TextareaProps) {
         placeholder={props.placeholder}
         name={props.name}
         value={props.value}
-        defaultValue={props.defaultValue}
+        defaultvalue={props.defaultValue}
       ></textarea>
     </>
   );
@@ -9920,6 +9962,48 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`Solid > jsx > Typescript Test > camelCasedAttributes 1`] = `
+"import { createSignal } from \\"solid-js\\";
+
+import React from \\"@builder.io/react\\";
+
+function MyComponent(props: any) {
+  const [name, setName] = createSignal(\\"Steve\\");
+
+  return (
+    <div>
+      <img srcset=\\"http://example.com\\" />
+    </div>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
+exports[`Solid > jsx > Typescript Test > camelCasedAttributes 2`] = `
+"import { createSignal } from \\"solid-js\\";
+
+import { css } from \\"solid-styled-components\\";
+
+import React from \\"@builder.io/react\\";
+
+function MyComponent(props: any) {
+  const [name, setName] = createSignal(\\"Steve\\");
+
+  return (
+    <>
+      <div>
+        <img srcset=\\"http://example.com\\" />
+      </div>
+    </>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`Solid > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import { css } from \\"solid-styled-components\\";
 
@@ -10404,7 +10488,7 @@ function Button(props: ButtonProps) {
         <button
           type=\\"button\\"
           {...props.attributes}
-          onClick={(event) => props.onClick(event)}
+          onclick={(event) => props.onClick(event)}
         >
           {props.buttonText}
         </button>
@@ -10448,7 +10532,7 @@ function Button(props: ButtonProps) {
           <button
             type=\\"button\\"
             {...props.attributes}
-            onClick={(event) => props.onClick(event)}
+            onclick={(event) => props.onClick(event)}
           >
             {props.buttonText}
           </button>
@@ -10489,7 +10573,7 @@ function Button(props: ButtonProps) {
         <button
           type=\\"button\\"
           {...props.attributes}
-          onClick={(event) => props.onClick(event)}
+          onclick={(event) => props.onClick(event)}
         >
           {props.text}
         </button>
@@ -10531,7 +10615,7 @@ function Button(props: ButtonProps) {
           <button
             type=\\"button\\"
             {...props.attributes}
-            onClick={(event) => props.onClick(event)}
+            onclick={(event) => props.onClick(event)}
           >
             {props.text}
           </button>
@@ -12066,7 +12150,7 @@ function RenderContent(props: Props) {
           display: \\"flex\\",
           flexDirection: \\"columns\\",
         })}
-        onClick={(event) => trackClick(props.content.id)}
+        onclick={(event) => trackClick(props.content.id)}
       >
         <RenderBlocks blocks={props.content.blocks}></RenderBlocks>
       </div>
@@ -12122,14 +12206,14 @@ function RenderContent(props: Props) {
         }}
       >
         <div
-          class=\\"div-aeca8ad0\\"
-          onClick={(event) => trackClick(props.content.id)}
+          class=\\"div-2344f438\\"
+          onclick={(event) => trackClick(props.content.id)}
         >
           <RenderBlocks blocks={props.content.blocks}></RenderBlocks>
         </div>
       </BuilderContext.Provider>
       <style jsx>{\`
-        .div-aeca8ad0 {
+        .div-2344f438 {
           display: flex;
           flex-direction: columns;
         }
@@ -12553,12 +12637,12 @@ exports[`Solid > jsx > Typescript Test > svgComponent 1`] = `
     <svg
       fill=\\"none\\"
       role=\\"img\\"
-      viewBox={\\"0 0 \\" + 42 + \\" \\" + 42}
       width={42}
       height={42}
+      viewbox={\\"0 0 \\" + 42 + \\" \\" + 42}
     >
       <defs>
-        <filter id=\\"prefix__filter0_f\\" filterUnits=\\"userSpaceOnUse\\">
+        <filter id=\\"prefix__filter0_f\\" filterunits=\\"userSpaceOnUse\\">
           <feFlood result=\\"BackgroundImageFix\\"></feFlood>
           <feBlend
             in=\\"SourceGraphic\\"
@@ -12567,7 +12651,7 @@ exports[`Solid > jsx > Typescript Test > svgComponent 1`] = `
           ></feBlend>
           <feGaussianBlur
             result=\\"effect1_foregroundBlur\\"
-            stdDeviation={7}
+            stddeviation={7}
           ></feGaussianBlur>
         </filter>
       </defs>
@@ -12588,12 +12672,12 @@ function SvgComponent(props: any) {
       <svg
         fill=\\"none\\"
         role=\\"img\\"
-        viewBox={\\"0 0 \\" + 42 + \\" \\" + 42}
         width={42}
         height={42}
+        viewbox={\\"0 0 \\" + 42 + \\" \\" + 42}
       >
         <defs>
-          <filter id=\\"prefix__filter0_f\\" filterUnits=\\"userSpaceOnUse\\">
+          <filter id=\\"prefix__filter0_f\\" filterunits=\\"userSpaceOnUse\\">
             <feFlood result=\\"BackgroundImageFix\\"></feFlood>
             <feBlend
               in=\\"SourceGraphic\\"
@@ -12602,7 +12686,7 @@ function SvgComponent(props: any) {
             ></feBlend>
             <feGaussianBlur
               result=\\"effect1_foregroundBlur\\"
-              stdDeviation={7}
+              stddeviation={7}
             ></feGaussianBlur>
           </filter>
         </defs>
@@ -12777,7 +12861,7 @@ function MyComponent(props) {
 
   return (
     <div>
-      <input onInput={(event) => setName(event.target.value)} value={name()} />
+      <input value={name()} onchange={(event) => setName(event.target.value)} />
       Hello! I can run in React, Vue, Solid, or Liquid!
     </div>
   );
@@ -12799,8 +12883,8 @@ function MyComponent(props) {
     <>
       <div>
         <input
-          onInput={(event) => setName(event.target.value)}
           value={name()}
+          onchange={(event) => setName(event.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
@@ -12826,19 +12910,19 @@ function MyComponent(props) {
         type=\\"radio\\"
         value=\\"Plain\\"
         checked={tortilla() === \\"Plain\\"}
-        onInput={(event) => setTortilla(event.target.value)}
+        onchange={(event) => setTortilla(event.target.value)}
       />
       <input
         type=\\"radio\\"
         value=\\"Whole wheat\\"
         checked={tortilla() === \\"Whole wheat\\"}
-        onInput={(event) => setTortilla(event.target.value)}
+        onchange={(event) => setTortilla(event.target.value)}
       />
       <input
         type=\\"radio\\"
         value=\\"Spinach\\"
         checked={tortilla() === \\"Spinach\\"}
-        onInput={(event) => setTortilla(event.target.value)}
+        onchange={(event) => setTortilla(event.target.value)}
       />
       <br />
       <br />
@@ -12846,25 +12930,25 @@ function MyComponent(props) {
         type=\\"checkbox\\"
         value=\\"Rice\\"
         checked={fillings() === \\"Rice\\"}
-        onInput={(event) => setFillings(event.target.value)}
+        onchange={(event) => setFillings(event.target.value)}
       />
       <input
         type=\\"checkbox\\"
         value=\\"Beans\\"
         checked={fillings() === \\"Beans\\"}
-        onInput={(event) => setFillings(event.target.value)}
+        onchange={(event) => setFillings(event.target.value)}
       />
       <input
         type=\\"checkbox\\"
         value=\\"Cheese\\"
         checked={fillings() === \\"Cheese\\"}
-        onInput={(event) => setFillings(event.target.value)}
+        onchange={(event) => setFillings(event.target.value)}
       />
       <input
         type=\\"checkbox\\"
         value=\\"Guac (extra)\\"
         checked={fillings() === \\"Guac (extra)\\"}
-        onInput={(event) => setFillings(event.target.value)}
+        onchange={(event) => setFillings(event.target.value)}
       />
       <p>
         Tortilla:
@@ -12899,19 +12983,19 @@ function MyComponent(props) {
           type=\\"radio\\"
           value=\\"Plain\\"
           checked={tortilla() === \\"Plain\\"}
-          onInput={(event) => setTortilla(event.target.value)}
+          onchange={(event) => setTortilla(event.target.value)}
         />
         <input
           type=\\"radio\\"
           value=\\"Whole wheat\\"
           checked={tortilla() === \\"Whole wheat\\"}
-          onInput={(event) => setTortilla(event.target.value)}
+          onchange={(event) => setTortilla(event.target.value)}
         />
         <input
           type=\\"radio\\"
           value=\\"Spinach\\"
           checked={tortilla() === \\"Spinach\\"}
-          onInput={(event) => setTortilla(event.target.value)}
+          onchange={(event) => setTortilla(event.target.value)}
         />
         <br />
         <br />
@@ -12919,25 +13003,25 @@ function MyComponent(props) {
           type=\\"checkbox\\"
           value=\\"Rice\\"
           checked={fillings() === \\"Rice\\"}
-          onInput={(event) => setFillings(event.target.value)}
+          onchange={(event) => setFillings(event.target.value)}
         />
         <input
           type=\\"checkbox\\"
           value=\\"Beans\\"
           checked={fillings() === \\"Beans\\"}
-          onInput={(event) => setFillings(event.target.value)}
+          onchange={(event) => setFillings(event.target.value)}
         />
         <input
           type=\\"checkbox\\"
           value=\\"Cheese\\"
           checked={fillings() === \\"Cheese\\"}
-          onInput={(event) => setFillings(event.target.value)}
+          onchange={(event) => setFillings(event.target.value)}
         />
         <input
           type=\\"checkbox\\"
           value=\\"Guac (extra)\\"
           checked={fillings() === \\"Guac (extra)\\"}
-          onInput={(event) => setFillings(event.target.value)}
+          onchange={(event) => setFillings(event.target.value)}
         />
         <p>
           Tortilla:
@@ -13110,9 +13194,9 @@ function MyComponent(props) {
 
   return (
     <div>
-      <button onClick={(a) => log(\\"hi\\")}>Log</button>
-      <button onClick={(event) => log(event)}>Log</button>
-      <button onClick={(event) => log(event)}>Log</button>
+      <button onclick={(a) => log(\\"hi\\")}>Log</button>
+      <button onclick={(event) => log(event)}>Log</button>
+      <button onclick={(event) => log(event)}>Log</button>
     </div>
   );
 }
@@ -13134,9 +13218,9 @@ function MyComponent(props) {
   return (
     <>
       <div>
-        <button onClick={(a) => log(\\"hi\\")}>Log</button>
-        <button onClick={(event) => log(event)}>Log</button>
-        <button onClick={(event) => log(event)}>Log</button>
+        <button onclick={(a) => log(\\"hi\\")}>Log</button>
+        <button onclick={(event) => log(event)}>Log</button>
+        <button onclick={(event) => log(event)}>Log</button>
       </div>
     </>
   );
@@ -13152,7 +13236,7 @@ exports[`Solid > svelte > Javascript Test > html 1`] = `
 function MyComponent(props) {
   const [html, setHtml] = createSignal(\\"<b>bold</b>\\");
 
-  return <div innerHTML={html()}></div>;
+  return <div innerhtml={html()}></div>;
 }
 
 export default MyComponent;
@@ -13169,7 +13253,7 @@ function MyComponent(props) {
 
   return (
     <>
-      <div innerHTML={html()}></div>
+      <div innerhtml={html()}></div>
     </>
   );
 }
@@ -13190,10 +13274,10 @@ function MyComponent(props) {
 
   return (
     <Show
-      fallback={<button onClick={(event) => toggle(event)}> Show </button>}
+      fallback={<button onclick={(event) => toggle(event)}> Show </button>}
       when={show()}
     >
-      <button onClick={(event) => toggle(event)}> Hide </button>
+      <button onclick={(event) => toggle(event)}> Hide </button>
     </Show>
   );
 }
@@ -13217,10 +13301,10 @@ function MyComponent(props) {
   return (
     <>
       <Show
-        fallback={<button onClick={(event) => toggle(event)}> Show </button>}
+        fallback={<button onclick={(event) => toggle(event)}> Show </button>}
         when={show()}
       >
-        <button onClick={(event) => toggle(event)}> Hide </button>
+        <button onclick={(event) => toggle(event)}> Hide </button>
       </Show>
     </>
   );
@@ -13385,13 +13469,13 @@ function MyComponent(props) {
     <div>
       <input
         type=\\"number\\"
-        onInput={(event) => setA(event.target.value)}
         value={a()}
+        onchange={(event) => setA(event.target.value)}
       />
       <input
         type=\\"number\\"
-        onInput={(event) => setB(event.target.value)}
         value={b()}
+        onchange={(event) => setB(event.target.value)}
       />
       Result:
       {result()}
@@ -13429,13 +13513,13 @@ function MyComponent(props) {
       <div>
         <input
           type=\\"number\\"
-          onInput={(event) => setA(event.target.value)}
           value={a()}
+          onchange={(event) => setA(event.target.value)}
         />
         <input
           type=\\"number\\"
-          onInput={(event) => setB(event.target.value)}
           value={b()}
+          onchange={(event) => setB(event.target.value)}
         />
         Result:
         {result()}
@@ -13578,7 +13662,7 @@ function MyComponent(props: any) {
 
   return (
     <div>
-      <input onInput={(event) => setName(event.target.value)} value={name()} />
+      <input value={name()} onchange={(event) => setName(event.target.value)} />
       Hello! I can run in React, Vue, Solid, or Liquid!
     </div>
   );
@@ -13600,8 +13684,8 @@ function MyComponent(props: any) {
     <>
       <div>
         <input
-          onInput={(event) => setName(event.target.value)}
           value={name()}
+          onchange={(event) => setName(event.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
@@ -13627,19 +13711,19 @@ function MyComponent(props: any) {
         type=\\"radio\\"
         value=\\"Plain\\"
         checked={tortilla() === \\"Plain\\"}
-        onInput={(event) => setTortilla(event.target.value)}
+        onchange={(event) => setTortilla(event.target.value)}
       />
       <input
         type=\\"radio\\"
         value=\\"Whole wheat\\"
         checked={tortilla() === \\"Whole wheat\\"}
-        onInput={(event) => setTortilla(event.target.value)}
+        onchange={(event) => setTortilla(event.target.value)}
       />
       <input
         type=\\"radio\\"
         value=\\"Spinach\\"
         checked={tortilla() === \\"Spinach\\"}
-        onInput={(event) => setTortilla(event.target.value)}
+        onchange={(event) => setTortilla(event.target.value)}
       />
       <br />
       <br />
@@ -13647,25 +13731,25 @@ function MyComponent(props: any) {
         type=\\"checkbox\\"
         value=\\"Rice\\"
         checked={fillings() === \\"Rice\\"}
-        onInput={(event) => setFillings(event.target.value)}
+        onchange={(event) => setFillings(event.target.value)}
       />
       <input
         type=\\"checkbox\\"
         value=\\"Beans\\"
         checked={fillings() === \\"Beans\\"}
-        onInput={(event) => setFillings(event.target.value)}
+        onchange={(event) => setFillings(event.target.value)}
       />
       <input
         type=\\"checkbox\\"
         value=\\"Cheese\\"
         checked={fillings() === \\"Cheese\\"}
-        onInput={(event) => setFillings(event.target.value)}
+        onchange={(event) => setFillings(event.target.value)}
       />
       <input
         type=\\"checkbox\\"
         value=\\"Guac (extra)\\"
         checked={fillings() === \\"Guac (extra)\\"}
-        onInput={(event) => setFillings(event.target.value)}
+        onchange={(event) => setFillings(event.target.value)}
       />
       <p>
         Tortilla:
@@ -13700,19 +13784,19 @@ function MyComponent(props: any) {
           type=\\"radio\\"
           value=\\"Plain\\"
           checked={tortilla() === \\"Plain\\"}
-          onInput={(event) => setTortilla(event.target.value)}
+          onchange={(event) => setTortilla(event.target.value)}
         />
         <input
           type=\\"radio\\"
           value=\\"Whole wheat\\"
           checked={tortilla() === \\"Whole wheat\\"}
-          onInput={(event) => setTortilla(event.target.value)}
+          onchange={(event) => setTortilla(event.target.value)}
         />
         <input
           type=\\"radio\\"
           value=\\"Spinach\\"
           checked={tortilla() === \\"Spinach\\"}
-          onInput={(event) => setTortilla(event.target.value)}
+          onchange={(event) => setTortilla(event.target.value)}
         />
         <br />
         <br />
@@ -13720,25 +13804,25 @@ function MyComponent(props: any) {
           type=\\"checkbox\\"
           value=\\"Rice\\"
           checked={fillings() === \\"Rice\\"}
-          onInput={(event) => setFillings(event.target.value)}
+          onchange={(event) => setFillings(event.target.value)}
         />
         <input
           type=\\"checkbox\\"
           value=\\"Beans\\"
           checked={fillings() === \\"Beans\\"}
-          onInput={(event) => setFillings(event.target.value)}
+          onchange={(event) => setFillings(event.target.value)}
         />
         <input
           type=\\"checkbox\\"
           value=\\"Cheese\\"
           checked={fillings() === \\"Cheese\\"}
-          onInput={(event) => setFillings(event.target.value)}
+          onchange={(event) => setFillings(event.target.value)}
         />
         <input
           type=\\"checkbox\\"
           value=\\"Guac (extra)\\"
           checked={fillings() === \\"Guac (extra)\\"}
-          onInput={(event) => setFillings(event.target.value)}
+          onchange={(event) => setFillings(event.target.value)}
         />
         <p>
           Tortilla:
@@ -13911,9 +13995,9 @@ function MyComponent(props: any) {
 
   return (
     <div>
-      <button onClick={(a) => log(\\"hi\\")}>Log</button>
-      <button onClick={(event) => log(event)}>Log</button>
-      <button onClick={(event) => log(event)}>Log</button>
+      <button onclick={(a) => log(\\"hi\\")}>Log</button>
+      <button onclick={(event) => log(event)}>Log</button>
+      <button onclick={(event) => log(event)}>Log</button>
     </div>
   );
 }
@@ -13935,9 +14019,9 @@ function MyComponent(props: any) {
   return (
     <>
       <div>
-        <button onClick={(a) => log(\\"hi\\")}>Log</button>
-        <button onClick={(event) => log(event)}>Log</button>
-        <button onClick={(event) => log(event)}>Log</button>
+        <button onclick={(a) => log(\\"hi\\")}>Log</button>
+        <button onclick={(event) => log(event)}>Log</button>
+        <button onclick={(event) => log(event)}>Log</button>
       </div>
     </>
   );
@@ -13953,7 +14037,7 @@ exports[`Solid > svelte > Typescript Test > html 1`] = `
 function MyComponent(props: any) {
   const [html, setHtml] = createSignal(\\"<b>bold</b>\\");
 
-  return <div innerHTML={html()}></div>;
+  return <div innerhtml={html()}></div>;
 }
 
 export default MyComponent;
@@ -13970,7 +14054,7 @@ function MyComponent(props: any) {
 
   return (
     <>
-      <div innerHTML={html()}></div>
+      <div innerhtml={html()}></div>
     </>
   );
 }
@@ -13991,10 +14075,10 @@ function MyComponent(props: any) {
 
   return (
     <Show
-      fallback={<button onClick={(event) => toggle(event)}> Show </button>}
+      fallback={<button onclick={(event) => toggle(event)}> Show </button>}
       when={show()}
     >
-      <button onClick={(event) => toggle(event)}> Hide </button>
+      <button onclick={(event) => toggle(event)}> Hide </button>
     </Show>
   );
 }
@@ -14018,10 +14102,10 @@ function MyComponent(props: any) {
   return (
     <>
       <Show
-        fallback={<button onClick={(event) => toggle(event)}> Show </button>}
+        fallback={<button onclick={(event) => toggle(event)}> Show </button>}
         when={show()}
       >
-        <button onClick={(event) => toggle(event)}> Hide </button>
+        <button onclick={(event) => toggle(event)}> Hide </button>
       </Show>
     </>
   );
@@ -14186,13 +14270,13 @@ function MyComponent(props: any) {
     <div>
       <input
         type=\\"number\\"
-        onInput={(event) => setA(event.target.value)}
         value={a()}
+        onchange={(event) => setA(event.target.value)}
       />
       <input
         type=\\"number\\"
-        onInput={(event) => setB(event.target.value)}
         value={b()}
+        onchange={(event) => setB(event.target.value)}
       />
       Result:
       {result()}
@@ -14230,13 +14314,13 @@ function MyComponent(props: any) {
       <div>
         <input
           type=\\"number\\"
-          onInput={(event) => setA(event.target.value)}
           value={a()}
+          onchange={(event) => setA(event.target.value)}
         />
         <input
           type=\\"number\\"
-          onInput={(event) => setB(event.target.value)}
           value={b()}
+          onchange={(event) => setB(event.target.value)}
         />
         Result:
         {result()}
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index 45b2dd7bed..e5dbb633eb 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -37,8 +37,8 @@ export default class MyBasicRefComponent {
               class=\\"input\\"
               ref={(el) => (this.inputRef = el)}
               value={this.name}
-              onBlur={(event) => this.onBlur()}
-              onInput={(event) => (this.name = event.target.value)}
+              onblur={(event) => this.onBlur()}
+              onchange={(event) => (this.name = event.target.value)}
             />
 
             <label for=\\"cars\\" ref={(el) => (this.inputNoArgRef = el)}>
@@ -91,7 +91,7 @@ export default class MyBasicComponent {
       <div class=\\"test div\\">
         <input
           value={DEFAULT_VALUES.name || this.name}
-          onInput={(myEvent) => (this.name = myEvent.target.value)}
+          onchange={(myEvent) => (this.name = myEvent.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
@@ -127,7 +127,7 @@ export default class MyBasicComponent {
       <div>
         {myService.method(\\"hello\\") + this.name}
         Hello! I can run in React, Vue, Solid, or Liquid!
-        <input onInput={(event) => this.onChange} />
+        <input onchange={(event) => this.onChange} />
       </div>
     );
   }
@@ -315,7 +315,7 @@ export default class MyBasicForComponent {
           <Fragment>
             <input
               value={this.name}
-              onInput={(event) => {
+              onchange={(event) => {
                 this.name = event.target.value + \\" and \\" + person;
               }}
             />
@@ -364,8 +364,8 @@ export default class MyBasicRefComponent {
               class=\\"input\\"
               ref={(el) => (this.inputRef = el)}
               value={this.name}
-              onBlur={(event) => this.onBlur()}
-              onInput={(event) => (this.name = event.target.value)}
+              onblur={(event) => this.onBlur()}
+              onchange={(event) => (this.name = event.target.value)}
             />
 
             <label for=\\"cars\\" ref={(el) => (this.inputNoArgRef = el)}>
@@ -405,7 +405,7 @@ export default class MyBasicRefAssignmentComponent {
   render() {
     return (
       <div>
-        <button onClick={(evt) => this.handlerClick(evt)}>Click</button>
+        <button onclick={(evt) => this.handlerClick(evt)}>Click</button>
       </div>
     );
   }
@@ -448,7 +448,7 @@ export default class MyPreviousComponent {
           {prevCount}
         </h1>
 
-        <button onClick={(event) => (this.count += 1)}>Increment</button>
+        <button onclick={(event) => (this.count += 1)}>Increment</button>
       </div>
     );
   }
@@ -596,7 +596,7 @@ exports[`Stencil > jsx > Javascript Test > ContentSlotJSX 1`] = `
   32 |        
 > 33 |          {this.slotReference ? (
      |               ^
-  34 |      <><div  class={props.slotContent ? \`\${state.name}-content\` : ''}  name={this.slotContent ? 'name1' : 'name2'}  title={this.slotContent ? 'title1' : 'title2'}  {...(props.attributes)}  onClick={event => this.show()} >
+  34 |      <><div  class={props.slotContent ? \`\${state.name}-content\` : ''}  name={this.slotContent ? 'name1' : 'name2'}  title={this.slotContent ? 'title1' : 'title2'}  {...(props.attributes)}  onclick={event => this.show()} >
   35 |        
   36 | {this.showContent && this.slotContent ? ("
 `;
@@ -667,7 +667,7 @@ export default class CustomCode {
           \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
         }
         ref={(el) => (this.elem = el)}
-        innerHTML={this.code}
+        innerhtml={this.code}
       ></div>
     );
   }
@@ -741,7 +741,7 @@ export default class CustomCode {
           \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
         }
         ref={(el) => (this.elem = el)}
-        innerHTML={this.code}
+        innerhtml={this.code}
       ></div>
     );
   }
@@ -1017,8 +1017,8 @@ export default class FormComponent {
         action={!this.sendWithJs && this.action}
         method={this.method}
         name={this.name}
-        onSubmit={(event) => this.onSubmit(event)}
         {...props.attributes}
+        onsubmit={(event) => this.onSubmit(event)}
       >
         {this.builderBlock && this.builderBlock.children ? (
           <>
@@ -1158,9 +1158,9 @@ export default class Image {
                 alt={this.altText}
                 aria-role={this.altText ? \\"presentation\\" : undefined}
                 src={this.image}
-                onLoad={(event) => this.setLoaded()}
                 srcset={this.srcset}
                 sizes={this.sizes}
+                onload={(event) => this.setLoaded()}
               />
             </>
           ) : null}
@@ -1264,8 +1264,8 @@ export default class FormInputComponent {
         type={this.type}
         name={this.name}
         value={this.value}
-        defaultValue={this.defaultValue}
         required={this.required}
+        defaultvalue={this.defaultValue}
       />
     );
   }
@@ -1287,7 +1287,7 @@ export default class RawText {
     return (
       <span
         class={props.attributes?.class || props.attributes?.className}
-        innerHTML={this.text || \\"\\"}
+        innerhtml={this.text || \\"\\"}
       ></span>
     );
   }
@@ -1351,8 +1351,8 @@ export default class SelectComponent {
             ? this.defaultValue
             : \\"default-key\\"
         }
-        defaultValue={this.defaultValue}
         name={this.name}
+        defaultvalue={this.defaultValue}
       >
         {this.options?.map((option, index) => (
           <option value={option.value} data-index={index}>
@@ -1513,7 +1513,7 @@ export default class SmileReviews {
   render() {
     return (
       <div data-user={this.name}>
-        <button onClick={(event) => (this.showReviewPrompt = true)}>
+        <button onclick={(event) => (this.showReviewPrompt = true)}>
           Write a review
         </button>
 
@@ -1527,7 +1527,7 @@ export default class SmileReviews {
             ></textarea>
             <button
               class=\\"button\\"
-              onClick={(event) => {
+              onclick={(event) => {
                 event.preventDefault();
                 this.showReviewPrompt = false;
               }}
@@ -1598,11 +1598,11 @@ export default class Text {
   render() {
     return (
       <div
-        contentEditable={allowEditingText || undefined}
         data-name={{
           test: this.name || \\"any name\\",
         }}
-        innerHTML={
+        contenteditable={allowEditingText || undefined}
+        innerhtml={
           this.text ||
           this.content ||
           this.name ||
@@ -1635,7 +1635,7 @@ export default class Textarea {
         placeholder={this.placeholder}
         name={this.name}
         value={this.value}
-        defaultValue={this.defaultValue}
+        defaultvalue={this.defaultValue}
       ></textarea>
     );
   }
@@ -1739,7 +1739,7 @@ export default class MyBasicForwardRefComponent {
           class=\\"input\\"
           ref={(el) => (this.props.inputRef = el)}
           value={this.name}
-          onInput={(event) => (this.name = event.target.value)}
+          onchange={(event) => (this.name = event.target.value)}
         />
       </div>
     );
@@ -1771,7 +1771,7 @@ export default class MyBasicForwardRefComponent {
           class=\\"input\\"
           ref={(el) => (this.props.inputRef = el)}
           value={this.name}
-          onInput={(event) => (this.name = event.target.value)}
+          onchange={(event) => (this.name = event.target.value)}
         />
       </div>
     );
@@ -1818,6 +1818,28 @@ export default class MyBasicOnUpdateReturnComponent {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > camelCasedAttributes 1`] = `
+"import React from \\"@builder.io/react\\";
+
+import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"my-component\\",
+})
+export default class MyComponent {
+  @State() name = \\"Steve\\";
+
+  render() {
+    return (
+      <div>
+        <img srcset=\\"http://example.com\\" />
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
 
@@ -2038,7 +2060,7 @@ export default class Button {
             <button
               type=\\"button\\"
               {...props.attributes}
-              onClick={(event) => this.onClick(event)}
+              onclick={(event) => this.onClick(event)}
             >
               {this.buttonText}
             </button>
@@ -2084,7 +2106,7 @@ export default class Button {
             <button
               type=\\"button\\"
               {...props.attributes}
-              onClick={(event) => this.onClick(event)}
+              onclick={(event) => this.onClick(event)}
             >
               {this.text}
             </button>
@@ -2509,7 +2531,7 @@ export default class RenderContent {
 
   render() {
     return (
-      <div class=\\"div\\" onClick={(event) => trackClick(this.content.id)}>
+      <div class=\\"div\\" onclick={(event) => trackClick(this.content.id)}>
         <RenderBlocks blocks={this.content.blocks}></RenderBlocks>
       </div>
     );
@@ -2716,12 +2738,12 @@ export default class SvgComponent {
       <svg
         fill=\\"none\\"
         role=\\"img\\"
-        viewBox={\\"0 0 \\" + 42 + \\" \\" + 42}
         width={42}
         height={42}
+        viewbox={\\"0 0 \\" + 42 + \\" \\" + 42}
       >
         <defs>
-          <filter id=\\"prefix__filter0_f\\" filterUnits=\\"userSpaceOnUse\\">
+          <filter id=\\"prefix__filter0_f\\" filterunits=\\"userSpaceOnUse\\">
             <feFlood result=\\"BackgroundImageFix\\"></feFlood>
 
             <feBlend
@@ -2732,7 +2754,7 @@ export default class SvgComponent {
 
             <feGaussianBlur
               result=\\"effect1_foregroundBlur\\"
-              stdDeviation={7}
+              stddeviation={7}
             ></feGaussianBlur>
           </filter>
         </defs>
@@ -2890,8 +2912,8 @@ export default class MyBasicRefComponent {
               class=\\"input\\"
               ref={(el) => (this.inputRef = el)}
               value={this.name}
-              onBlur={(event) => this.onBlur()}
-              onInput={(event) => (this.name = event.target.value)}
+              onblur={(event) => this.onBlur()}
+              onchange={(event) => (this.name = event.target.value)}
             />
 
             <label for=\\"cars\\" ref={(el) => (this.inputNoArgRef = el)}>
@@ -2944,7 +2966,7 @@ export default class MyBasicComponent {
       <div class=\\"test div\\">
         <input
           value={DEFAULT_VALUES.name || this.name}
-          onInput={(myEvent) => (this.name = myEvent.target.value)}
+          onchange={(myEvent) => (this.name = myEvent.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
@@ -2980,7 +3002,7 @@ export default class MyBasicComponent {
       <div>
         {myService.method(\\"hello\\") + this.name}
         Hello! I can run in React, Vue, Solid, or Liquid!
-        <input onInput={(event) => this.onChange} />
+        <input onchange={(event) => this.onChange} />
       </div>
     );
   }
@@ -3168,7 +3190,7 @@ export default class MyBasicForComponent {
           <Fragment>
             <input
               value={this.name}
-              onInput={(event) => {
+              onchange={(event) => {
                 this.name = event.target.value + \\" and \\" + person;
               }}
             />
@@ -3217,8 +3239,8 @@ export default class MyBasicRefComponent {
               class=\\"input\\"
               ref={(el) => (this.inputRef = el)}
               value={this.name}
-              onBlur={(event) => this.onBlur()}
-              onInput={(event) => (this.name = event.target.value)}
+              onblur={(event) => this.onBlur()}
+              onchange={(event) => (this.name = event.target.value)}
             />
 
             <label for=\\"cars\\" ref={(el) => (this.inputNoArgRef = el)}>
@@ -3258,7 +3280,7 @@ export default class MyBasicRefAssignmentComponent {
   render() {
     return (
       <div>
-        <button onClick={(evt) => this.handlerClick(evt)}>Click</button>
+        <button onclick={(evt) => this.handlerClick(evt)}>Click</button>
       </div>
     );
   }
@@ -3301,7 +3323,7 @@ export default class MyPreviousComponent {
           {prevCount}
         </h1>
 
-        <button onClick={(event) => (this.count += 1)}>Increment</button>
+        <button onclick={(event) => (this.count += 1)}>Increment</button>
       </div>
     );
   }
@@ -3449,7 +3471,7 @@ exports[`Stencil > jsx > Typescript Test > ContentSlotJSX 1`] = `
   32 |        
 > 33 |          {this.slotReference ? (
      |               ^
-  34 |      <><div  class={props.slotContent ? \`\${state.name}-content\` : ''}  name={this.slotContent ? 'name1' : 'name2'}  title={this.slotContent ? 'title1' : 'title2'}  {...(props.attributes)}  onClick={event => this.show()} >
+  34 |      <><div  class={props.slotContent ? \`\${state.name}-content\` : ''}  name={this.slotContent ? 'name1' : 'name2'}  title={this.slotContent ? 'title1' : 'title2'}  {...(props.attributes)}  onclick={event => this.show()} >
   35 |        
   36 | {this.showContent && this.slotContent ? ("
 `;
@@ -3520,7 +3542,7 @@ export default class CustomCode {
           \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
         }
         ref={(el) => (this.elem = el)}
-        innerHTML={this.code}
+        innerhtml={this.code}
       ></div>
     );
   }
@@ -3594,7 +3616,7 @@ export default class CustomCode {
           \\"builder-custom-code\\" + (props.replaceNodes ? \\" replace-nodes\\" : \\"\\")
         }
         ref={(el) => (this.elem = el)}
-        innerHTML={this.code}
+        innerhtml={this.code}
       ></div>
     );
   }
@@ -3870,8 +3892,8 @@ export default class FormComponent {
         action={!this.sendWithJs && this.action}
         method={this.method}
         name={this.name}
-        onSubmit={(event) => this.onSubmit(event)}
         {...props.attributes}
+        onsubmit={(event) => this.onSubmit(event)}
       >
         {this.builderBlock && this.builderBlock.children ? (
           <>
@@ -4011,9 +4033,9 @@ export default class Image {
                 alt={this.altText}
                 aria-role={this.altText ? \\"presentation\\" : undefined}
                 src={this.image}
-                onLoad={(event) => this.setLoaded()}
                 srcset={this.srcset}
                 sizes={this.sizes}
+                onload={(event) => this.setLoaded()}
               />
             </>
           ) : null}
@@ -4117,8 +4139,8 @@ export default class FormInputComponent {
         type={this.type}
         name={this.name}
         value={this.value}
-        defaultValue={this.defaultValue}
         required={this.required}
+        defaultvalue={this.defaultValue}
       />
     );
   }
@@ -4140,7 +4162,7 @@ export default class RawText {
     return (
       <span
         class={props.attributes?.class || props.attributes?.className}
-        innerHTML={this.text || \\"\\"}
+        innerhtml={this.text || \\"\\"}
       ></span>
     );
   }
@@ -4204,8 +4226,8 @@ export default class SelectComponent {
             ? this.defaultValue
             : \\"default-key\\"
         }
-        defaultValue={this.defaultValue}
         name={this.name}
+        defaultvalue={this.defaultValue}
       >
         {this.options?.map((option, index) => (
           <option value={option.value} data-index={index}>
@@ -4366,7 +4388,7 @@ export default class SmileReviews {
   render() {
     return (
       <div data-user={this.name}>
-        <button onClick={(event) => (this.showReviewPrompt = true)}>
+        <button onclick={(event) => (this.showReviewPrompt = true)}>
           Write a review
         </button>
 
@@ -4380,7 +4402,7 @@ export default class SmileReviews {
             ></textarea>
             <button
               class=\\"button\\"
-              onClick={(event) => {
+              onclick={(event) => {
                 event.preventDefault();
                 this.showReviewPrompt = false;
               }}
@@ -4451,11 +4473,11 @@ export default class Text {
   render() {
     return (
       <div
-        contentEditable={allowEditingText || undefined}
         data-name={{
           test: this.name || \\"any name\\",
         }}
-        innerHTML={
+        contenteditable={allowEditingText || undefined}
+        innerhtml={
           this.text ||
           this.content ||
           this.name ||
@@ -4488,7 +4510,7 @@ export default class Textarea {
         placeholder={this.placeholder}
         name={this.name}
         value={this.value}
-        defaultValue={this.defaultValue}
+        defaultvalue={this.defaultValue}
       ></textarea>
     );
   }
@@ -4592,7 +4614,7 @@ export default class MyBasicForwardRefComponent {
           class=\\"input\\"
           ref={(el) => (this.props.inputRef = el)}
           value={this.name}
-          onInput={(event) => (this.name = event.target.value)}
+          onchange={(event) => (this.name = event.target.value)}
         />
       </div>
     );
@@ -4624,7 +4646,7 @@ export default class MyBasicForwardRefComponent {
           class=\\"input\\"
           ref={(el) => (this.props.inputRef = el)}
           value={this.name}
-          onInput={(event) => (this.name = event.target.value)}
+          onchange={(event) => (this.name = event.target.value)}
         />
       </div>
     );
@@ -4671,6 +4693,28 @@ export default class MyBasicOnUpdateReturnComponent {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > camelCasedAttributes 1`] = `
+"import React from \\"@builder.io/react\\";
+
+import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"my-component\\",
+})
+export default class MyComponent {
+  @State() name = \\"Steve\\";
+
+  render() {
+    return (
+      <div>
+        <img srcset=\\"http://example.com\\" />
+      </div>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import { Component, Prop, h, State, Fragment } from \\"@stencil/core\\";
 
@@ -4891,7 +4935,7 @@ export default class Button {
             <button
               type=\\"button\\"
               {...props.attributes}
-              onClick={(event) => this.onClick(event)}
+              onclick={(event) => this.onClick(event)}
             >
               {this.buttonText}
             </button>
@@ -4937,7 +4981,7 @@ export default class Button {
             <button
               type=\\"button\\"
               {...props.attributes}
-              onClick={(event) => this.onClick(event)}
+              onclick={(event) => this.onClick(event)}
             >
               {this.text}
             </button>
@@ -5362,7 +5406,7 @@ export default class RenderContent {
 
   render() {
     return (
-      <div class=\\"div\\" onClick={(event) => trackClick(this.content.id)}>
+      <div class=\\"div\\" onclick={(event) => trackClick(this.content.id)}>
         <RenderBlocks blocks={this.content.blocks}></RenderBlocks>
       </div>
     );
@@ -5569,12 +5613,12 @@ export default class SvgComponent {
       <svg
         fill=\\"none\\"
         role=\\"img\\"
-        viewBox={\\"0 0 \\" + 42 + \\" \\" + 42}
         width={42}
         height={42}
+        viewbox={\\"0 0 \\" + 42 + \\" \\" + 42}
       >
         <defs>
-          <filter id=\\"prefix__filter0_f\\" filterUnits=\\"userSpaceOnUse\\">
+          <filter id=\\"prefix__filter0_f\\" filterunits=\\"userSpaceOnUse\\">
             <feFlood result=\\"BackgroundImageFix\\"></feFlood>
 
             <feBlend
@@ -5585,7 +5629,7 @@ export default class SvgComponent {
 
             <feGaussianBlur
               result=\\"effect1_foregroundBlur\\"
-              stdDeviation={7}
+              stddeviation={7}
             ></feGaussianBlur>
           </filter>
         </defs>
@@ -5698,8 +5742,8 @@ export default class MyComponent {
     return (
       <div>
         <input
-          onInput={(event) => (this.name = event.target.value)}
           value={this.name}
+          onchange={(event) => (this.name = event.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
@@ -5726,19 +5770,19 @@ export default class MyComponent {
           type=\\"radio\\"
           value=\\"Plain\\"
           checked={this.tortilla === \\"Plain\\"}
-          onInput={(event) => (this.tortilla = event.target.value)}
+          onchange={(event) => (this.tortilla = event.target.value)}
         />
         <input
           type=\\"radio\\"
           value=\\"Whole wheat\\"
           checked={this.tortilla === \\"Whole wheat\\"}
-          onInput={(event) => (this.tortilla = event.target.value)}
+          onchange={(event) => (this.tortilla = event.target.value)}
         />
         <input
           type=\\"radio\\"
           value=\\"Spinach\\"
           checked={this.tortilla === \\"Spinach\\"}
-          onInput={(event) => (this.tortilla = event.target.value)}
+          onchange={(event) => (this.tortilla = event.target.value)}
         />
         <br />
         <br />
@@ -5746,25 +5790,25 @@ export default class MyComponent {
           type=\\"checkbox\\"
           value=\\"Rice\\"
           checked={this.fillings === \\"Rice\\"}
-          onInput={(event) => (this.fillings = event.target.value)}
+          onchange={(event) => (this.fillings = event.target.value)}
         />
         <input
           type=\\"checkbox\\"
           value=\\"Beans\\"
           checked={this.fillings === \\"Beans\\"}
-          onInput={(event) => (this.fillings = event.target.value)}
+          onchange={(event) => (this.fillings = event.target.value)}
         />
         <input
           type=\\"checkbox\\"
           value=\\"Cheese\\"
           checked={this.fillings === \\"Cheese\\"}
-          onInput={(event) => (this.fillings = event.target.value)}
+          onchange={(event) => (this.fillings = event.target.value)}
         />
         <input
           type=\\"checkbox\\"
           value=\\"Guac (extra)\\"
           checked={this.fillings === \\"Guac (extra)\\"}
-          onInput={(event) => (this.fillings = event.target.value)}
+          onchange={(event) => (this.fillings = event.target.value)}
         />
         <p>
           Tortilla:
@@ -5873,9 +5917,9 @@ export default class MyComponent {
   render() {
     return (
       <div>
-        <button onClick={(a) => this.log(\\"hi\\")}>Log</button>
-        <button onClick={(event) => this.log(event)}>Log</button>
-        <button onClick={(event) => this.log(event)}>Log</button>
+        <button onclick={(a) => this.log(\\"hi\\")}>Log</button>
+        <button onclick={(event) => this.log(event)}>Log</button>
+        <button onclick={(event) => this.log(event)}>Log</button>
       </div>
     );
   }
@@ -5893,7 +5937,7 @@ export default class MyComponent {
   @State() html = \\"<b>bold</b>\\";
 
   render() {
-    return <div innerHTML={this.html}></div>;
+    return <div innerhtml={this.html}></div>;
   }
 }
 "
@@ -5905,8 +5949,8 @@ exports[`Stencil > svelte > Javascript Test > ifElse 1`] = `
   24 |       
 > 25 |         {this.show ? (
      |              ^
-  26 |     <button  onClick={event => this.toggle(event)} > Hide </button>
-  27 |   ) : <button  onClick={event => this.toggle(event)} > Show </button>}
+  26 |     <button  onclick={event => this.toggle(event)} > Hide </button>
+  27 |   ) : <button  onclick={event => this.toggle(event)} > Show </button>}
   28 |"
 `;
 
@@ -6008,13 +6052,13 @@ export default class MyComponent {
       <div>
         <input
           type=\\"number\\"
-          onInput={(event) => (this.a = event.target.value)}
           value={this.a}
+          onchange={(event) => (this.a = event.target.value)}
         />
         <input
           type=\\"number\\"
-          onInput={(event) => (this.b = event.target.value)}
           value={this.b}
+          onchange={(event) => (this.b = event.target.value)}
         />
         Result:
         {this.result}
@@ -6108,8 +6152,8 @@ export default class MyComponent {
     return (
       <div>
         <input
-          onInput={(event) => (this.name = event.target.value)}
           value={this.name}
+          onchange={(event) => (this.name = event.target.value)}
         />
         Hello! I can run in React, Vue, Solid, or Liquid!
       </div>
@@ -6136,19 +6180,19 @@ export default class MyComponent {
           type=\\"radio\\"
           value=\\"Plain\\"
           checked={this.tortilla === \\"Plain\\"}
-          onInput={(event) => (this.tortilla = event.target.value)}
+          onchange={(event) => (this.tortilla = event.target.value)}
         />
         <input
           type=\\"radio\\"
           value=\\"Whole wheat\\"
           checked={this.tortilla === \\"Whole wheat\\"}
-          onInput={(event) => (this.tortilla = event.target.value)}
+          onchange={(event) => (this.tortilla = event.target.value)}
         />
         <input
           type=\\"radio\\"
           value=\\"Spinach\\"
           checked={this.tortilla === \\"Spinach\\"}
-          onInput={(event) => (this.tortilla = event.target.value)}
+          onchange={(event) => (this.tortilla = event.target.value)}
         />
         <br />
         <br />
@@ -6156,25 +6200,25 @@ export default class MyComponent {
           type=\\"checkbox\\"
           value=\\"Rice\\"
           checked={this.fillings === \\"Rice\\"}
-          onInput={(event) => (this.fillings = event.target.value)}
+          onchange={(event) => (this.fillings = event.target.value)}
         />
         <input
           type=\\"checkbox\\"
           value=\\"Beans\\"
           checked={this.fillings === \\"Beans\\"}
-          onInput={(event) => (this.fillings = event.target.value)}
+          onchange={(event) => (this.fillings = event.target.value)}
         />
         <input
           type=\\"checkbox\\"
           value=\\"Cheese\\"
           checked={this.fillings === \\"Cheese\\"}
-          onInput={(event) => (this.fillings = event.target.value)}
+          onchange={(event) => (this.fillings = event.target.value)}
         />
         <input
           type=\\"checkbox\\"
           value=\\"Guac (extra)\\"
           checked={this.fillings === \\"Guac (extra)\\"}
-          onInput={(event) => (this.fillings = event.target.value)}
+          onchange={(event) => (this.fillings = event.target.value)}
         />
         <p>
           Tortilla:
@@ -6283,9 +6327,9 @@ export default class MyComponent {
   render() {
     return (
       <div>
-        <button onClick={(a) => this.log(\\"hi\\")}>Log</button>
-        <button onClick={(event) => this.log(event)}>Log</button>
-        <button onClick={(event) => this.log(event)}>Log</button>
+        <button onclick={(a) => this.log(\\"hi\\")}>Log</button>
+        <button onclick={(event) => this.log(event)}>Log</button>
+        <button onclick={(event) => this.log(event)}>Log</button>
       </div>
     );
   }
@@ -6303,7 +6347,7 @@ export default class MyComponent {
   @State() html = \\"<b>bold</b>\\";
 
   render() {
-    return <div innerHTML={this.html}></div>;
+    return <div innerhtml={this.html}></div>;
   }
 }
 "
@@ -6315,8 +6359,8 @@ exports[`Stencil > svelte > Typescript Test > ifElse 1`] = `
   24 |       
 > 25 |         {this.show ? (
      |              ^
-  26 |     <button  onClick={event => this.toggle(event)} > Hide </button>
-  27 |   ) : <button  onClick={event => this.toggle(event)} > Show </button>}
+  26 |     <button  onclick={event => this.toggle(event)} > Hide </button>
+  27 |   ) : <button  onclick={event => this.toggle(event)} > Show </button>}
   28 |"
 `;
 
@@ -6418,13 +6462,13 @@ export default class MyComponent {
       <div>
         <input
           type=\\"number\\"
-          onInput={(event) => (this.a = event.target.value)}
           value={this.a}
+          onchange={(event) => (this.a = event.target.value)}
         />
         <input
           type=\\"number\\"
-          onInput={(event) => (this.b = event.target.value)}
           value={this.b}
+          onchange={(event) => (this.b = event.target.value)}
         />
         Result:
         {this.result}
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index 092bfd0a04..f369f23a63 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -29,10 +29,10 @@ exports[`Svelte > jsx > Javascript Test > AdvancedRef 1`] = `
     <input
       class=\\"input\\"
       bind:this={inputRef}
+      bind:value={name}
       on:blur={(event) => {
         onBlur();
       }}
-      bind:value={name}
     />
 
     <label for=\\"cars\\" bind:this={inputNoArgRef}> Choose a car: </label>
@@ -137,7 +137,11 @@ exports[`Svelte > jsx > Javascript Test > Basic Context 1`] = `
 <div>
   {myService.method(\\"hello\\") + name}
   Hello! I can run in React, Vue, Solid, or Liquid!
-  <input on:change={onChange} />
+  <input
+    on:change={(event) => {
+      onChange;
+    }}
+  />
 </div>"
 `;
 
@@ -285,10 +289,10 @@ exports[`Svelte > jsx > Javascript Test > BasicRef 1`] = `
     <input
       class=\\"input\\"
       bind:this={inputRef}
+      bind:value={name}
       on:blur={(event) => {
         onBlur();
       }}
-      bind:value={name}
     />
 
     <label for=\\"cars\\" bind:this={inputNoArgRef}> Choose a car: </label>
@@ -480,10 +484,10 @@ exports[`Svelte > jsx > Javascript Test > ContentSlotJSX 1`] = `
     name={$$slots.content ? \\"name1\\" : \\"name2\\"}
     title={$$slots.content ? \\"title1\\" : \\"title2\\"}
     {...attributes}
+    class={$$slots.content ? \`\${name}-content\` : \\"\\"}
     on:click={(event) => {
       show();
     }}
-    class={$$slots.content ? \`\${name}-content\` : \\"\\"}
   >
     {#if showContent && $$slots.content}
       <slot name=\\"content\\">{content}</slot>
@@ -558,9 +562,8 @@ exports[`Svelte > jsx > Javascript Test > CustomCode 1`] = `
 <div
   bind:this={elem}
   class={\\"builder-custom-code\\" + (replaceNodes ? \\" replace-nodes\\" : \\"\\")}
->
-  {@html code}
-</div>"
+  innerhtml={code}
+/>"
 `;
 
 exports[`Svelte > jsx > Javascript Test > Embed 1`] = `
@@ -625,9 +628,8 @@ exports[`Svelte > jsx > Javascript Test > Embed 1`] = `
 <div
   bind:this={elem}
   class={\\"builder-custom-code\\" + (replaceNodes ? \\" replace-nodes\\" : \\"\\")}
->
-  {@html code}
-</div>"
+  innerhtml={code}
+/>"
 `;
 
 exports[`Svelte > jsx > Javascript Test > Form 1`] = `
@@ -887,10 +889,10 @@ exports[`Svelte > jsx > Javascript Test > Form 1`] = `
   action={!sendWithJs && action}
   {method}
   {name}
+  {...attributes}
   on:submit={(event) => {
     onSubmit(event);
   }}
-  {...attributes}
 >
   {#if builderBlock && builderBlock.children}
     {#each builderBlock?.children as block, index (block.id)}
@@ -998,11 +1000,11 @@ exports[`Svelte > jsx > Javascript Test > Image 1`] = `
         aria-role={altText ? \\"presentation\\" : undefined}
         class={\\"builder-image\\" + (_class ? \\" \\" + _class : \\"\\") + \\" img\\"}
         src={image}
+        {srcset}
+        {sizes}
         on:load={(event) => {
           setLoaded();
         }}
-        {srcset}
-        {sizes}
       />
     {/if}
     <source {srcset} />
@@ -1086,8 +1088,8 @@ exports[`Svelte > jsx > Javascript Test > Input 1`] = `
   {type}
   {name}
   {value}
-  {defaultValue}
   {required}
+  defaultvalue={defaultValue}
 />"
 `;
 
@@ -1097,9 +1099,10 @@ exports[`Svelte > jsx > Javascript Test > RawText 1`] = `
   export let text;
 </script>
 
-<span class={attributes?.class || attributes?.className}
-  >{@html text || \\"\\"}</span
->"
+<span
+  class={attributes?.class || attributes?.className}
+  innerhtml={text || \\"\\"}
+/>"
 `;
 
 exports[`Svelte > jsx > Javascript Test > Section 1`] = `
@@ -1177,8 +1180,8 @@ exports[`Svelte > jsx > Javascript Test > Select 1`] = `
   {...attributes}
   {value}
   key={Builder.isEditing && defaultValue ? defaultValue : \\"default-key\\"}
-  {defaultValue}
   {name}
+  defaultvalue={defaultValue}
 >
   {#each options as option, index}
     <option value={option.value} data-index={index}>
@@ -1376,13 +1379,12 @@ exports[`Svelte > jsx > Javascript Test > Text 1`] = `
 </script>
 
 <div
-  contentEditable={allowEditingText || undefined}
   data-name={{
     test: name || \\"any name\\",
   }}
->
-  {@html text || content || name || '<p class=\\"text-lg\\">my name</p>'}
-</div>"
+  contenteditable={allowEditingText || undefined}
+  innerhtml={text || content || name || '<p class=\\"text-lg\\">my name</p>'}
+/>"
 `;
 
 exports[`Svelte > jsx > Javascript Test > Textarea 1`] = `
@@ -1394,7 +1396,13 @@ exports[`Svelte > jsx > Javascript Test > Textarea 1`] = `
   export let defaultValue;
 </script>
 
-<textarea {...attributes} {placeholder} {name} {value} {defaultValue} />"
+<textarea
+  {...attributes}
+  {placeholder}
+  {name}
+  {value}
+  defaultvalue={defaultValue}
+/>"
 `;
 
 exports[`Svelte > jsx > Javascript Test > Video 1`] = `
@@ -1520,6 +1528,18 @@ exports[`Svelte > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
 <div>Hello! {name}</div>"
 `;
 
+exports[`Svelte > jsx > Javascript Test > camelCasedAttributes 1`] = `
+"<script>
+  import React from \\"@builder.io/react\\";
+
+  let name = \\"Steve\\";
+</script>
+
+<div>
+  <img srcset=\\"http://example.com\\" />
+</div>"
+`;
+
 exports[`Svelte > jsx > Javascript Test > class + ClassName + css 1`] = `
 "<div class=\\"test2 test div\\">
   Hello! I can run in React, Vue, Solid, or Liquid!
@@ -2441,15 +2461,15 @@ exports[`Svelte > jsx > Javascript Test > svgComponent 1`] = `
 "<svg
   fill=\\"none\\"
   role=\\"img\\"
-  viewBox={\\"0 0 \\" + 42 + \\" \\" + 42}
   width={42}
   height={42}
+  viewbox={\\"0 0 \\" + 42 + \\" \\" + 42}
 >
   <defs>
-    <filter id=\\"prefix__filter0_f\\" filterUnits=\\"userSpaceOnUse\\">
+    <filter id=\\"prefix__filter0_f\\" filterunits=\\"userSpaceOnUse\\">
       <feFlood result=\\"BackgroundImageFix\\" />
       <feBlend in=\\"SourceGraphic\\" in2=\\"BackgroundImageFix\\" result=\\"shape\\" />
-      <feGaussianBlur result=\\"effect1_foregroundBlur\\" stdDeviation={7} />
+      <feGaussianBlur result=\\"effect1_foregroundBlur\\" stddeviation={7} />
     </filter>
   </defs>
 </svg>"
@@ -2548,10 +2568,10 @@ exports[`Svelte > jsx > Typescript Test > AdvancedRef 1`] = `
     <input
       class=\\"input\\"
       bind:this={inputRef}
+      bind:value={name}
       on:blur={(event) => {
         onBlur();
       }}
-      bind:value={name}
     />
 
     <label for=\\"cars\\" bind:this={inputNoArgRef}> Choose a car: </label>
@@ -2662,7 +2682,11 @@ exports[`Svelte > jsx > Typescript Test > Basic Context 1`] = `
 <div>
   {myService.method(\\"hello\\") + name}
   Hello! I can run in React, Vue, Solid, or Liquid!
-  <input on:change={onChange} />
+  <input
+    on:change={(event) => {
+      onChange;
+    }}
+  />
 </div>"
 `;
 
@@ -2835,10 +2859,10 @@ exports[`Svelte > jsx > Typescript Test > BasicRef 1`] = `
     <input
       class=\\"input\\"
       bind:this={inputRef}
+      bind:value={name}
       on:blur={(event) => {
         onBlur();
       }}
-      bind:value={name}
     />
 
     <label for=\\"cars\\" bind:this={inputNoArgRef}> Choose a car: </label>
@@ -3085,10 +3109,10 @@ exports[`Svelte > jsx > Typescript Test > ContentSlotJSX 1`] = `
     name={$$slots.content ? \\"name1\\" : \\"name2\\"}
     title={$$slots.content ? \\"title1\\" : \\"title2\\"}
     {...attributes}
+    class={$$slots.content ? \`\${name}-content\` : \\"\\"}
     on:click={(event) => {
       show();
     }}
-    class={$$slots.content ? \`\${name}-content\` : \\"\\"}
   >
     {#if showContent && $$slots.content}
       <slot name=\\"content\\">{content}</slot>
@@ -3170,9 +3194,8 @@ exports[`Svelte > jsx > Typescript Test > CustomCode 1`] = `
 <div
   bind:this={elem}
   class={\\"builder-custom-code\\" + (replaceNodes ? \\" replace-nodes\\" : \\"\\")}
->
-  {@html code}
-</div>"
+  innerhtml={code}
+/>"
 `;
 
 exports[`Svelte > jsx > Typescript Test > Embed 1`] = `
@@ -3244,9 +3267,8 @@ exports[`Svelte > jsx > Typescript Test > Embed 1`] = `
 <div
   bind:this={elem}
   class={\\"builder-custom-code\\" + (replaceNodes ? \\" replace-nodes\\" : \\"\\")}
->
-  {@html code}
-</div>"
+  innerhtml={code}
+/>"
 `;
 
 exports[`Svelte > jsx > Typescript Test > Form 1`] = `
@@ -3533,10 +3555,10 @@ exports[`Svelte > jsx > Typescript Test > Form 1`] = `
   action={!sendWithJs && action}
   {method}
   {name}
+  {...attributes}
   on:submit={(event) => {
     onSubmit(event);
   }}
-  {...attributes}
 >
   {#if builderBlock && builderBlock.children}
     {#each builderBlock?.children as block, index (block.id)}
@@ -3665,11 +3687,11 @@ exports[`Svelte > jsx > Typescript Test > Image 1`] = `
         aria-role={altText ? \\"presentation\\" : undefined}
         class={\\"builder-image\\" + (_class ? \\" \\" + _class : \\"\\") + \\" img\\"}
         src={image}
+        {srcset}
+        {sizes}
         on:load={(event) => {
           setLoaded();
         }}
-        {srcset}
-        {sizes}
       />
     {/if}
     <source {srcset} />
@@ -3784,8 +3806,8 @@ exports[`Svelte > jsx > Typescript Test > Input 1`] = `
   {type}
   {name}
   {value}
-  {defaultValue}
   {required}
+  defaultvalue={defaultValue}
 />"
 `;
 
@@ -3802,9 +3824,10 @@ exports[`Svelte > jsx > Typescript Test > RawText 1`] = `
   export let text: RawTextProps[\\"text\\"];
 </script>
 
-<span class={attributes?.class || attributes?.className}
-  >{@html text || \\"\\"}</span
->"
+<span
+  class={attributes?.class || attributes?.className}
+  innerhtml={text || \\"\\"}
+/>"
 `;
 
 exports[`Svelte > jsx > Typescript Test > Section 1`] = `
@@ -3911,8 +3934,8 @@ exports[`Svelte > jsx > Typescript Test > Select 1`] = `
   {...attributes}
   {value}
   key={Builder.isEditing && defaultValue ? defaultValue : \\"default-key\\"}
-  {defaultValue}
   {name}
+  defaultvalue={defaultValue}
 >
   {#each options as option, index}
     <option value={option.value} data-index={index}>
@@ -4167,13 +4190,12 @@ exports[`Svelte > jsx > Typescript Test > Text 1`] = `
 </script>
 
 <div
-  contentEditable={allowEditingText || undefined}
   data-name={{
     test: name || \\"any name\\",
   }}
->
-  {@html text || content || name || '<p class=\\"text-lg\\">my name</p>'}
-</div>"
+  contenteditable={allowEditingText || undefined}
+  innerhtml={text || content || name || '<p class=\\"text-lg\\">my name</p>'}
+/>"
 `;
 
 exports[`Svelte > jsx > Typescript Test > Textarea 1`] = `
@@ -4195,7 +4217,13 @@ exports[`Svelte > jsx > Typescript Test > Textarea 1`] = `
   export let defaultValue: TextareaProps[\\"defaultValue\\"];
 </script>
 
-<textarea {...attributes} {placeholder} {name} {value} {defaultValue} />"
+<textarea
+  {...attributes}
+  {placeholder}
+  {name}
+  {value}
+  defaultvalue={defaultValue}
+/>"
 `;
 
 exports[`Svelte > jsx > Typescript Test > Video 1`] = `
@@ -4363,6 +4391,18 @@ exports[`Svelte > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
 <div>Hello! {name}</div>"
 `;
 
+exports[`Svelte > jsx > Typescript Test > camelCasedAttributes 1`] = `
+"<script lang=\\"ts\\">
+  import React from \\"@builder.io/react\\";
+
+  let name = \\"Steve\\";
+</script>
+
+<div>
+  <img srcset=\\"http://example.com\\" />
+</div>"
+`;
+
 exports[`Svelte > jsx > Typescript Test > class + ClassName + css 1`] = `
 "<script lang=\\"ts\\">
 </script>
@@ -5489,15 +5529,15 @@ exports[`Svelte > jsx > Typescript Test > svgComponent 1`] = `
 <svg
   fill=\\"none\\"
   role=\\"img\\"
-  viewBox={\\"0 0 \\" + 42 + \\" \\" + 42}
   width={42}
   height={42}
+  viewbox={\\"0 0 \\" + 42 + \\" \\" + 42}
 >
   <defs>
-    <filter id=\\"prefix__filter0_f\\" filterUnits=\\"userSpaceOnUse\\">
+    <filter id=\\"prefix__filter0_f\\" filterunits=\\"userSpaceOnUse\\">
       <feFlood result=\\"BackgroundImageFix\\" />
       <feBlend in=\\"SourceGraphic\\" in2=\\"BackgroundImageFix\\" result=\\"shape\\" />
-      <feGaussianBlur result=\\"effect1_foregroundBlur\\" stdDeviation={7} />
+      <feGaussianBlur result=\\"effect1_foregroundBlur\\" stddeviation={7} />
     </filter>
   </defs>
 </svg>"
@@ -5721,7 +5761,7 @@ exports[`Svelte > svelte > Javascript Test > html 1`] = `
   let html = \\"<b>bold</b>\\";
 </script>
 
-<div>{@html html}</div>"
+<div innerhtml={html} />"
 `;
 
 exports[`Svelte > svelte > Javascript Test > ifElse 1`] = `
@@ -5998,7 +6038,7 @@ exports[`Svelte > svelte > Typescript Test > html 1`] = `
   let html = \\"<b>bold</b>\\";
 </script>
 
-<div>{@html html}</div>"
+<div innerhtml={html} />"
 `;
 
 exports[`Svelte > svelte > Typescript Test > ifElse 1`] = `
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index 6fec2216fc..2c0cad9cec 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -894,8 +894,8 @@ function FormComponent(props) {
               get(body, props.errorMessagePath);
             if (message) {
               if (typeof message !== \\"string\\") {
-                /* TODO: ideally convert json to yaml so it woul dbe like          error: - email has been taken */ message =
-                  JSON.stringify(message);
+                /* TODO: ideally convert json to yaml so it woul dbe like
+          error: - email has been taken */ message = JSON.stringify(message);
               }
               setFormErrorMessage(message);
             }
@@ -1676,6 +1676,26 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`Taro > jsx > Javascript Test > camelCasedAttributes 1`] = `
+"import * as React from \\"react\\";
+import { useState } from \\"react\\";
+import React from \\"@builder.io/react\\";
+import { View, Image } from \\"@tarojs/components\\";
+
+function MyComponent(props) {
+  const [name, setName] = useState(() => \\"Steve\\");
+
+  return (
+    <View>
+      <Image srcSet=\\"http://example.com\\" />
+    </View>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`Taro > jsx > Javascript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import { View, Text } from \\"@tarojs/components\\";
@@ -4071,8 +4091,8 @@ function FormComponent(props: FormProps) {
               get(body, props.errorMessagePath);
             if (message) {
               if (typeof message !== \\"string\\") {
-                /* TODO: ideally convert json to yaml so it woul dbe like          error: - email has been taken */ message =
-                  JSON.stringify(message);
+                /* TODO: ideally convert json to yaml so it woul dbe like
+          error: - email has been taken */ message = JSON.stringify(message);
               }
               setFormErrorMessage(message);
             }
@@ -5011,6 +5031,26 @@ export default MyBasicOnUpdateReturnComponent;
 "
 `;
 
+exports[`Taro > jsx > Typescript Test > camelCasedAttributes 1`] = `
+"import * as React from \\"react\\";
+import { useState } from \\"react\\";
+import React from \\"@builder.io/react\\";
+import { View, Image } from \\"@tarojs/components\\";
+
+function MyComponent(props: any) {
+  const [name, setName] = useState(() => \\"Steve\\");
+
+  return (
+    <View>
+      <Image srcSet=\\"http://example.com\\" />
+    </View>
+  );
+}
+
+export default MyComponent;
+"
+`;
+
 exports[`Taro > jsx > Typescript Test > class + ClassName + css 1`] = `
 "import * as React from \\"react\\";
 import { View, Text } from \\"@tarojs/components\\";
diff --git a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
index 8441845daf..0fc4f8f283 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -494,8 +494,8 @@ exports[`Vue > jsx > Javascript Test > ContentSlotJSX 1`] = `
     <div
       :name=\\"$slots.content ? 'name1' : 'name2'\\"
       :title=\\"$slots.content ? 'title1' : 'title2'\\"
-      @click=\\"show()\\"
       :class=\\"_classStringToObject($slots.content ? \`\${name}-content\` : '')\\"
+      @click=\\"show()\\"
       v-bind=\\"attributes\\"
     >
       <template v-if=\\"showContent && $slots.content\\">
@@ -553,7 +553,7 @@ exports[`Vue > jsx > Javascript Test > CustomCode 1`] = `
         'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')
       )
     \\"
-    v-html=\\"code\\"
+    :innerhtml=\\"code\\"
   ></div>
 </template>
 
@@ -634,7 +634,7 @@ exports[`Vue > jsx > Javascript Test > Embed 1`] = `
         'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')
       )
     \\"
-    v-html=\\"code\\"
+    :innerhtml=\\"code\\"
   ></div>
 </template>
 
@@ -1035,9 +1035,9 @@ exports[`Vue > jsx > Javascript Test > Image 1`] = `
             )
           \\"
           :src=\\"image\\"
-          @load=\\"setLoaded()\\"
           :srcset=\\"srcset\\"
           :sizes=\\"sizes\\"
+          @load=\\"setLoaded()\\"
         />
       </template>
 
@@ -1182,8 +1182,8 @@ exports[`Vue > jsx > Javascript Test > Input 1`] = `
     :type=\\"type\\"
     :name=\\"name\\"
     :value=\\"value\\"
-    :defaultValue=\\"defaultValue\\"
     :required=\\"required\\"
+    :defaultvalue=\\"defaultValue\\"
     v-bind=\\"attributes\\"
   />
 </template>
@@ -1207,7 +1207,7 @@ exports[`Vue > jsx > Javascript Test > RawText 1`] = `
 "<template>
   <span
     :class=\\"_classStringToObject(attributes?.class || attributes?.className)\\"
-    v-html=\\"text || ''\\"
+    :innerhtml=\\"text || ''\\"
   ></span>
 </template>
 
@@ -1279,8 +1279,8 @@ exports[`Vue > jsx > Javascript Test > Select 1`] = `
   <select
     :value=\\"value\\"
     :key=\\"Builder.isEditing && defaultValue ? defaultValue : 'default-key'\\"
-    :defaultValue=\\"defaultValue\\"
     :name=\\"name\\"
+    :defaultvalue=\\"defaultValue\\"
     v-bind=\\"attributes\\"
   >
     <template :key=\\"index\\" v-for=\\"(option, index) in options\\">
@@ -1480,11 +1480,13 @@ const props = defineProps([\\"attributes\\", \\"text\\"]);
 exports[`Vue > jsx > Javascript Test > Text 1`] = `
 "<template>
   <div
-    :contentEditable=\\"allowEditingText || undefined\\"
     :data-name=\\"{
       test: name || 'any name',
     }\\"
-    v-html=\\"text || content || name || '<p class=\\\\'text-lg\\\\'>my name</p>'\\"
+    :contenteditable=\\"allowEditingText || undefined\\"
+    :innerhtml=\\"
+      text || content || name || '<p class=&quot;text-lg&quot;>my name</p>'
+    \\"
   ></div>
 </template>
 
@@ -1504,7 +1506,7 @@ exports[`Vue > jsx > Javascript Test > Textarea 1`] = `
     :placeholder=\\"placeholder\\"
     :name=\\"name\\"
     :value=\\"value\\"
-    :defaultValue=\\"defaultValue\\"
+    :defaultvalue=\\"defaultValue\\"
     v-bind=\\"attributes\\"
   ></textarea>
 </template>
@@ -1663,6 +1665,22 @@ watch(
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > camelCasedAttributes 1`] = `
+"<template>
+  <div>
+    <img srcset=\\"http://example.com\\" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from \\"vue\\";
+
+import React from \\"@builder.io/react\\";
+
+const name = ref(\\"Steve\\");
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > class + ClassName + css 1`] = `
 "<template>
   <div class=\\"test2 test div\\">
@@ -2689,12 +2707,12 @@ exports[`Vue > jsx > Javascript Test > svgComponent 1`] = `
   <svg
     fill=\\"none\\"
     role=\\"img\\"
-    :viewBox=\\"'0 0 ' + 42 + ' ' + 42\\"
     :width=\\"42\\"
     :height=\\"42\\"
+    :viewbox=\\"'0 0 ' + 42 + ' ' + 42\\"
   >
     <defs>
-      <filter id=\\"prefix__filter0_f\\" filterUnits=\\"userSpaceOnUse\\">
+      <filter id=\\"prefix__filter0_f\\" filterunits=\\"userSpaceOnUse\\">
         <feFlood result=\\"BackgroundImageFix\\"></feFlood>
         <feBlend
           in=\\"SourceGraphic\\"
@@ -2703,7 +2721,7 @@ exports[`Vue > jsx > Javascript Test > svgComponent 1`] = `
         ></feBlend>
         <feGaussianBlur
           result=\\"effect1_foregroundBlur\\"
-          :stdDeviation=\\"7\\"
+          :stddeviation=\\"7\\"
         ></feGaussianBlur>
       </filter>
     </defs>
@@ -3332,8 +3350,8 @@ exports[`Vue > jsx > Typescript Test > ContentSlotJSX 1`] = `
     <div
       :name=\\"$slots.content ? 'name1' : 'name2'\\"
       :title=\\"$slots.content ? 'title1' : 'title2'\\"
-      @click=\\"show()\\"
       :class=\\"_classStringToObject($slots.content ? \`\${name}-content\` : '')\\"
+      @click=\\"show()\\"
       v-bind=\\"attributes\\"
     >
       <template v-if=\\"showContent && $slots.content\\">
@@ -3394,7 +3412,7 @@ exports[`Vue > jsx > Typescript Test > CustomCode 1`] = `
         'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')
       )
     \\"
-    v-html=\\"code\\"
+    :innerhtml=\\"code\\"
   ></div>
 </template>
 
@@ -3479,7 +3497,7 @@ exports[`Vue > jsx > Typescript Test > Embed 1`] = `
         'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')
       )
     \\"
-    v-html=\\"code\\"
+    :innerhtml=\\"code\\"
   ></div>
 </template>
 
@@ -3888,9 +3906,9 @@ exports[`Vue > jsx > Typescript Test > Image 1`] = `
             )
           \\"
           :src=\\"image\\"
-          @load=\\"setLoaded()\\"
           :srcset=\\"srcset\\"
           :sizes=\\"sizes\\"
+          @load=\\"setLoaded()\\"
         />
       </template>
 
@@ -4056,8 +4074,8 @@ exports[`Vue > jsx > Typescript Test > Input 1`] = `
     :type=\\"type\\"
     :name=\\"name\\"
     :value=\\"value\\"
-    :defaultValue=\\"defaultValue\\"
     :required=\\"required\\"
+    :defaultvalue=\\"defaultValue\\"
     v-bind=\\"attributes\\"
   />
 </template>
@@ -4083,7 +4101,7 @@ exports[`Vue > jsx > Typescript Test > RawText 1`] = `
 "<template>
   <span
     :class=\\"_classStringToObject(attributes?.class || attributes?.className)\\"
-    v-html=\\"text || ''\\"
+    :innerhtml=\\"text || ''\\"
   ></span>
 </template>
 
@@ -4171,8 +4189,8 @@ exports[`Vue > jsx > Typescript Test > Select 1`] = `
   <select
     :value=\\"value\\"
     :key=\\"Builder.isEditing && defaultValue ? defaultValue : 'default-key'\\"
-    :defaultValue=\\"defaultValue\\"
     :name=\\"name\\"
+    :defaultvalue=\\"defaultValue\\"
     v-bind=\\"attributes\\"
   >
     <template :key=\\"index\\" v-for=\\"(option, index) in options\\">
@@ -4406,11 +4424,13 @@ const props = defineProps<ButtonProps>();
 exports[`Vue > jsx > Typescript Test > Text 1`] = `
 "<template>
   <div
-    :contentEditable=\\"allowEditingText || undefined\\"
     :data-name=\\"{
       test: name || 'any name',
     }\\"
-    v-html=\\"text || content || name || '<p class=\\\\'text-lg\\\\'>my name</p>'\\"
+    :contenteditable=\\"allowEditingText || undefined\\"
+    :innerhtml=\\"
+      text || content || name || '<p class=&quot;text-lg&quot;>my name</p>'
+    \\"
   ></div>
 </template>
 
@@ -4437,7 +4457,7 @@ exports[`Vue > jsx > Typescript Test > Textarea 1`] = `
     :placeholder=\\"placeholder\\"
     :name=\\"name\\"
     :value=\\"value\\"
-    :defaultValue=\\"defaultValue\\"
+    :defaultvalue=\\"defaultValue\\"
     v-bind=\\"attributes\\"
   ></textarea>
 </template>
@@ -4622,6 +4642,22 @@ watch(
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > camelCasedAttributes 1`] = `
+"<template>
+  <div>
+    <img srcset=\\"http://example.com\\" />
+  </div>
+</template>
+
+<script setup lang=\\"ts\\">
+import { ref } from \\"vue\\";
+
+import React from \\"@builder.io/react\\";
+
+const name = ref(\\"Steve\\");
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > class + ClassName + css 1`] = `
 "<template>
   <div class=\\"test2 test div\\">
@@ -5769,12 +5805,12 @@ exports[`Vue > jsx > Typescript Test > svgComponent 1`] = `
   <svg
     fill=\\"none\\"
     role=\\"img\\"
-    :viewBox=\\"'0 0 ' + 42 + ' ' + 42\\"
     :width=\\"42\\"
     :height=\\"42\\"
+    :viewbox=\\"'0 0 ' + 42 + ' ' + 42\\"
   >
     <defs>
-      <filter id=\\"prefix__filter0_f\\" filterUnits=\\"userSpaceOnUse\\">
+      <filter id=\\"prefix__filter0_f\\" filterunits=\\"userSpaceOnUse\\">
         <feFlood result=\\"BackgroundImageFix\\"></feFlood>
         <feBlend
           in=\\"SourceGraphic\\"
@@ -5783,7 +5819,7 @@ exports[`Vue > jsx > Typescript Test > svgComponent 1`] = `
         ></feBlend>
         <feGaussianBlur
           result=\\"effect1_foregroundBlur\\"
-          :stdDeviation=\\"7\\"
+          :stddeviation=\\"7\\"
         ></feGaussianBlur>
       </filter>
     </defs>
@@ -5865,7 +5901,7 @@ button {
 exports[`Vue > svelte > Javascript Test > basic 1`] = `
 "<template>
   <div>
-    <input @input=\\"name = $event.target.value\\" :value=\\"name\\" />
+    <input :value=\\"name\\" @input=\\"name = $event.target.value\\" />
     Hello! I can run in React, Vue, Solid, or Liquid!
   </div>
 </template>
@@ -6022,7 +6058,7 @@ function log(msg = \\"hello\\") {
 
 exports[`Vue > svelte > Javascript Test > html 1`] = `
 "<template>
-  <div v-html=\\"html\\"></div>
+  <div :innerhtml=\\"html\\"></div>
 </template>
 
 <script setup>
@@ -6108,10 +6144,10 @@ const lowercaseName = computed(() => {
 exports[`Vue > svelte > Javascript Test > reactiveWithFn 1`] = `
 "<template>
   <div>
-    <input type=\\"number\\" @input=\\"a = $event.target.value\\" :value=\\"a\\" /><input
+    <input type=\\"number\\" :value=\\"a\\" @input=\\"a = $event.target.value\\" /><input
       type=\\"number\\"
-      @input=\\"b = $event.target.value\\"
       :value=\\"b\\"
+      @input=\\"b = $event.target.value\\"
     />
     Result: {{ result }}
   </div>
@@ -6185,7 +6221,7 @@ const b = ref(12);
 exports[`Vue > svelte > Typescript Test > basic 1`] = `
 "<template>
   <div>
-    <input @input=\\"name = $event.target.value\\" :value=\\"name\\" />
+    <input :value=\\"name\\" @input=\\"name = $event.target.value\\" />
     Hello! I can run in React, Vue, Solid, or Liquid!
   </div>
 </template>
@@ -6342,7 +6378,7 @@ function log(msg = \\"hello\\") {
 
 exports[`Vue > svelte > Typescript Test > html 1`] = `
 "<template>
-  <div v-html=\\"html\\"></div>
+  <div :innerhtml=\\"html\\"></div>
 </template>
 
 <script setup lang=\\"ts\\">
@@ -6428,10 +6464,10 @@ const lowercaseName = computed(() => {
 exports[`Vue > svelte > Typescript Test > reactiveWithFn 1`] = `
 "<template>
   <div>
-    <input type=\\"number\\" @input=\\"a = $event.target.value\\" :value=\\"a\\" /><input
+    <input type=\\"number\\" :value=\\"a\\" @input=\\"a = $event.target.value\\" /><input
       type=\\"number\\"
-      @input=\\"b = $event.target.value\\"
       :value=\\"b\\"
+      @input=\\"b = $event.target.value\\"
     />
     Result: {{ result }}
   </div>
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index 731bf07a80..3043c6049f 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -597,8 +597,8 @@ exports[`Vue > jsx > Javascript Test > ContentSlotJSX 1`] = `
     v-if=\\"$slots.reference\\"
     :name=\\"$slots.content ? 'name1' : 'name2'\\"
     :title=\\"$slots.content ? 'title1' : 'title2'\\"
-    @click=\\"show()\\"
     :class=\\"_classStringToObject($slots.content ? \`\${name}-content\` : '')\\"
+    @click=\\"show()\\"
     v-bind=\\"attributes\\"
   >
     <template v-if=\\"showContent && $slots.content\\">
@@ -659,7 +659,7 @@ exports[`Vue > jsx > Javascript Test > CustomCode 1`] = `
         'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')
       )
     \\"
-    v-html=\\"code\\"
+    :innerhtml=\\"code\\"
   ></div>
 </template>
 
@@ -744,7 +744,7 @@ exports[`Vue > jsx > Javascript Test > Embed 1`] = `
         'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')
       )
     \\"
-    v-html=\\"code\\"
+    :innerhtml=\\"code\\"
   ></div>
 </template>
 
@@ -1159,9 +1159,9 @@ exports[`Vue > jsx > Javascript Test > Image 1`] = `
             )
           \\"
           :src=\\"image\\"
-          @load=\\"setLoaded()\\"
           :srcset=\\"srcset\\"
           :sizes=\\"sizes\\"
+          @load=\\"setLoaded()\\"
         />
       </template>
 
@@ -1308,8 +1308,8 @@ exports[`Vue > jsx > Javascript Test > Input 1`] = `
     :type=\\"type\\"
     :name=\\"name\\"
     :value=\\"value\\"
-    :defaultValue=\\"defaultValue\\"
     :required=\\"required\\"
+    :defaultvalue=\\"defaultValue\\"
     v-bind=\\"attributes\\"
   />
 </template>
@@ -1337,7 +1337,7 @@ exports[`Vue > jsx > Javascript Test > RawText 1`] = `
 "<template>
   <span
     :class=\\"_classStringToObject(attributes?.class || attributes?.className)\\"
-    v-html=\\"text || ''\\"
+    :innerhtml=\\"text || ''\\"
   ></span>
 </template>
 
@@ -1422,8 +1422,8 @@ exports[`Vue > jsx > Javascript Test > Select 1`] = `
   <select
     :value=\\"value\\"
     :key=\\"Builder.isEditing && defaultValue ? defaultValue : 'default-key'\\"
-    :defaultValue=\\"defaultValue\\"
     :name=\\"name\\"
+    :defaultvalue=\\"defaultValue\\"
     v-bind=\\"attributes\\"
   >
     <option
@@ -1651,11 +1651,13 @@ export default {
 exports[`Vue > jsx > Javascript Test > Text 1`] = `
 "<template>
   <div
-    :contentEditable=\\"allowEditingText || undefined\\"
     :data-name=\\"{
       test: name || 'any name',
     }\\"
-    v-html=\\"text || content || name || '<p class=\\\\'text-lg\\\\'>my name</p>'\\"
+    :contenteditable=\\"allowEditingText || undefined\\"
+    :innerhtml=\\"
+      text || content || name || '<p class=&quot;text-lg&quot;>my name</p>'
+    \\"
   ></div>
 </template>
 
@@ -1680,7 +1682,7 @@ exports[`Vue > jsx > Javascript Test > Textarea 1`] = `
     :placeholder=\\"placeholder\\"
     :name=\\"name\\"
     :value=\\"value\\"
-    :defaultValue=\\"defaultValue\\"
+    :defaultvalue=\\"defaultValue\\"
     v-bind=\\"attributes\\"
   ></textarea>
 </template>
@@ -1870,6 +1872,26 @@ export default {
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > camelCasedAttributes 1`] = `
+"<template>
+  <div>
+    <img srcset=\\"http://example.com\\" />
+  </div>
+</template>
+
+<script>
+import React from \\"@builder.io/react\\";
+
+export default {
+  name: \\"my-component\\",
+
+  data() {
+    return { name: \\"Steve\\" };
+  },
+};
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > class + ClassName + css 1`] = `
 "<template>
   <div class=\\"test2 test div\\">
@@ -3061,12 +3083,12 @@ exports[`Vue > jsx > Javascript Test > svgComponent 1`] = `
   <svg
     fill=\\"none\\"
     role=\\"img\\"
-    :viewBox=\\"'0 0 ' + 42 + ' ' + 42\\"
     :width=\\"42\\"
     :height=\\"42\\"
+    :viewbox=\\"'0 0 ' + 42 + ' ' + 42\\"
   >
     <defs>
-      <filter id=\\"prefix__filter0_f\\" filterUnits=\\"userSpaceOnUse\\">
+      <filter id=\\"prefix__filter0_f\\" filterunits=\\"userSpaceOnUse\\">
         <feFlood result=\\"BackgroundImageFix\\"></feFlood>
         <feBlend
           in=\\"SourceGraphic\\"
@@ -3075,7 +3097,7 @@ exports[`Vue > jsx > Javascript Test > svgComponent 1`] = `
         ></feBlend>
         <feGaussianBlur
           result=\\"effect1_foregroundBlur\\"
-          :stdDeviation=\\"7\\"
+          :stddeviation=\\"7\\"
         ></feGaussianBlur>
       </filter>
     </defs>
@@ -3839,8 +3861,8 @@ exports[`Vue > jsx > Typescript Test > ContentSlotJSX 1`] = `
     v-if=\\"$slots.reference\\"
     :name=\\"$slots.content ? 'name1' : 'name2'\\"
     :title=\\"$slots.content ? 'title1' : 'title2'\\"
-    @click=\\"show()\\"
     :class=\\"_classStringToObject($slots.content ? \`\${name}-content\` : '')\\"
+    @click=\\"show()\\"
     v-bind=\\"attributes\\"
   >
     <template v-if=\\"showContent && $slots.content\\">
@@ -3905,7 +3927,7 @@ exports[`Vue > jsx > Typescript Test > CustomCode 1`] = `
         'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')
       )
     \\"
-    v-html=\\"code\\"
+    :innerhtml=\\"code\\"
   ></div>
 </template>
 
@@ -3995,7 +4017,7 @@ exports[`Vue > jsx > Typescript Test > Embed 1`] = `
         'builder-custom-code' + (replaceNodes ? ' replace-nodes' : '')
       )
     \\"
-    v-html=\\"code\\"
+    :innerhtml=\\"code\\"
   ></div>
 </template>
 
@@ -4439,9 +4461,9 @@ exports[`Vue > jsx > Typescript Test > Image 1`] = `
             )
           \\"
           :src=\\"image\\"
-          @load=\\"setLoaded()\\"
           :srcset=\\"srcset\\"
           :sizes=\\"sizes\\"
+          @load=\\"setLoaded()\\"
         />
       </template>
 
@@ -4624,8 +4646,8 @@ exports[`Vue > jsx > Typescript Test > Input 1`] = `
     :type=\\"type\\"
     :name=\\"name\\"
     :value=\\"value\\"
-    :defaultValue=\\"defaultValue\\"
     :required=\\"required\\"
+    :defaultvalue=\\"defaultValue\\"
     v-bind=\\"attributes\\"
   />
 </template>
@@ -4663,7 +4685,7 @@ exports[`Vue > jsx > Typescript Test > RawText 1`] = `
 "<template>
   <span
     :class=\\"_classStringToObject(attributes?.class || attributes?.className)\\"
-    v-html=\\"text || ''\\"
+    :innerhtml=\\"text || ''\\"
   ></span>
 </template>
 
@@ -4765,8 +4787,8 @@ exports[`Vue > jsx > Typescript Test > Select 1`] = `
   <select
     :value=\\"value\\"
     :key=\\"Builder.isEditing && defaultValue ? defaultValue : 'default-key'\\"
-    :defaultValue=\\"defaultValue\\"
     :name=\\"name\\"
+    :defaultvalue=\\"defaultValue\\"
     v-bind=\\"attributes\\"
   >
     <option
@@ -5031,11 +5053,13 @@ export default {
 exports[`Vue > jsx > Typescript Test > Text 1`] = `
 "<template>
   <div
-    :contentEditable=\\"allowEditingText || undefined\\"
     :data-name=\\"{
       test: name || 'any name',
     }\\"
-    v-html=\\"text || content || name || '<p class=\\\\'text-lg\\\\'>my name</p>'\\"
+    :contenteditable=\\"allowEditingText || undefined\\"
+    :innerhtml=\\"
+      text || content || name || '<p class=&quot;text-lg&quot;>my name</p>'
+    \\"
   ></div>
 </template>
 
@@ -5068,7 +5092,7 @@ exports[`Vue > jsx > Typescript Test > Textarea 1`] = `
     :placeholder=\\"placeholder\\"
     :name=\\"name\\"
     :value=\\"value\\"
-    :defaultValue=\\"defaultValue\\"
+    :defaultvalue=\\"defaultValue\\"
     v-bind=\\"attributes\\"
   ></textarea>
 </template>
@@ -5302,6 +5326,26 @@ export default {
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > camelCasedAttributes 1`] = `
+"<template>
+  <div>
+    <img srcset=\\"http://example.com\\" />
+  </div>
+</template>
+
+<script lang=\\"ts\\">
+import React from \\"@builder.io/react\\";
+
+export default {
+  name: \\"my-component\\",
+
+  data() {
+    return { name: \\"Steve\\" };
+  },
+};
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > class + ClassName + css 1`] = `
 "<template>
   <div class=\\"test2 test div\\">
@@ -6611,12 +6655,12 @@ exports[`Vue > jsx > Typescript Test > svgComponent 1`] = `
   <svg
     fill=\\"none\\"
     role=\\"img\\"
-    :viewBox=\\"'0 0 ' + 42 + ' ' + 42\\"
     :width=\\"42\\"
     :height=\\"42\\"
+    :viewbox=\\"'0 0 ' + 42 + ' ' + 42\\"
   >
     <defs>
-      <filter id=\\"prefix__filter0_f\\" filterUnits=\\"userSpaceOnUse\\">
+      <filter id=\\"prefix__filter0_f\\" filterunits=\\"userSpaceOnUse\\">
         <feFlood result=\\"BackgroundImageFix\\"></feFlood>
         <feBlend
           in=\\"SourceGraphic\\"
@@ -6625,7 +6669,7 @@ exports[`Vue > jsx > Typescript Test > svgComponent 1`] = `
         ></feBlend>
         <feGaussianBlur
           result=\\"effect1_foregroundBlur\\"
-          :stdDeviation=\\"7\\"
+          :stddeviation=\\"7\\"
         ></feGaussianBlur>
       </filter>
     </defs>
@@ -6729,7 +6773,7 @@ button {
 exports[`Vue > svelte > Javascript Test > basic 1`] = `
 "<template>
   <div>
-    <input @input=\\"name = $event.target.value\\" :value=\\"name\\" />
+    <input :value=\\"name\\" @input=\\"name = $event.target.value\\" />
     Hello! I can run in React, Vue, Solid, or Liquid!
   </div>
 </template>
@@ -6922,7 +6966,7 @@ export default {
 
 exports[`Vue > svelte > Javascript Test > html 1`] = `
 "<template>
-  <div v-html=\\"html\\"></div>
+  <div :innerhtml=\\"html\\"></div>
 </template>
 
 <script>
@@ -7028,10 +7072,10 @@ export default {
 exports[`Vue > svelte > Javascript Test > reactiveWithFn 1`] = `
 "<template>
   <div>
-    <input type=\\"number\\" @input=\\"a = $event.target.value\\" :value=\\"a\\" /><input
+    <input type=\\"number\\" :value=\\"a\\" @input=\\"a = $event.target.value\\" /><input
       type=\\"number\\"
-      @input=\\"b = $event.target.value\\"
       :value=\\"b\\"
+      @input=\\"b = $event.target.value\\"
     />
     Result: {{ result }}
   </div>
@@ -7133,7 +7177,7 @@ export default {
 exports[`Vue > svelte > Typescript Test > basic 1`] = `
 "<template>
   <div>
-    <input @input=\\"name = $event.target.value\\" :value=\\"name\\" />
+    <input :value=\\"name\\" @input=\\"name = $event.target.value\\" />
     Hello! I can run in React, Vue, Solid, or Liquid!
   </div>
 </template>
@@ -7326,7 +7370,7 @@ export default {
 
 exports[`Vue > svelte > Typescript Test > html 1`] = `
 "<template>
-  <div v-html=\\"html\\"></div>
+  <div :innerhtml=\\"html\\"></div>
 </template>
 
 <script lang=\\"ts\\">
@@ -7432,10 +7476,10 @@ export default {
 exports[`Vue > svelte > Typescript Test > reactiveWithFn 1`] = `
 "<template>
   <div>
-    <input type=\\"number\\" @input=\\"a = $event.target.value\\" :value=\\"a\\" /><input
+    <input type=\\"number\\" :value=\\"a\\" @input=\\"a = $event.target.value\\" /><input
       type=\\"number\\"
-      @input=\\"b = $event.target.value\\"
       :value=\\"b\\"
+      @input=\\"b = $event.target.value\\"
     />
     Result: {{ result }}
   </div>
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index ebf77dd131..4f77fe584b 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -7338,6 +7338,98 @@ customElements.define(
 "
 `;
 
+exports[`webcomponent > jsx > Javascript Test > camelCasedAttributes 1`] = `
+"import React from \\"@builder.io/react\\";
+
+/**
+ * Usage:
+ *
+ *  <my-component></my-component>
+ *
+ */
+class MyComponent extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = { name: \\"Steve\\" };
+    if (!this.props) {
+      this.props = {};
+    }
+
+    // used to keep track of all nodes created by show/for
+    this.nodesToDestroy = [];
+    // batch updates
+    this.pendingUpdate = false;
+
+    if (undefined) {
+      this.attachShadow({ mode: \\"open\\" });
+    }
+  }
+
+  destroyAnyNodes() {
+    // destroy current view template refs before rendering again
+    this.nodesToDestroy.forEach((el) => el.remove());
+    this.nodesToDestroy = [];
+  }
+
+  connectedCallback() {
+    this._root.innerHTML = \`
+      <div>
+        <img srcset=\\"http://example.com\\" />
+      </div>\`;
+    this.pendingUpdate = true;
+
+    this.render();
+    this.onMount();
+    this.pendingUpdate = false;
+    this.update();
+  }
+
+  onMount() {}
+
+  onUpdate() {}
+
+  update() {
+    if (this.pendingUpdate === true) {
+      return;
+    }
+    this.pendingUpdate = true;
+    this.render();
+    this.onUpdate();
+    this.pendingUpdate = false;
+  }
+
+  render() {
+    // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+    this.destroyAnyNodes();
+    this.updateBindings();
+  }
+
+  updateBindings() {}
+
+  // Helper to render content
+  renderTextNode(el, text) {
+    const textNode = document.createTextNode(text);
+    if (el?.scope) {
+      textNode.scope = el.scope;
+    }
+    if (el?.context) {
+      textNode.context = el.context;
+    }
+    el.after(textNode);
+    this.nodesToDestroy.push(el.nextSibling);
+  }
+}
+
+customElements.define(\\"my-component\\", MyComponent);
+"
+`;
+
 exports[`webcomponent > jsx > Javascript Test > class + ClassName + css 1`] = `
 "/**
  * Usage:
@@ -19942,6 +20034,98 @@ customElements.define(
 "
 `;
 
+exports[`webcomponent > jsx > Typescript Test > camelCasedAttributes 1`] = `
+"import React from \\"@builder.io/react\\";
+
+/**
+ * Usage:
+ *
+ *  <my-component></my-component>
+ *
+ */
+class MyComponent extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = { name: \\"Steve\\" };
+    if (!this.props) {
+      this.props = {};
+    }
+
+    // used to keep track of all nodes created by show/for
+    this.nodesToDestroy = [];
+    // batch updates
+    this.pendingUpdate = false;
+
+    if (undefined) {
+      this.attachShadow({ mode: \\"open\\" });
+    }
+  }
+
+  destroyAnyNodes() {
+    // destroy current view template refs before rendering again
+    this.nodesToDestroy.forEach((el) => el.remove());
+    this.nodesToDestroy = [];
+  }
+
+  connectedCallback() {
+    this._root.innerHTML = \`
+      <div>
+        <img srcset=\\"http://example.com\\" />
+      </div>\`;
+    this.pendingUpdate = true;
+
+    this.render();
+    this.onMount();
+    this.pendingUpdate = false;
+    this.update();
+  }
+
+  onMount() {}
+
+  onUpdate() {}
+
+  update() {
+    if (this.pendingUpdate === true) {
+      return;
+    }
+    this.pendingUpdate = true;
+    this.render();
+    this.onUpdate();
+    this.pendingUpdate = false;
+  }
+
+  render() {
+    // re-rendering needs to ensure that all nodes generated by for/show are refreshed
+    this.destroyAnyNodes();
+    this.updateBindings();
+  }
+
+  updateBindings() {}
+
+  // Helper to render content
+  renderTextNode(el, text) {
+    const textNode = document.createTextNode(text);
+    if (el?.scope) {
+      textNode.scope = el.scope;
+    }
+    if (el?.context) {
+      textNode.context = el.context;
+    }
+    el.after(textNode);
+    this.nodesToDestroy.push(el.nextSibling);
+  }
+}
+
+customElements.define(\\"my-component\\", MyComponent);
+"
+`;
+
 exports[`webcomponent > jsx > Typescript Test > class + ClassName + css 1`] = `
 "/**
  * Usage:
diff --git a/packages/core/src/__tests__/data/map-camel-cased-attributes.raw.tsx b/packages/core/src/__tests__/data/map-camel-cased-attributes.raw.tsx
new file mode 100644
index 0000000000..08279084c9
--- /dev/null
+++ b/packages/core/src/__tests__/data/map-camel-cased-attributes.raw.tsx
@@ -0,0 +1,12 @@
+import { useState } from "@builder.io/mitosis";
+import React from '@builder.io/react'
+
+export default function MyComponent(props) {
+  const [name, setName] = useState("Steve");
+
+  return (
+    <div>
+      <img srcSet="http://example.com" />    
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/packages/core/src/__tests__/shared.ts b/packages/core/src/__tests__/shared.ts
index 263c1c2820..5fb26351e1 100644
--- a/packages/core/src/__tests__/shared.ts
+++ b/packages/core/src/__tests__/shared.ts
@@ -23,6 +23,7 @@ const expressionState = getRawFile('./data/expression-state.raw.tsx');
 const contentState = getRawFile('./data/context-state.raw.tsx');
 
 const basic = getRawFile('./data/basic.raw.tsx');
+const camelCasedAttributes = getRawFile('./data/map-camel-cased-attributes.raw.tsx')
 const basicAttribute = getRawFile('./data/basic-attribute.raw.tsx');
 const basicMitosis = getRawFile('./data/basic-custom-mitosis-package.raw.tsx');
 const basicChildComponent = getRawFile('./data/basic-child-component.raw.tsx');
@@ -199,6 +200,7 @@ const BASIC_TESTS: Tests = {
   referencingFunInsideHook,
   svgComponent,
   renderBlock,
+  camelCasedAttributes
 };
 
 const SLOTS_TESTS: Tests = {
diff --git a/packages/core/src/generators/alpine/generate.ts b/packages/core/src/generators/alpine/generate.ts
index b0657326d1..1932d5d227 100644
--- a/packages/core/src/generators/alpine/generate.ts
+++ b/packages/core/src/generators/alpine/generate.ts
@@ -22,6 +22,8 @@ import { hasRootUpdateHook, renderUpdateHooks } from './render-update-hooks';
 import { renderMountHook } from './render-mount-hook';
 import { babelTransformCode } from '../../helpers/babel-transform';
 import { replaceIdentifiers } from '../../helpers/replace-identifiers';
+import { CAMEL_CASE_PLUGIN } from 'src/helpers/plugins/map-camel-cased-attributes';
+import { mergeOptions } from 'src/helpers/merge-options';
 
 export interface ToAlpineOptions extends BaseTranspilerOptions {
   /**
@@ -190,9 +192,14 @@ const blockToAlpine = (json: MitosisNode | ForNode, options: ToAlpineOptions = {
       }>`;
 };
 
+const DEFAULT_OPTIONS:ToAlpineOptions = {
+  plugins: [CAMEL_CASE_PLUGIN]
+}
+
 export const componentToAlpine: TranspilerGenerator<ToAlpineOptions> =
-  (options = {}) =>
+  (userOptions = {}) =>
   ({ component }) => {
+    const options = mergeOptions(DEFAULT_OPTIONS, userOptions)
     let json = fastClone(component);
     if (options.plugins) {
       json = runPreJsonPlugins(json, options.plugins);
diff --git a/packages/core/src/generators/lit/generate.ts b/packages/core/src/generators/lit/generate.ts
index 1ce9a06a63..499657db28 100644
--- a/packages/core/src/generators/lit/generate.ts
+++ b/packages/core/src/generators/lit/generate.ts
@@ -25,6 +25,8 @@ import { getRefs } from '../../helpers/get-refs';
 import { camelCase, some } from 'lodash';
 import { isUpperCase } from '../../helpers/is-upper-case';
 import { has } from '../../helpers/has';
+import { CAMEL_CASE_PLUGIN } from 'src/helpers/plugins/map-camel-cased-attributes';
+import { mergeOptions } from 'src/helpers/merge-options';
 
 const getCustomTagName = (name: string, options: ToLitOptions) => {
   if (!name || !isUpperCase(name[0])) {
@@ -127,8 +129,14 @@ function processBinding(code: string) {
 }
 
 export const componentToLit: TranspilerGenerator<ToLitOptions> =
-  (options = {}) =>
+  (userOptions = {}) =>
   ({ component }) => {
+    const DEFAULT_OPTIONS:ToLitOptions = {
+      plugins: [CAMEL_CASE_PLUGIN]
+    }
+
+    const options = mergeOptions(DEFAULT_OPTIONS, userOptions)
+
     let json = fastClone(component);
     if (options.plugins) {
       json = runPreJsonPlugins(json, options.plugins);
diff --git a/packages/core/src/generators/marko/generate.ts b/packages/core/src/generators/marko/generate.ts
index 65936f3ba6..68f9b8159a 100644
--- a/packages/core/src/generators/marko/generate.ts
+++ b/packages/core/src/generators/marko/generate.ts
@@ -25,6 +25,8 @@ import { getRefs } from '../../helpers/get-refs';
 import { camelCase } from 'lodash';
 import hash from 'hash-sum';
 import { getForArguments } from '../../helpers/nodes/for';
+import { mergeOptions } from 'src/helpers/merge-options';
+import { CAMEL_CASE_PLUGIN } from 'src/helpers/plugins/map-camel-cased-attributes';
 
 export interface ToMarkoOptions extends BaseTranspilerOptions {}
 
@@ -147,14 +149,20 @@ function processBinding(
   }
 }
 
+
 export const componentToMarko: TranspilerGenerator<ToMarkoOptions> =
   (userOptions = {}) =>
   ({ component }) => {
+    const DEFAULT_OPTIONS:InternalToMarkoOptions = {
+      component,
+      plugins: [CAMEL_CASE_PLUGIN]
+    }
     let json = fastClone(component);
-    const options: InternalToMarkoOptions = {
-      ...userOptions,
-      component: json,
-    };
+    // const options: InternalToMarkoOptions = {
+    //   ...userOptions,
+    //   component: json,
+    // };
+    const options: InternalToMarkoOptions = mergeOptions(DEFAULT_OPTIONS, userOptions);
     if (options.plugins) {
       json = runPreJsonPlugins(json, options.plugins);
     }
diff --git a/packages/core/src/generators/qwik/component-generator.ts b/packages/core/src/generators/qwik/component-generator.ts
index c2b92af334..38976f3198 100644
--- a/packages/core/src/generators/qwik/component-generator.ts
+++ b/packages/core/src/generators/qwik/component-generator.ts
@@ -17,8 +17,9 @@ import {
 } from '../../modules/plugins';
 import traverse from 'traverse';
 import { stableInject } from './stable-inject';
+import { mergeOptions } from 'src/helpers/merge-options';
+import { CAMEL_CASE_PLUGIN } from 'src/helpers/plugins/map-camel-cased-attributes';
 
-Error.stackTraceLimit = 9999;
 
 // TODO(misko): styles are not processed.
 
@@ -45,19 +46,26 @@ type StateValue = any;
  */
 type StateValues = Record<PropertyName, StateValue>;
 
+const DEFAULT_OPTIONS:ToQwikOptions = {
+  plugins: [CAMEL_CASE_PLUGIN]
+}
+
 export const componentToQwik: TranspilerGenerator<ToQwikOptions> =
   (userOptions = {}) =>
   ({ component: _component, path }): string => {
     // Make a copy we can safely mutate, similar to babel's toolchain
     let component = fastClone(_component);
-    if (userOptions.plugins) {
-      component = runPreJsonPlugins(component, userOptions.plugins);
+
+    const options = mergeOptions(DEFAULT_OPTIONS, userOptions)
+
+    if (options.plugins) {
+      component = runPreJsonPlugins(component, options.plugins);
     }
     addPreventDefault(component);
-    if (userOptions.plugins) {
-      component = runPostJsonPlugins(component, userOptions.plugins);
+    if (options.plugins) {
+      component = runPostJsonPlugins(component, options.plugins);
     }
-    const isTypeScript = !!userOptions.typescript;
+    const isTypeScript = !!options.typescript;
     const file = new File(
       component.name + (isTypeScript ? '.ts' : '.js'),
       {
@@ -115,9 +123,9 @@ export const componentToQwik: TranspilerGenerator<ToQwikOptions> =
       emitStyles(file, css);
       DEBUG && file.exportConst('COMPONENT', JSON.stringify(component));
       let sourceFile = file.toString();
-      if (userOptions.plugins) {
-        sourceFile = runPreCodePlugins(sourceFile, userOptions.plugins);
-        sourceFile = runPostCodePlugins(sourceFile, userOptions.plugins);
+      if (options.plugins) {
+        sourceFile = runPreCodePlugins(sourceFile, options.plugins);
+        sourceFile = runPostCodePlugins(sourceFile, options.plugins);
       }
       return sourceFile;
     } catch (e) {
diff --git a/packages/core/src/generators/solid/index.ts b/packages/core/src/generators/solid/index.ts
index edea8e896c..bb5f58d454 100644
--- a/packages/core/src/generators/solid/index.ts
+++ b/packages/core/src/generators/solid/index.ts
@@ -33,6 +33,7 @@ import { hasGetContext } from '../helpers/context';
 import { blockToSolid } from './blocks';
 import { createSingleBinding } from '../../helpers/bindings';
 import { isRootTextNode } from '../../helpers/is-root-text-node';
+import { CAMEL_CASE_PLUGIN } from 'src/helpers/plugins/map-camel-cased-attributes';
 
 // Transform <foo.bar key={value} /> to <Dynamic compnent={foo.bar} key={value} />
 function processDynamicComponents(json: MitosisComponent, options: ToSolidOptions) {
@@ -88,7 +89,7 @@ function addProviderComponents(json: MitosisComponent, options: ToSolidOptions)
 const DEFAULT_OPTIONS: ToSolidOptions = {
   state: 'signals',
   stylesType: 'styled-components',
-  plugins: [],
+  plugins: [CAMEL_CASE_PLUGIN],
 };
 
 export const componentToSolid: TranspilerGenerator<Partial<ToSolidOptions>> =
diff --git a/packages/core/src/generators/stencil/generate.ts b/packages/core/src/generators/stencil/generate.ts
index 0f3f53d885..4b820c21e4 100644
--- a/packages/core/src/generators/stencil/generate.ts
+++ b/packages/core/src/generators/stencil/generate.ts
@@ -22,6 +22,8 @@ import { collectCss } from '../../helpers/styles/collect-css';
 import { indent } from '../../helpers/indent';
 import { mapRefs } from '../../helpers/map-refs';
 import { getForArguments } from '../../helpers/nodes/for';
+import { CAMEL_CASE_PLUGIN } from 'src/helpers/plugins/map-camel-cased-attributes';
+import { mergeOptions } from 'src/helpers/merge-options';
 
 export interface ToStencilOptions extends BaseTranspilerOptions {}
 
@@ -96,9 +98,14 @@ function processBinding(code: string) {
   return stripStateAndPropsRefs(code, { replaceWith: 'this.' });
 }
 
+const DEFAULT_OPTIONS:ToStencilOptions = {
+  plugins: [CAMEL_CASE_PLUGIN]
+}
+
 export const componentToStencil: TranspilerGenerator<ToStencilOptions> =
-  (options = {}) =>
+  (userOptions = {}) =>
   ({ component }) => {
+    const options = mergeOptions(DEFAULT_OPTIONS, userOptions)
     let json = fastClone(component);
     if (options.plugins) {
       json = runPreJsonPlugins(json, options.plugins);
diff --git a/packages/core/src/generators/svelte/svelte.ts b/packages/core/src/generators/svelte/svelte.ts
index 71bf9005ab..0dc0a4f01d 100644
--- a/packages/core/src/generators/svelte/svelte.ts
+++ b/packages/core/src/generators/svelte/svelte.ts
@@ -27,6 +27,7 @@ import { flow, pipe } from 'fp-ts/lib/function';
 import { hasGetContext, hasSetContext } from '../helpers/context';
 import { isSlotProperty } from '../../helpers/slots';
 import { FUNCTION_HACK_PLUGIN } from '../helpers/functions';
+import {CAMEL_CASE_PLUGIN} from '../../helpers/plugins/map-camel-cased-attributes'
 import { mergeOptions } from '../../helpers/merge-options';
 import { CODE_PROCESSOR_PLUGIN } from '../../helpers/plugins/process-code';
 import { stripStateAndProps } from './helpers';
@@ -107,7 +108,7 @@ const useBindValue = (json: MitosisComponent, options: ToSvelteOptions) => {
 const DEFAULT_OPTIONS: ToSvelteOptions = {
   stateType: 'variables',
   prettier: true,
-  plugins: [FUNCTION_HACK_PLUGIN],
+  plugins: [FUNCTION_HACK_PLUGIN, CAMEL_CASE_PLUGIN],
 };
 
 export const componentToSvelte: TranspilerGenerator<ToSvelteOptions> =
@@ -146,7 +147,7 @@ export const componentToSvelte: TranspilerGenerator<ToSvelteOptions> =
       .filter((x) => !props.includes(x));
 
     json = runPostJsonPlugins(json, options.plugins);
-
+    
     const css = collectCss(json);
     stripMetaProperties(json);
 
diff --git a/packages/core/src/generators/vue/vue.ts b/packages/core/src/generators/vue/vue.ts
index bba823f672..98bcfbbe13 100644
--- a/packages/core/src/generators/vue/vue.ts
+++ b/packages/core/src/generators/vue/vue.ts
@@ -13,12 +13,13 @@ import {
   runPreCodePlugins,
   runPreJsonPlugins,
 } from '../../modules/plugins';
+import {CAMEL_CASE_PLUGIN} from '../../helpers/plugins/map-camel-cased-attributes'
 import { stripMetaProperties } from '../../helpers/strip-meta-properties';
 import { isMitosisNode } from '../../helpers/is-mitosis-node';
 import traverse from 'traverse';
 import { pickBy, size, uniq } from 'lodash';
 import { processHttpRequests } from '../../helpers/process-http-requests';
-import { TranspilerGenerator } from '../../types/transpiler';
+import { BaseTranspilerOptions, TranspilerGenerator } from '../../types/transpiler';
 import { pipe } from 'fp-ts/lib/function';
 import { isSlotProperty } from '../../helpers/slots';
 import { FUNCTION_HACK_PLUGIN } from '../helpers/functions';
@@ -95,7 +96,7 @@ const onUpdatePlugin: Plugin = (options) => ({
 });
 
 const BASE_OPTIONS: ToVueOptions = {
-  plugins: [],
+  plugins: [CAMEL_CASE_PLUGIN],
   vueVersion: 2,
   api: 'options',
 };
@@ -276,11 +277,19 @@ const componentToVue: TranspilerGenerator<Partial<ToVueOptions>> =
     return str;
   };
 
-export const componentToVue2 = (vueOptions?: VueOptsWithoutVersion) =>
-  componentToVue({ ...vueOptions, vueVersion: 2 });
 
-export const componentToVue3 = (vueOptions?: VueOptsWithoutVersion) =>
-  componentToVue({ ...vueOptions, vueVersion: 3 });
+export const componentToVue2 = (vueOptions?: VueOptsWithoutVersion) =>{
+  const options = mergeOptions<ToVueOptions>(BASE_OPTIONS, { ...vueOptions, vueVersion: 2 })
+  return componentToVue(options);
+}
+
+
+export const componentToVue3 = (vueOptions?: VueOptsWithoutVersion) =>{
+  const options = mergeOptions<ToVueOptions>(BASE_OPTIONS, { ...vueOptions, vueVersion: 3 })
+  return componentToVue(options);
+}
+
+
 
 // Remove unused artifacts like empty script or style tags
 const removePatterns = [
diff --git a/packages/core/src/helpers/is-first-letter-lower-case.ts b/packages/core/src/helpers/is-first-letter-lower-case.ts
new file mode 100644
index 0000000000..7c27811ca9
--- /dev/null
+++ b/packages/core/src/helpers/is-first-letter-lower-case.ts
@@ -0,0 +1,5 @@
+export const isFirstLetterLowerCase = (elementName: string) => {
+    const firstLetter = elementName[0]
+
+    return firstLetter >= 'a' && firstLetter <= 'z'
+}
\ No newline at end of file
diff --git a/packages/core/src/helpers/map-camel-cased-html-attributes.ts b/packages/core/src/helpers/map-camel-cased-html-attributes.ts
new file mode 100644
index 0000000000..dfedb85b6a
--- /dev/null
+++ b/packages/core/src/helpers/map-camel-cased-html-attributes.ts
@@ -0,0 +1,44 @@
+import {isFirstLetterLowerCase} from './is-first-letter-lower-case'
+import { MitosisNode } from '../types/mitosis-node';
+import fs from 'fs'
+/*
+ * This function does side-effects on `json`
+ */
+export const mapCamelCasedHtmlAttributes = (json: MitosisNode) => {
+  const isBuiltInHtmlElement = isFirstLetterLowerCase(json.name) && !json.name.includes('-');
+
+  if (!isBuiltInHtmlElement) {
+    return;
+  }
+
+  for (let key in json.bindings) {
+    const isBuiltInHtmlAttrName = !key.includes('-')
+
+    if (!isBuiltInHtmlAttrName) continue
+
+    const newKey = key.toLowerCase() as keyof MitosisNode['bindings']
+
+    if(newKey in json.bindings) {
+      continue
+    }
+    json.bindings[newKey] = json.bindings[key];
+    delete json.bindings[key];
+
+  }  
+
+  for (let key in json.properties) {
+    const isBuiltInHtmlAttrName = !key.includes('-')
+
+    if (!isBuiltInHtmlAttrName) continue
+
+    const newKey = key.toLowerCase()
+
+    if(newKey in json.properties) {
+      continue
+    }
+
+    json.properties[newKey] = json.properties[key];
+    delete json.properties[key];
+
+  }  
+}
\ No newline at end of file
diff --git a/packages/core/src/helpers/plugins/map-camel-cased-attributes.ts b/packages/core/src/helpers/plugins/map-camel-cased-attributes.ts
new file mode 100644
index 0000000000..a8d619c47e
--- /dev/null
+++ b/packages/core/src/helpers/plugins/map-camel-cased-attributes.ts
@@ -0,0 +1,12 @@
+import { Plugin } from '../../types/plugins';
+import { traverseNodes } from '../traverse-nodes';
+import {mapCamelCasedHtmlAttributes} from '../map-camel-cased-html-attributes'
+export const CAMEL_CASE_PLUGIN: Plugin = () => ({
+  json: {
+    post: (json) => {
+      traverseNodes(json, (node) => {
+        mapCamelCasedHtmlAttributes(node);
+      });
+    },
+  },
+})
\ No newline at end of file