diff --git a/.changeset/clean-cobras-know.md b/.changeset/clean-cobras-know.md
new file mode 100644
index 0000000000..7e55cccc2e
--- /dev/null
+++ b/.changeset/clean-cobras-know.md
@@ -0,0 +1,31 @@
+---
+'@builder.io/mitosis': patch
+---
+
+[All] Refactored `useMetadata` hook to enable import resolution instead of simple `JSON5` parsing.
+
+You could use a normal JS `Object` and import it inside your `*.lite.tsx` file like this:
+
+```ts
+// data.ts
+
+export const myMetadata: Record<string, string | number> = {
+  a: 'b',
+  c: 1,
+};
+```
+
+```tsx
+// my-button.lite.tsx
+import { useMetadata } from '@builder.io/mitosis';
+import { myMetadata } from './data.ts';
+
+useMetadata({
+  x: 'y',
+  my: myMetadata,
+});
+
+export default function MyButton() {
+  return <button></button>;
+}
+```
diff --git a/examples/metdata/.eslintrc.js b/examples/metdata/.eslintrc.js
new file mode 100644
index 0000000000..6251926add
--- /dev/null
+++ b/examples/metdata/.eslintrc.js
@@ -0,0 +1,18 @@
+module.exports = {
+  env: {
+    browser: true,
+  },
+  plugins: ["@builder.io/mitosis"],
+  parser: "@typescript-eslint/parser",
+  extends: [],
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  rules: {
+    "@builder.io/mitosis/no-conditional-render": "warn",
+  },
+};
diff --git a/examples/metdata/.gitignore b/examples/metdata/.gitignore
new file mode 100644
index 0000000000..6caf68aff4
--- /dev/null
+++ b/examples/metdata/.gitignore
@@ -0,0 +1 @@
+output
\ No newline at end of file
diff --git a/examples/metdata/README.md b/examples/metdata/README.md
new file mode 100644
index 0000000000..9e598a89e6
--- /dev/null
+++ b/examples/metdata/README.md
@@ -0,0 +1,3 @@
+# Metadata example for Mitosis
+
+This is an example to showcase the ``useMetadata`` hook. You can use this to set predefined configuration parameters for each component. Or you can add additional parameters to use them in a plugin.
diff --git a/examples/metdata/mitosis.config.js b/examples/metdata/mitosis.config.js
new file mode 100644
index 0000000000..217056e20c
--- /dev/null
+++ b/examples/metdata/mitosis.config.js
@@ -0,0 +1,37 @@
+const metadataPlugin = () => ({
+  code: {
+    pre: (code, json) => {
+      if (json.meta.useMetadata) {
+        return `
+          /**
+          useMetadata:
+          ${JSON.stringify(json.meta.useMetadata)}
+          */
+          
+          ${code}`;
+      }
+
+      return code;
+    },
+  },
+});
+
+module.exports = {
+  files: 'src/**',
+  commonOptions: {
+    plugins: [metadataPlugin],
+  },
+  targets: [
+    'react',
+    // still unsupported
+    // 'qwik',
+    // 'builder',
+    'vue',
+    'html',
+    // TO-DO: fix error causing svelte output not to work
+    // 'svelte',
+    'solid',
+    'angular',
+    'webcomponent',
+  ],
+};
diff --git a/examples/metdata/package.json b/examples/metdata/package.json
new file mode 100644
index 0000000000..64e6eb4d19
--- /dev/null
+++ b/examples/metdata/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@builder.io/metadata-example",
+  "private": true,
+  "scripts": {
+    "build": "mitosis build",
+    "lint": "eslint"
+  },
+  "exports": {
+    "./react/*": "./dist/react/src/*",
+    "./qwik/*": "./dist/qwik/src/*",
+    "./vue/*": "./dist/vue/src/*",
+    "./svelte/*": "./dist/svelte/src/*",
+    "./angular/*": "./dist/angular/src/*",
+    "./html/*": "./dist/html/src/*",
+    "./solid/*": "./dist/solid/src/*"
+  },
+  "dependencies": {
+    "@builder.io/mitosis": "workspace:*",
+    "@builder.io/mitosis-cli": "workspace:*",
+    "eslint": "^7.21.0"
+  }
+}
diff --git a/examples/metdata/src/components/data.ts b/examples/metdata/src/components/data.ts
new file mode 100644
index 0000000000..a363ffeec9
--- /dev/null
+++ b/examples/metdata/src/components/data.ts
@@ -0,0 +1,13 @@
+import { ComponentMetadata } from '@builder.io/mitosis';
+import { customMetaData } from '../shared/data';
+
+export const metadata: ComponentMetadata = {
+  regularKey: 'abc',
+  'some-key': customMetaData,
+  react: {
+    forwardRef: 'xxx',
+  },
+  vue: {
+    customKey: 'yyy',
+  },
+};
diff --git a/examples/metdata/src/components/metadata.lite.tsx b/examples/metdata/src/components/metadata.lite.tsx
new file mode 100644
index 0000000000..a143f9a0b1
--- /dev/null
+++ b/examples/metdata/src/components/metadata.lite.tsx
@@ -0,0 +1,8 @@
+import { useMetadata } from '@builder.io/mitosis';
+import { metadata } from './data';
+
+useMetadata({ ...metadata });
+
+export default function MetadataExample() {
+  return <div>Metadata</div>;
+}
diff --git a/examples/metdata/src/shared/data.ts b/examples/metdata/src/shared/data.ts
new file mode 100644
index 0000000000..e44cb48def
--- /dev/null
+++ b/examples/metdata/src/shared/data.ts
@@ -0,0 +1,11 @@
+import { CustomMetadata } from './model';
+
+export const customMetaData: CustomMetadata = {
+  a: 'custom',
+  b: 1,
+  c: {
+    d: 'nested',
+  },
+};
+
+
diff --git a/examples/metdata/src/shared/model.ts b/examples/metdata/src/shared/model.ts
new file mode 100644
index 0000000000..1a9c259e05
--- /dev/null
+++ b/examples/metdata/src/shared/model.ts
@@ -0,0 +1,5 @@
+export type CustomMetadata = {
+  a: string;
+  b: number;
+  c: Object;
+};
diff --git a/examples/metdata/tsconfig.json b/examples/metdata/tsconfig.json
new file mode 100644
index 0000000000..372ba40607
--- /dev/null
+++ b/examples/metdata/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "strict": true,
+    "jsx": "preserve",
+    "moduleResolution": "node",
+    "jsxImportSource": "@builder.io/mitosis"
+  },
+  "include": ["src"]
+}
diff --git a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
index 108b6731e1..45a64dd9a7 100644
--- a/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/alpine.test.ts.snap
@@ -241,7 +241,10 @@ exports[`Alpine.js > jsx > Javascript Test > Basic Outputs 1`] = `
 `;
 
 exports[`Alpine.js > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"<div x-data=\\"myBasicOutputsComponent()\\"></div>
+"/** useMetadata: {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside
+component\\"} */
+
+<div x-data=\\"myBasicOutputsComponent()\\"></div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
     Alpine.data(\\"myBasicOutputsComponent\\", () => ({
@@ -1616,7 +1619,9 @@ exports[`Alpine.js > jsx > Javascript Test > basicForwardRef 1`] = `
 `;
 
 exports[`Alpine.js > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"<style>
+"/** useMetadata: {\\"forwardRef\\":\\"inputRef\\"} */
+
+<style>
   .input {
     color: red;
   }
@@ -1770,6 +1775,20 @@ exports[`Alpine.js > jsx > Javascript Test > classState 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > complexMeta 1`] = `
+"/** useMetadata:
+{\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+*/
+
+<div x-data=\\"complexMetaRaw()\\"></div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"complexMetaRaw\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > componentWithContext 1`] = `
 "<div x-data=\\"componentWithContext()\\">
   <div><span x-html=\\"foo.value\\"></span></div>
@@ -1908,6 +1927,35 @@ exports[`Alpine.js > jsx > Javascript Test > expressionState 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Javascript Test > figmaMeta 1`] = `
+"/** useMetadata:
+{\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍
+Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon
+Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️
+Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️
+Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive
+State\\",\\"value\\":{\\"(Def)
+Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def)
+Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def)
+Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
+
+<button
+  x-data=\\"figmaButton()\\"
+  x-bind:data-icon=\\"icon\\"
+  x-bind:data-disabled=\\"interactiveState\\"
+  x-bind:data-width=\\"width\\"
+  x-bind:data-size=\\"size\\"
+>
+  <span x-html=\\"label\\"></span>
+</button>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"figmaButton\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Javascript Test > getterState 1`] = `
 "<div x-data=\\"button()\\">
   <p><span x-html=\\"foo2\\"></span></p>
@@ -3305,7 +3353,10 @@ exports[`Alpine.js > jsx > Typescript Test > Basic Outputs 1`] = `
 `;
 
 exports[`Alpine.js > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"<div x-data=\\"myBasicOutputsComponent()\\"></div>
+"/** useMetadata: {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside
+component\\"} */
+
+<div x-data=\\"myBasicOutputsComponent()\\"></div>
 <script>
   document.addEventListener(\\"alpine:init\\", () => {
     Alpine.data(\\"myBasicOutputsComponent\\", () => ({
@@ -4669,7 +4720,9 @@ exports[`Alpine.js > jsx > Typescript Test > basicForwardRef 1`] = `
 `;
 
 exports[`Alpine.js > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"<style>
+"/** useMetadata: {\\"forwardRef\\":\\"inputRef\\"} */
+
+<style>
   .input {
     color: red;
   }
@@ -4823,6 +4876,20 @@ exports[`Alpine.js > jsx > Typescript Test > classState 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > complexMeta 1`] = `
+"/** useMetadata:
+{\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+*/
+
+<div x-data=\\"complexMetaRaw()\\"></div>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"complexMetaRaw\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > componentWithContext 1`] = `
 "<div x-data=\\"componentWithContext()\\">
   <div><span x-html=\\"foo.value\\"></span></div>
@@ -4961,6 +5028,35 @@ exports[`Alpine.js > jsx > Typescript Test > expressionState 1`] = `
 "
 `;
 
+exports[`Alpine.js > jsx > Typescript Test > figmaMeta 1`] = `
+"/** useMetadata:
+{\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍
+Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon
+Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️
+Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️
+Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive
+State\\",\\"value\\":{\\"(Def)
+Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def)
+Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def)
+Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
+
+<button
+  x-data=\\"figmaButton()\\"
+  x-bind:data-icon=\\"icon\\"
+  x-bind:data-disabled=\\"interactiveState\\"
+  x-bind:data-width=\\"width\\"
+  x-bind:data-size=\\"size\\"
+>
+  <span x-html=\\"label\\"></span>
+</button>
+<script>
+  document.addEventListener(\\"alpine:init\\", () => {
+    Alpine.data(\\"figmaButton\\", () => ({}));
+  });
+</script>
+"
+`;
+
 exports[`Alpine.js > jsx > Typescript Test > getterState 1`] = `
 "<div x-data=\\"button()\\">
   <p><span x-html=\\"foo2\\"></span></p>
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 030255a311..7f3d89de82 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -392,7 +392,12 @@ export class MyBasicOutputsComponentModule {}
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
@@ -3553,7 +3558,12 @@ export class MyBasicForwardRefComponentModule {}
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -3831,6 +3841,41 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class ComplexMetaRaw {}
+
+@NgModule({
+  declarations: [ComplexMetaRaw],
+  imports: [CommonModule],
+  exports: [ComplexMetaRaw],
+})
+export class ComplexMetaRawModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > componentWithContext 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -3946,7 +3991,12 @@ export class RenderContentModule {}
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > customSelector 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -4463,6 +4513,54 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class FigmaButton {
+  @Input() icon;
+  @Input() interactiveState;
+  @Input() width;
+  @Input() size;
+  @Input() label;
+}
+
+@NgModule({
+  declarations: [FigmaButton],
+  imports: [CommonModule],
+  exports: [FigmaButton],
+})
+export class FigmaButtonModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -4753,7 +4851,12 @@ export class MyBasicComponentModule {}
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > jsx > Javascript Test > nativeAttributes 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component, Input } from \\"@angular/core\\";
@@ -7798,7 +7901,12 @@ export class MyBasicOutputsComponentModule {}
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
@@ -11227,7 +11335,12 @@ export class MyBasicForwardRefComponentModule {}
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -11517,6 +11630,41 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class ComplexMetaRaw {}
+
+@NgModule({
+  declarations: [ComplexMetaRaw],
+  imports: [CommonModule],
+  exports: [ComplexMetaRaw],
+})
+export class ComplexMetaRawModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > componentWithContext 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -11640,7 +11788,12 @@ export class RenderContentModule {}
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > customSelector 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -12182,6 +12335,54 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class FigmaButton {
+  @Input() icon!: any;
+  @Input() interactiveState!: any;
+  @Input() width!: any;
+  @Input() size!: any;
+  @Input() label!: any;
+}
+
+@NgModule({
+  declarations: [FigmaButton],
+  imports: [CommonModule],
+  exports: [FigmaButton],
+})
+export class FigmaButtonModule {}
+"
+`;
+
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -12489,7 +12690,12 @@ export class MyBasicComponentModule {}
 `;
 
 exports[`Angular with Preserve Imports and File Extensions > jsx > Typescript Test > nativeAttributes 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component, Input } from \\"@angular/core\\";
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 0811f115af..4ceec5bcb7 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -399,7 +399,12 @@ export class MyBasicOutputsComponentModule {}
 `;
 
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
@@ -3603,7 +3608,12 @@ export class MyBasicForwardRefComponentModule {}
 `;
 
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -3888,6 +3898,42 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class ComplexMetaRaw {}
+
+@NgModule({
+  declarations: [ComplexMetaRaw],
+  imports: [CommonModule],
+  exports: [ComplexMetaRaw],
+  bootstrap: [SomeOtherComponent],
+})
+export class ComplexMetaRawModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > componentWithContext 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -4006,7 +4052,12 @@ export class RenderContentModule {}
 `;
 
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > customSelector 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -4531,6 +4582,55 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class FigmaButton {
+  @Input() icon;
+  @Input() interactiveState;
+  @Input() width;
+  @Input() size;
+  @Input() label;
+}
+
+@NgModule({
+  declarations: [FigmaButton],
+  imports: [CommonModule],
+  exports: [FigmaButton],
+  bootstrap: [SomeOtherComponent],
+})
+export class FigmaButtonModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -4827,7 +4927,12 @@ export class MyBasicComponentModule {}
 `;
 
 exports[`Angular with Import Mapper Tests > jsx > Javascript Test > nativeAttributes 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component, Input } from \\"@angular/core\\";
@@ -7931,7 +8036,12 @@ export class MyBasicOutputsComponentModule {}
 `;
 
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
@@ -11403,7 +11513,12 @@ export class MyBasicForwardRefComponentModule {}
 `;
 
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -11700,6 +11815,42 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class ComplexMetaRaw {}
+
+@NgModule({
+  declarations: [ComplexMetaRaw],
+  imports: [CommonModule],
+  exports: [ComplexMetaRaw],
+  bootstrap: [SomeOtherComponent],
+})
+export class ComplexMetaRawModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > componentWithContext 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -11826,7 +11977,12 @@ export class RenderContentModule {}
 `;
 
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > customSelector 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -12376,6 +12532,55 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with Import Mapper Tests > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class FigmaButton {
+  @Input() icon!: any;
+  @Input() interactiveState!: any;
+  @Input() width!: any;
+  @Input() size!: any;
+  @Input() label!: any;
+}
+
+@NgModule({
+  declarations: [FigmaButton],
+  imports: [CommonModule],
+  exports: [FigmaButton],
+  bootstrap: [SomeOtherComponent],
+})
+export class FigmaButtonModule {}
+"
+`;
+
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -12691,7 +12896,12 @@ export class MyBasicComponentModule {}
 `;
 
 exports[`Angular with Import Mapper Tests > jsx > Typescript Test > nativeAttributes 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component, Input } from \\"@angular/core\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
index 70854852df..844a632639 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.state.test.ts.snap
@@ -415,7 +415,12 @@ export class MyBasicOutputsComponentModule {}
 `;
 
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
@@ -3691,7 +3696,12 @@ export class MyBasicForwardRefComponentModule {}
 `;
 
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -3967,6 +3977,41 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class ComplexMetaRaw {}
+
+@NgModule({
+  declarations: [ComplexMetaRaw],
+  imports: [CommonModule],
+  exports: [ComplexMetaRaw],
+})
+export class ComplexMetaRawModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > componentWithContext 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -4080,7 +4125,12 @@ export class RenderContentModule {}
 `;
 
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > customSelector 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -4637,6 +4687,54 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class FigmaButton {
+  @Input() icon;
+  @Input() interactiveState;
+  @Input() width;
+  @Input() size;
+  @Input() label;
+}
+
+@NgModule({
+  declarations: [FigmaButton],
+  imports: [CommonModule],
+  exports: [FigmaButton],
+})
+export class FigmaButtonModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -4953,7 +5051,12 @@ export class MyBasicComponentModule {}
 `;
 
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Javascript Test > nativeAttributes 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component, Input } from \\"@angular/core\\";
@@ -8072,7 +8175,12 @@ export class MyBasicOutputsComponentModule {}
 `;
 
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
@@ -11641,7 +11749,12 @@ export class MyBasicForwardRefComponentModule {}
 `;
 
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -11929,6 +12042,41 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class ComplexMetaRaw {}
+
+@NgModule({
+  declarations: [ComplexMetaRaw],
+  imports: [CommonModule],
+  exports: [ComplexMetaRaw],
+})
+export class ComplexMetaRawModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > componentWithContext 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -12050,7 +12198,12 @@ export class RenderContentModule {}
 `;
 
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > customSelector 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -12633,6 +12786,54 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class FigmaButton {
+  @Input() icon!: any;
+  @Input() interactiveState!: any;
+  @Input() width!: any;
+  @Input() size!: any;
+  @Input() label!: any;
+}
+
+@NgModule({
+  declarations: [FigmaButton],
+  imports: [CommonModule],
+  exports: [FigmaButton],
+})
+export class FigmaButtonModule {}
+"
+`;
+
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -12966,7 +13167,12 @@ export class MyBasicComponentModule {}
 `;
 
 exports[`Angular with manually creating and handling class properties as bindings (more stable) > jsx > Typescript Test > nativeAttributes 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component, Input } from \\"@angular/core\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
index e074ed773a..e4538142f1 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.styles.test.ts.snap
@@ -351,7 +351,12 @@ export class MyBasicOutputsComponentModule {}
 `;
 
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
@@ -3235,7 +3240,12 @@ export class MyBasicForwardRefComponentModule {}
 `;
 
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -3482,6 +3492,34 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+})
+export default class ComplexMetaRaw {}
+
+@NgModule({
+  declarations: [ComplexMetaRaw],
+  imports: [CommonModule],
+  exports: [ComplexMetaRaw],
+})
+export class ComplexMetaRawModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > componentWithContext 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -3574,7 +3612,12 @@ export class RenderContentModule {}
 `;
 
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > customSelector 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -4039,6 +4082,47 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+})
+export default class FigmaButton {
+  @Input() icon;
+  @Input() interactiveState;
+  @Input() width;
+  @Input() size;
+  @Input() label;
+}
+
+@NgModule({
+  declarations: [FigmaButton],
+  imports: [CommonModule],
+  exports: [FigmaButton],
+})
+export class FigmaButtonModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -4287,7 +4371,12 @@ export class MyBasicComponentModule {}
 `;
 
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Javascript Test > nativeAttributes 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component, Input } from \\"@angular/core\\";
@@ -6951,7 +7040,12 @@ export class MyBasicOutputsComponentModule {}
 `;
 
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
@@ -10103,7 +10197,12 @@ export class MyBasicForwardRefComponentModule {}
 `;
 
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -10362,6 +10461,34 @@ export class MyBasicComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+})
+export default class ComplexMetaRaw {}
+
+@NgModule({
+  declarations: [ComplexMetaRaw],
+  imports: [CommonModule],
+  exports: [ComplexMetaRaw],
+})
+export class ComplexMetaRawModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > componentWithContext 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -10462,7 +10589,12 @@ export class RenderContentModule {}
 `;
 
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > customSelector 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -10952,6 +11084,47 @@ export class MyComponentModule {}
 "
 `;
 
+exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+})
+export default class FigmaButton {
+  @Input() icon!: any;
+  @Input() interactiveState!: any;
+  @Input() width!: any;
+  @Input() size!: any;
+  @Input() label!: any;
+}
+
+@NgModule({
+  declarations: [FigmaButton],
+  imports: [CommonModule],
+  exports: [FigmaButton],
+})
+export class FigmaButtonModule {}
+"
+`;
+
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -11217,7 +11390,12 @@ export class MyBasicComponentModule {}
 `;
 
 exports[`Angular with visuallyIgnoreHostElement = false > jsx > Typescript Test > nativeAttributes 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component, Input } from \\"@angular/core\\";
diff --git a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
index e40044e65c..2cc818ce4d 100644
--- a/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/angular.test.ts.snap
@@ -734,7 +734,12 @@ export default class MyBasicOutputsComponent {
 `;
 
 exports[`Angular > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
@@ -778,7 +783,12 @@ export class MyBasicOutputsComponentModule {}
 `;
 
 exports[`Angular > jsx > Javascript Test > Basic Outputs Meta 2`] = `
-"import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
@@ -6751,7 +6761,12 @@ export default class MyBasicForwardRefComponent {
 `;
 
 exports[`Angular > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -6792,7 +6807,12 @@ export class MyBasicForwardRefComponentModule {}
 `;
 
 exports[`Angular > jsx > Javascript Test > basicForwardRefMetadata 2`] = `
-"import { Component } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { Component } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
@@ -7257,6 +7277,69 @@ export default class MyBasicComponent {
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class ComplexMetaRaw {}
+
+@NgModule({
+  declarations: [ComplexMetaRaw],
+  imports: [CommonModule],
+  exports: [ComplexMetaRaw],
+})
+export class ComplexMetaRawModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > complexMeta 2`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class ComplexMetaRaw {}
+"
+`;
+
 exports[`Angular > jsx > Javascript Test > componentWithContext 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -7463,7 +7546,12 @@ export default class RenderContent {
 `;
 
 exports[`Angular > jsx > Javascript Test > customSelector 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -7493,7 +7581,12 @@ export class MyComponentModule {}
 `;
 
 exports[`Angular > jsx > Javascript Test > customSelector 2`] = `
-"import { Component } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { Component } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
@@ -8442,6 +8535,95 @@ export default class MyComponent {
 "
 `;
 
+exports[`Angular > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class FigmaButton {
+  @Input() icon;
+  @Input() interactiveState;
+  @Input() width;
+  @Input() size;
+  @Input() label;
+}
+
+@NgModule({
+  declarations: [FigmaButton],
+  imports: [CommonModule],
+  exports: [FigmaButton],
+})
+export class FigmaButtonModule {}
+"
+`;
+
+exports[`Angular > jsx > Javascript Test > figmaMeta 2`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { Component, Input } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class FigmaButton {
+  @Input() icon;
+  @Input() interactiveState;
+  @Input() width;
+  @Input() size;
+  @Input() label;
+}
+"
+`;
+
 exports[`Angular > jsx > Javascript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -8979,7 +9161,12 @@ export default class MyBasicComponent {
 `;
 
 exports[`Angular > jsx > Javascript Test > nativeAttributes 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component, Input } from \\"@angular/core\\";
@@ -9016,7 +9203,12 @@ export class MyComponentModule {}
 `;
 
 exports[`Angular > jsx > Javascript Test > nativeAttributes 2`] = `
-"import { Component, Input } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { Component, Input } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
@@ -14632,7 +14824,12 @@ export default class MyBasicOutputsComponent {
 `;
 
 exports[`Angular > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
@@ -14676,7 +14873,12 @@ export class MyBasicOutputsComponentModule {}
 `;
 
 exports[`Angular > jsx > Typescript Test > Basic Outputs Meta 2`] = `
-"import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { Output, EventEmitter, Component, Input } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
@@ -21185,7 +21387,12 @@ export default class MyBasicForwardRefComponent {
 `;
 
 exports[`Angular > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -21231,7 +21438,12 @@ export class MyBasicForwardRefComponentModule {}
 `;
 
 exports[`Angular > jsx > Typescript Test > basicForwardRefMetadata 2`] = `
-"import { Component } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { Component } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 export interface Props {
@@ -21715,6 +21927,69 @@ export default class MyBasicComponent {
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class ComplexMetaRaw {}
+
+@NgModule({
+  declarations: [ComplexMetaRaw],
+  imports: [CommonModule],
+  exports: [ComplexMetaRaw],
+})
+export class ComplexMetaRawModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > complexMeta 2`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import { Component } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"complex-meta-raw\\",
+  template: \`
+    <div></div>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class ComplexMetaRaw {}
+"
+`;
+
 exports[`Angular > jsx > Typescript Test > componentWithContext 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -21937,7 +22212,12 @@ export default class RenderContent {
 `;
 
 exports[`Angular > jsx > Typescript Test > customSelector 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component } from \\"@angular/core\\";
@@ -21967,7 +22247,12 @@ export class MyComponentModule {}
 `;
 
 exports[`Angular > jsx > Typescript Test > customSelector 2`] = `
-"import { Component } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"selector\\":\\"not-my-component\\"}}
+          */
+
+import { Component } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
@@ -22966,6 +23251,95 @@ export default class MyComponent {
 "
 `;
 
+exports[`Angular > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+import { Component, Input } from \\"@angular/core\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+})
+export default class FigmaButton {
+  @Input() icon!: any;
+  @Input() interactiveState!: any;
+  @Input() width!: any;
+  @Input() size!: any;
+  @Input() label!: any;
+}
+
+@NgModule({
+  declarations: [FigmaButton],
+  imports: [CommonModule],
+  exports: [FigmaButton],
+})
+export class FigmaButtonModule {}
+"
+`;
+
+exports[`Angular > jsx > Typescript Test > figmaMeta 2`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { Component, Input } from \\"@angular/core\\";
+import { CommonModule } from \\"@angular/common\\";
+
+@Component({
+  selector: \\"figma-button\\",
+  template: \`
+    <button
+      [attr.data-icon]=\\"icon\\"
+      [attr.data-disabled]=\\"interactiveState\\"
+      [attr.data-width]=\\"width\\"
+      [attr.data-size]=\\"size\\"
+    >
+      {{label}}
+    </button>
+  \`,
+  styles: [
+    \`
+      :host {
+        display: contents;
+      }
+    \`,
+  ],
+  standalone: true,
+  imports: [CommonModule],
+})
+export default class FigmaButton {
+  @Input() icon!: any;
+  @Input() interactiveState!: any;
+  @Input() width!: any;
+  @Input() size!: any;
+  @Input() label!: any;
+}
+"
+`;
+
 exports[`Angular > jsx > Typescript Test > getterState 1`] = `
 "import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
@@ -23537,7 +23911,12 @@ export default class MyBasicComponent {
 `;
 
 exports[`Angular > jsx > Typescript Test > nativeAttributes 1`] = `
-"import { NgModule } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { NgModule } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 import { Component, Input } from \\"@angular/core\\";
@@ -23574,7 +23953,12 @@ export class MyComponentModule {}
 `;
 
 exports[`Angular > jsx > Typescript Test > nativeAttributes 2`] = `
-"import { Component, Input } from \\"@angular/core\\";
+"/**
+          useMetadata:
+          {\\"angular\\":{\\"nativeAttributes\\":[\\"disabled\\"]}}
+          */
+
+import { Component, Input } from \\"@angular/core\\";
 import { CommonModule } from \\"@angular/common\\";
 
 @Component({
diff --git a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
index 0f0e3aee95..f587064940 100644
--- a/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/html.test.ts.snap
@@ -825,7 +825,10 @@ exports[`Html > jsx > Javascript Test > Basic Outputs 1`] = `
 `;
 
 exports[`Html > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"<div></div>
+"/** useMetadata: {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside
+component\\"} */
+
+<div></div>
 <script>
   (() => {
     const state = { name: \\"PatrickJS\\" };
@@ -4092,7 +4095,9 @@ exports[`Html > jsx > Javascript Test > basicForwardRef 1`] = `
 `;
 
 exports[`Html > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"<div>
+"/** useMetadata: {\\"forwardRef\\":\\"inputRef\\"} */
+
+<div>
   <input
     class=\\"input\\"
     data-el=\\"input-1\\"
@@ -4360,6 +4365,15 @@ exports[`Html > jsx > Javascript Test > classState 1`] = `
 "
 `;
 
+exports[`Html > jsx > Javascript Test > complexMeta 1`] = `
+"/** useMetadata:
+{\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+*/
+
+<div></div>
+"
+`;
+
 exports[`Html > jsx > Javascript Test > componentWithContext 1`] = `
 "<template data-el=\\"div-1\\"><!-- foo.value --></template>
 <script>
@@ -4905,6 +4919,83 @@ exports[`Html > jsx > Javascript Test > expressionState 1`] = `
 "
 `;
 
+exports[`Html > jsx > Javascript Test > figmaMeta 1`] = `
+"/** useMetadata:
+{\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍
+Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon
+Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️
+Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️
+Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive
+State\\",\\"value\\":{\\"(Def)
+Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def)
+Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def)
+Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
+
+<button data-el=\\"button-1\\">
+  <template data-el=\\"div-1\\"><!-- props.label --></template>
+</button>
+<script>
+  (() => {
+    const state = {};
+    let props = {};
+    let context = null;
+    let nodesToDestroy = [];
+    let pendingUpdate = false;
+
+    function destroyAnyNodes() {
+      // destroy current view template refs before rendering again
+      nodesToDestroy.forEach((el) => el.remove());
+      nodesToDestroy = [];
+    }
+
+    // Function to update data bindings and loops
+    // call update() when you mutate state and need the updates to reflect
+    // in the dom
+    function update() {
+      if (pendingUpdate === true) {
+        return;
+      }
+      pendingUpdate = true;
+
+      document.querySelectorAll(\\"[data-el='button-1']\\").forEach((el) => {
+        el.setAttribute(\\"data-icon\\", props.icon);
+
+        el.setAttribute(\\"data-disabled\\", props.interactiveState);
+
+        el.setAttribute(\\"data-width\\", props.width);
+
+        el.setAttribute(\\"data-size\\", props.size);
+      });
+
+      document.querySelectorAll(\\"[data-el='div-1']\\").forEach((el) => {
+        renderTextNode(el, props.label);
+      });
+
+      destroyAnyNodes();
+
+      pendingUpdate = false;
+    }
+
+    // Update with initial state on first load
+    update();
+
+    // Helper text DOM nodes
+    function renderTextNode(el, text) {
+      const textNode = document.createTextNode(text);
+      if (el?.scope) {
+        textNode.scope = el.scope;
+      }
+      if (el?.context) {
+        child.context = el.context;
+      }
+      el.after(textNode);
+      nodesToDestroy.push(el.nextSibling);
+    }
+  })();
+</script>
+"
+`;
+
 exports[`Html > jsx > Javascript Test > getterState 1`] = `
 "<div>
   <p>
@@ -8538,7 +8629,10 @@ exports[`Html > jsx > Typescript Test > Basic Outputs 1`] = `
 `;
 
 exports[`Html > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"<div></div>
+"/** useMetadata: {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside
+component\\"} */
+
+<div></div>
 <script>
   (() => {
     const state = { name: \\"PatrickJS\\" };
@@ -11805,7 +11899,9 @@ exports[`Html > jsx > Typescript Test > basicForwardRef 1`] = `
 `;
 
 exports[`Html > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"<div>
+"/** useMetadata: {\\"forwardRef\\":\\"inputRef\\"} */
+
+<div>
   <input
     class=\\"input\\"
     data-el=\\"input-1\\"
@@ -12073,6 +12169,15 @@ exports[`Html > jsx > Typescript Test > classState 1`] = `
 "
 `;
 
+exports[`Html > jsx > Typescript Test > complexMeta 1`] = `
+"/** useMetadata:
+{\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+*/
+
+<div></div>
+"
+`;
+
 exports[`Html > jsx > Typescript Test > componentWithContext 1`] = `
 "<template data-el=\\"div-1\\"><!-- foo.value --></template>
 <script>
@@ -12618,6 +12723,83 @@ exports[`Html > jsx > Typescript Test > expressionState 1`] = `
 "
 `;
 
+exports[`Html > jsx > Typescript Test > figmaMeta 1`] = `
+"/** useMetadata:
+{\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍
+Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon
+Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️
+Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️
+Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive
+State\\",\\"value\\":{\\"(Def)
+Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def)
+Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def)
+Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
+
+<button data-el=\\"button-1\\">
+  <template data-el=\\"div-1\\"><!-- props.label --></template>
+</button>
+<script>
+  (() => {
+    const state = {};
+    let props = {};
+    let context = null;
+    let nodesToDestroy = [];
+    let pendingUpdate = false;
+
+    function destroyAnyNodes() {
+      // destroy current view template refs before rendering again
+      nodesToDestroy.forEach((el) => el.remove());
+      nodesToDestroy = [];
+    }
+
+    // Function to update data bindings and loops
+    // call update() when you mutate state and need the updates to reflect
+    // in the dom
+    function update() {
+      if (pendingUpdate === true) {
+        return;
+      }
+      pendingUpdate = true;
+
+      document.querySelectorAll(\\"[data-el='button-1']\\").forEach((el) => {
+        el.setAttribute(\\"data-icon\\", props.icon);
+
+        el.setAttribute(\\"data-disabled\\", props.interactiveState);
+
+        el.setAttribute(\\"data-width\\", props.width);
+
+        el.setAttribute(\\"data-size\\", props.size);
+      });
+
+      document.querySelectorAll(\\"[data-el='div-1']\\").forEach((el) => {
+        renderTextNode(el, props.label);
+      });
+
+      destroyAnyNodes();
+
+      pendingUpdate = false;
+    }
+
+    // Update with initial state on first load
+    update();
+
+    // Helper text DOM nodes
+    function renderTextNode(el, text) {
+      const textNode = document.createTextNode(text);
+      if (el?.scope) {
+        textNode.scope = el.scope;
+      }
+      if (el?.context) {
+        child.context = el.context;
+      }
+      el.after(textNode);
+      nodesToDestroy.push(el.nextSibling);
+    }
+  })();
+</script>
+"
+`;
+
 exports[`Html > jsx > Typescript Test > getterState 1`] = `
 "<div>
   <p>
diff --git a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
index b8259e55be..358fabef23 100644
--- a/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/liquid.test.ts.snap
@@ -55,7 +55,10 @@ exports[`Liquid > jsx > Javascript Test > Basic Outputs 1`] = `
 `;
 
 exports[`Liquid > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"<div></div>
+"/** useMetadata: {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside
+component\\"} */
+
+<div></div>
 "
 `;
 
@@ -464,7 +467,9 @@ exports[`Liquid > jsx > Javascript Test > basicForwardRef 1`] = `
 `;
 
 exports[`Liquid > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"<div><input class=\\"input\\" value=\\"{{name}}\\" /></div>
+"/** useMetadata: {\\"forwardRef\\":\\"inputRef\\"} */
+
+<div><input class=\\"input\\" value=\\"{{name}}\\" /></div>
 <style>
   .input {
     color: red;
@@ -535,6 +540,15 @@ exports[`Liquid > jsx > Javascript Test > classState 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Javascript Test > complexMeta 1`] = `
+"/** useMetadata:
+{\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+*/
+
+<div></div>
+"
+`;
+
 exports[`Liquid > jsx > Javascript Test > componentWithContext 1`] = `
 "<div><div>{{foo.value}}</div></div>
 "
@@ -595,6 +609,29 @@ exports[`Liquid > jsx > Javascript Test > expressionState 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Javascript Test > figmaMeta 1`] = `
+"/** useMetadata:
+{\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍
+Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon
+Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️
+Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️
+Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive
+State\\",\\"value\\":{\\"(Def)
+Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def)
+Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def)
+Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
+
+<button
+  data-icon=\\"{{icon}}\\"
+  data-disabled=\\"{{interactiveState}}\\"
+  data-width=\\"{{width}}\\"
+  data-size=\\"{{size}}\\"
+>
+  {{label}}
+</button>
+"
+`;
+
 exports[`Liquid > jsx > Javascript Test > getterState 1`] = `
 "<div>
   <p>{{foo2}}</p>
@@ -1030,7 +1067,10 @@ exports[`Liquid > jsx > Typescript Test > Basic Outputs 1`] = `
 `;
 
 exports[`Liquid > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"<div></div>
+"/** useMetadata: {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside
+component\\"} */
+
+<div></div>
 "
 `;
 
@@ -1439,7 +1479,9 @@ exports[`Liquid > jsx > Typescript Test > basicForwardRef 1`] = `
 `;
 
 exports[`Liquid > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"<div><input class=\\"input\\" value=\\"{{name}}\\" /></div>
+"/** useMetadata: {\\"forwardRef\\":\\"inputRef\\"} */
+
+<div><input class=\\"input\\" value=\\"{{name}}\\" /></div>
 <style>
   .input {
     color: red;
@@ -1510,6 +1552,15 @@ exports[`Liquid > jsx > Typescript Test > classState 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Typescript Test > complexMeta 1`] = `
+"/** useMetadata:
+{\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+*/
+
+<div></div>
+"
+`;
+
 exports[`Liquid > jsx > Typescript Test > componentWithContext 1`] = `
 "<div><div>{{foo.value}}</div></div>
 "
@@ -1570,6 +1621,29 @@ exports[`Liquid > jsx > Typescript Test > expressionState 1`] = `
 "
 `;
 
+exports[`Liquid > jsx > Typescript Test > figmaMeta 1`] = `
+"/** useMetadata:
+{\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍
+Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon
+Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️
+Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️
+Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive
+State\\",\\"value\\":{\\"(Def)
+Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def)
+Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def)
+Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
+
+<button
+  data-icon=\\"{{icon}}\\"
+  data-disabled=\\"{{interactiveState}}\\"
+  data-width=\\"{{width}}\\"
+  data-size=\\"{{size}}\\"
+>
+  {{label}}
+</button>
+"
+`;
+
 exports[`Liquid > jsx > Typescript Test > getterState 1`] = `
 "<div>
   <p>{{foo2}}</p>
diff --git a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
index cee39adce9..93553f9b2d 100644
--- a/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/lit.test.ts.snap
@@ -300,7 +300,12 @@ export default class MyBasicOutputsComponent extends LitElement {
 `;
 
 exports[`Lit > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import { LitElement, html, css } from \\"lit\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
 
 @customElement(\\"my-basic-outputs-component\\")
@@ -2282,7 +2287,12 @@ export default class MyBasicForwardRefComponent extends LitElement {
 `;
 
 exports[`Lit > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"import { LitElement, html, css } from \\"lit\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
 
 @customElement(\\"my-basic-forward-ref-component\\")
@@ -2488,6 +2498,32 @@ export default class MyBasicComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"complex-meta-raw\\")
+export default class ComplexMetaRaw extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    return html\`
+
+          <div></div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Javascript Test > componentWithContext 1`] = `
 "import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
@@ -2758,6 +2794,45 @@ export default class MyComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"figma-button\\")
+export default class FigmaButton extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @property() icon: any;
+  @property() interactiveState: any;
+  @property() width: any;
+  @property() size: any;
+  @property() label: any;
+
+  render() {
+    return html\`
+
+          <button
+          data-icon=\\"\${this.icon}\\"
+          data-disabled=\\"\${this.interactiveState}\\"
+          data-width=\\"\${this.width}\\"
+          data-size=\\"\${this.size}\\"
+        >
+          \${this.label}
+        </button>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Javascript Test > getterState 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
@@ -4895,7 +4970,12 @@ export default class MyBasicOutputsComponent extends LitElement {
 `;
 
 exports[`Lit > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import { LitElement, html, css } from \\"lit\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
 
 @customElement(\\"my-basic-outputs-component\\")
@@ -7135,7 +7215,12 @@ export default class MyBasicForwardRefComponent extends LitElement {
 `;
 
 exports[`Lit > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"import { LitElement, html, css } from \\"lit\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
 
 export interface Props {
@@ -7353,6 +7438,32 @@ export default class MyBasicComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"complex-meta-raw\\")
+export default class ComplexMetaRaw extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    return html\`
+
+          <div></div>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Typescript Test > componentWithContext 1`] = `
 "import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
@@ -7653,6 +7764,45 @@ export default class MyComponent extends LitElement {
 "
 `;
 
+exports[`Lit > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { LitElement, html, css } from \\"lit\\";
+import { customElement, property, state, query } from \\"lit/decorators.js\\";
+
+@customElement(\\"figma-button\\")
+export default class FigmaButton extends LitElement {
+  createRenderRoot() {
+    return this;
+  }
+
+  @property() icon: any;
+  @property() interactiveState: any;
+  @property() width: any;
+  @property() size: any;
+  @property() label: any;
+
+  render() {
+    return html\`
+
+          <button
+          data-icon=\\"\${this.icon}\\"
+          data-disabled=\\"\${this.interactiveState}\\"
+          data-width=\\"\${this.width}\\"
+          data-size=\\"\${this.size}\\"
+        >
+          \${this.label}
+        </button>
+
+        \`;
+  }
+}
+"
+`;
+
 exports[`Lit > jsx > Typescript Test > getterState 1`] = `
 "import { LitElement, html, css } from \\"lit\\";
 import { customElement, property, state, query } from \\"lit/decorators.js\\";
diff --git a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
index d2c2429920..e6424672d6 100644
--- a/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/marko.test.ts.snap
@@ -266,7 +266,13 @@ exports[`Marko > jsx > Javascript Test > Basic Outputs 1`] = `
 `;
 
 exports[`Marko > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"class {
+"
+          /**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+          
+          class {
   onCreate(input) {
     this.state = { name: \\"PatrickJS\\" };
   }
@@ -1513,7 +1519,13 @@ style {
 `;
 
 exports[`Marko > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"class {
+"
+          /**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+          
+          class {
   onCreate(input) {
     this.state = { name: \\"PatrickJS\\" };
   }
@@ -1646,6 +1658,18 @@ style {
 </div>"
 `;
 
+exports[`Marko > jsx > Javascript Test > complexMeta 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+          
+          class {}
+
+<div></div>"
+`;
+
 exports[`Marko > jsx > Javascript Test > componentWithContext 1`] = `
 "import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
@@ -1765,6 +1789,25 @@ exports[`Marko > jsx > Javascript Test > expressionState 1`] = `
 <div>\${state.refToUse}</div>"
 `;
 
+exports[`Marko > jsx > Javascript Test > figmaMeta 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+          
+          class {}
+
+<button
+  data-icon=(input.icon)
+  data-disabled=(input.interactiveState)
+  data-width=(input.width)
+  data-size=(input.size)
+>
+  \${input.label}
+</button>"
+`;
+
 exports[`Marko > jsx > Javascript Test > getterState 1`] = `
 "class {
   get foo2() {
@@ -2949,7 +2992,13 @@ exports[`Marko > jsx > Typescript Test > Basic Outputs 1`] = `
 `;
 
 exports[`Marko > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"class {
+"
+          /**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+          
+          class {
   onCreate(input) {
     this.state = { name: \\"PatrickJS\\" };
   }
@@ -4207,7 +4256,13 @@ style {
 `;
 
 exports[`Marko > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"class {
+"
+          /**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+          
+          class {
   onCreate(input) {
     this.state = { name: \\"PatrickJS\\" };
   }
@@ -4342,6 +4397,18 @@ style {
 </div>"
 `;
 
+exports[`Marko > jsx > Typescript Test > complexMeta 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+          
+          class {}
+
+<div></div>"
+`;
+
 exports[`Marko > jsx > Typescript Test > componentWithContext 1`] = `
 "import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
@@ -4461,6 +4528,25 @@ exports[`Marko > jsx > Typescript Test > expressionState 1`] = `
 <div>\${state.refToUse}</div>"
 `;
 
+exports[`Marko > jsx > Typescript Test > figmaMeta 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+          
+          class {}
+
+<button
+  data-icon=(input.icon)
+  data-disabled=(input.interactiveState)
+  data-width=(input.width)
+  data-size=(input.size)
+>
+  \${input.label}
+</button>"
+`;
+
 exports[`Marko > jsx > Typescript Test > getterState 1`] = `
 "class {
   get foo2() {
diff --git a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
index d7d714b82b..69556b3112 100644
--- a/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/mitosis.test.ts.snap
@@ -248,7 +248,12 @@ export default function MyBasicOutputsComponent(props) {
 `;
 
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import { useStore } from \\"@builder.io/mitosis\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { useStore } from \\"@builder.io/mitosis\\";
 
 useMetadata({
   outputs: [\\"onMessage\\", \\"onEvent\\"],
@@ -1653,14 +1658,14 @@ exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascr
 `;
 
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"',' expected. (16:12)
-  14 |     const state = useStore({ name: 'PatrickJS',});
-  15 |
-> 16 | const props.inputRef = useRef();
+"',' expected. (22:12)
+  20 |     const state = useStore({ name: 'PatrickJS',});
+  21 |
+> 22 | const props.inputRef = useRef();
      |            ^
-  17 |
-  18 |
-  19 |"
+  23 |
+  24 |
+  25 |"
 `;
 
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
@@ -1778,6 +1783,28 @@ export default function MyBasicComponent(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+useMetadata({
+  x: \\"y\\",
+  asdf: {
+    stringValue: \\"d\\",
+    booleanValue: true,
+    numberValue: 1,
+    innerObject: { stringValue: \\"inner\\", numberValue: 2, booleanValue: false },
+  },
+});
+
+export default function ComplexMetaRaw(props) {
+  return [<div />];
+}
+"
+`;
+
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > componentWithContext 1`] = `
 "import { Fragment } from \\"@components\\";
 
@@ -1935,6 +1962,65 @@ export default function MyComponent(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+useMetadata({
+  figma: {
+    name: \\"def-button-beta-outlined\\",
+    url: \\"https://www.figma.com/xxx\\",
+    props: {
+      iconSmall: { type: \\"instance\\", key: \\"📍 Icon Small\\" },
+      iconMedium: { type: \\"instance\\", key: \\"📍 Icon Medium\\" },
+      label: { type: \\"string\\", key: \\"✏️ Label\\" },
+      icon: {
+        type: \\"boolean\\",
+        key: \\"👁️ Icon\\",
+        value: { false: false, true: \\"placeholder\\" },
+      },
+      interactiveState: {
+        type: \\"enum\\",
+        key: \\"Interactive State\\",
+        value: {
+          \\"(Def) Enabled\\": false,
+          Hovered: false,
+          Pressed: false,
+          Focused: false,
+          Disabled: \\"true\\",
+        },
+      },
+      size: {
+        type: \\"enum\\",
+        key: \\"Size\\",
+        value: { \\"(Def) Medium\\": false, Small: \\"small\\" },
+      },
+      width: {
+        type: \\"enum\\",
+        key: \\"Width\\",
+        value: { \\"(Def) Auto Width\\": false, \\"Full Width\\": \\"full\\" },
+      },
+    },
+  },
+});
+
+export default function FigmaButton(props) {
+  return [
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>,
+  ];
+}
+"
+`;
+
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Javascript Test > getterState 1`] = `
 "import { useStore } from \\"@builder.io/mitosis\\";
 
@@ -3292,7 +3378,12 @@ export default function MyBasicOutputsComponent(props) {
 `;
 
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import { useStore } from \\"@builder.io/mitosis\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { useStore } from \\"@builder.io/mitosis\\";
 
 useMetadata({
   outputs: [\\"onMessage\\", \\"onEvent\\"],
@@ -4924,14 +5015,14 @@ exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescr
 `;
 
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"',' expected. (19:12)
-  17 |     const state = useStore({ name: 'PatrickJS',});
-  18 |
-> 19 | const props.inputRef = useRef();
+"',' expected. (25:12)
+  23 |     const state = useStore({ name: 'PatrickJS',});
+  24 |
+> 25 | const props.inputRef = useRef();
      |            ^
-  20 |
-  21 |
-  22 |"
+  26 |
+  27 |
+  28 |"
 `;
 
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
@@ -5056,6 +5147,28 @@ export default function MyBasicComponent(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+useMetadata({
+  x: \\"y\\",
+  asdf: {
+    stringValue: \\"d\\",
+    booleanValue: true,
+    numberValue: 1,
+    innerObject: { stringValue: \\"inner\\", numberValue: 2, booleanValue: false },
+  },
+});
+
+export default function ComplexMetaRaw(props) {
+  return [<div />];
+}
+"
+`;
+
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > componentWithContext 1`] = `
 "import { Fragment } from \\"@components\\";
 export interface ComponentWithContextProps {
@@ -5239,6 +5352,65 @@ export default function MyComponent(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+useMetadata({
+  figma: {
+    name: \\"def-button-beta-outlined\\",
+    url: \\"https://www.figma.com/xxx\\",
+    props: {
+      iconSmall: { type: \\"instance\\", key: \\"📍 Icon Small\\" },
+      iconMedium: { type: \\"instance\\", key: \\"📍 Icon Medium\\" },
+      label: { type: \\"string\\", key: \\"✏️ Label\\" },
+      icon: {
+        type: \\"boolean\\",
+        key: \\"👁️ Icon\\",
+        value: { false: false, true: \\"placeholder\\" },
+      },
+      interactiveState: {
+        type: \\"enum\\",
+        key: \\"Interactive State\\",
+        value: {
+          \\"(Def) Enabled\\": false,
+          Hovered: false,
+          Pressed: false,
+          Focused: false,
+          Disabled: \\"true\\",
+        },
+      },
+      size: {
+        type: \\"enum\\",
+        key: \\"Size\\",
+        value: { \\"(Def) Medium\\": false, Small: \\"small\\" },
+      },
+      width: {
+        type: \\"enum\\",
+        key: \\"Width\\",
+        value: { \\"(Def) Auto Width\\": false, \\"Full Width\\": \\"full\\" },
+      },
+    },
+  },
+});
+
+export default function FigmaButton(props) {
+  return [
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>,
+  ];
+}
+"
+`;
+
 exports[`Mitosis, format: legacy (native loops and conditionals) > jsx > Typescript Test > getterState 1`] = `
 "import { useStore } from \\"@builder.io/mitosis\\";
 
@@ -7387,7 +7559,12 @@ export default function MyBasicOutputsComponent(props) {
 `;
 
 exports[`Mitosis, format: legacy > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import { useStore } from \\"@builder.io/mitosis\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { useStore } from \\"@builder.io/mitosis\\";
 
 useMetadata({
   outputs: [\\"onMessage\\", \\"onEvent\\"],
@@ -8803,14 +8980,14 @@ exports[`Mitosis, format: legacy > jsx > Javascript Test > basicForwardRef 1`] =
 `;
 
 exports[`Mitosis, format: legacy > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"',' expected. (16:12)
-  14 |     const state = useStore({ name: 'PatrickJS',});
-  15 |
-> 16 | const props.inputRef = useRef();
+"',' expected. (22:12)
+  20 |     const state = useStore({ name: 'PatrickJS',});
+  21 |
+> 22 | const props.inputRef = useRef();
      |            ^
-  17 |
-  18 |
-  19 |"
+  23 |
+  24 |
+  25 |"
 `;
 
 exports[`Mitosis, format: legacy > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
@@ -8928,6 +9105,28 @@ export default function MyBasicComponent(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+useMetadata({
+  x: \\"y\\",
+  asdf: {
+    stringValue: \\"d\\",
+    booleanValue: true,
+    numberValue: 1,
+    innerObject: { stringValue: \\"inner\\", numberValue: 2, booleanValue: false },
+  },
+});
+
+export default function ComplexMetaRaw(props) {
+  return <div />;
+}
+"
+`;
+
 exports[`Mitosis, format: legacy > jsx > Javascript Test > componentWithContext 1`] = `
 "import { Fragment } from \\"@components\\";
 
@@ -9085,6 +9284,65 @@ export default function MyComponent(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+useMetadata({
+  figma: {
+    name: \\"def-button-beta-outlined\\",
+    url: \\"https://www.figma.com/xxx\\",
+    props: {
+      iconSmall: { type: \\"instance\\", key: \\"📍 Icon Small\\" },
+      iconMedium: { type: \\"instance\\", key: \\"📍 Icon Medium\\" },
+      label: { type: \\"string\\", key: \\"✏️ Label\\" },
+      icon: {
+        type: \\"boolean\\",
+        key: \\"👁️ Icon\\",
+        value: { false: false, true: \\"placeholder\\" },
+      },
+      interactiveState: {
+        type: \\"enum\\",
+        key: \\"Interactive State\\",
+        value: {
+          \\"(Def) Enabled\\": false,
+          Hovered: false,
+          Pressed: false,
+          Focused: false,
+          Disabled: \\"true\\",
+        },
+      },
+      size: {
+        type: \\"enum\\",
+        key: \\"Size\\",
+        value: { \\"(Def) Medium\\": false, Small: \\"small\\" },
+      },
+      width: {
+        type: \\"enum\\",
+        key: \\"Width\\",
+        value: { \\"(Def) Auto Width\\": false, \\"Full Width\\": \\"full\\" },
+      },
+    },
+  },
+});
+
+export default function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+"
+`;
+
 exports[`Mitosis, format: legacy > jsx > Javascript Test > getterState 1`] = `
 "import { useStore } from \\"@builder.io/mitosis\\";
 
@@ -10483,7 +10741,12 @@ export default function MyBasicOutputsComponent(props) {
 `;
 
 exports[`Mitosis, format: legacy > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import { useStore } from \\"@builder.io/mitosis\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { useStore } from \\"@builder.io/mitosis\\";
 
 useMetadata({
   outputs: [\\"onMessage\\", \\"onEvent\\"],
@@ -12132,14 +12395,14 @@ exports[`Mitosis, format: legacy > jsx > Typescript Test > basicForwardRef 1`] =
 `;
 
 exports[`Mitosis, format: legacy > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"',' expected. (19:12)
-  17 |     const state = useStore({ name: 'PatrickJS',});
-  18 |
-> 19 | const props.inputRef = useRef();
+"',' expected. (25:12)
+  23 |     const state = useStore({ name: 'PatrickJS',});
+  24 |
+> 25 | const props.inputRef = useRef();
      |            ^
-  20 |
-  21 |
-  22 |"
+  26 |
+  27 |
+  28 |"
 `;
 
 exports[`Mitosis, format: legacy > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
@@ -12264,6 +12527,28 @@ export default function MyBasicComponent(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+useMetadata({
+  x: \\"y\\",
+  asdf: {
+    stringValue: \\"d\\",
+    booleanValue: true,
+    numberValue: 1,
+    innerObject: { stringValue: \\"inner\\", numberValue: 2, booleanValue: false },
+  },
+});
+
+export default function ComplexMetaRaw(props) {
+  return <div />;
+}
+"
+`;
+
 exports[`Mitosis, format: legacy > jsx > Typescript Test > componentWithContext 1`] = `
 "import { Fragment } from \\"@components\\";
 export interface ComponentWithContextProps {
@@ -12449,6 +12734,65 @@ export default function MyComponent(props) {
 "
 `;
 
+exports[`Mitosis, format: legacy > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+useMetadata({
+  figma: {
+    name: \\"def-button-beta-outlined\\",
+    url: \\"https://www.figma.com/xxx\\",
+    props: {
+      iconSmall: { type: \\"instance\\", key: \\"📍 Icon Small\\" },
+      iconMedium: { type: \\"instance\\", key: \\"📍 Icon Medium\\" },
+      label: { type: \\"string\\", key: \\"✏️ Label\\" },
+      icon: {
+        type: \\"boolean\\",
+        key: \\"👁️ Icon\\",
+        value: { false: false, true: \\"placeholder\\" },
+      },
+      interactiveState: {
+        type: \\"enum\\",
+        key: \\"Interactive State\\",
+        value: {
+          \\"(Def) Enabled\\": false,
+          Hovered: false,
+          Pressed: false,
+          Focused: false,
+          Disabled: \\"true\\",
+        },
+      },
+      size: {
+        type: \\"enum\\",
+        key: \\"Size\\",
+        value: { \\"(Def) Medium\\": false, Small: \\"small\\" },
+      },
+      width: {
+        type: \\"enum\\",
+        key: \\"Width\\",
+        value: { \\"(Def) Auto Width\\": false, \\"Full Width\\": \\"full\\" },
+      },
+    },
+  },
+});
+
+export default function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+"
+`;
+
 exports[`Mitosis, format: legacy > jsx > Typescript Test > getterState 1`] = `
 "import { useStore } from \\"@builder.io/mitosis\\";
 
@@ -16396,6 +16740,17 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Mitosis, format: react > jsx > Javascript Test > complexMeta 1`] = `
+"import * as React from \\"react\\";
+
+function ComplexMetaRaw(props) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`Mitosis, format: react > jsx > Javascript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -16633,6 +16988,26 @@ export default MyComponent;
 "
 `;
 
+exports[`Mitosis, format: react > jsx > Javascript Test > figmaMeta 1`] = `
+"import * as React from \\"react\\";
+
+function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`Mitosis, format: react > jsx > Javascript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 
@@ -20065,6 +20440,17 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Mitosis, format: react > jsx > Typescript Test > complexMeta 1`] = `
+"import * as React from \\"react\\";
+
+function ComplexMetaRaw(props) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`Mitosis, format: react > jsx > Typescript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -20302,6 +20688,26 @@ export default MyComponent;
 "
 `;
 
+exports[`Mitosis, format: react > jsx > Typescript Test > figmaMeta 1`] = `
+"import * as React from \\"react\\";
+
+function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`Mitosis, format: react > jsx > Typescript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 
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 fb7f8737b4..020652adb6 100644
--- a/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/parse-jsx.test.ts.snap
@@ -6737,6 +6737,53 @@ exports[`Parse JSX > Javascript > classState 1`] = `
 }
 `;
 
+exports[`Parse JSX > Javascript > complexMeta 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {
+    "useMetadata": {
+      "asdf": {
+        "booleanValue": true,
+        "innerObject": {
+          "booleanValue": false,
+          "numberValue": 2,
+          "stringValue": "inner",
+        },
+        "numberValue": 1,
+        "stringValue": "d",
+      },
+      "x": "y",
+    },
+  },
+  "name": "ComplexMetaRaw",
+  "refs": {},
+  "state": {},
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Javascript > componentWithContext 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
@@ -7590,6 +7637,132 @@ exports[`Parse JSX > Javascript > expressionState 1`] = `
 }
 `;
 
+exports[`Parse JSX > Javascript > figmaMeta 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {
+        "data-disabled": {
+          "bindingType": "expression",
+          "code": "props.interactiveState",
+          "type": "single",
+        },
+        "data-icon": {
+          "bindingType": "expression",
+          "code": "props.icon",
+          "type": "single",
+        },
+        "data-size": {
+          "bindingType": "expression",
+          "code": "props.size",
+          "type": "single",
+        },
+        "data-width": {
+          "bindingType": "expression",
+          "code": "props.width",
+          "type": "single",
+        },
+      },
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "_text": {
+              "bindingType": "expression",
+              "code": "props.label",
+              "type": "single",
+            },
+          },
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {},
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "button",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {
+    "useMetadata": {
+      "figma": {
+        "name": "def-button-beta-outlined",
+        "props": {
+          "icon": {
+            "key": "👁️ Icon",
+            "type": "boolean",
+            "value": {
+              "false": false,
+              "true": "placeholder",
+            },
+          },
+          "iconMedium": {
+            "key": "📍 Icon Medium",
+            "type": "instance",
+          },
+          "iconSmall": {
+            "key": "📍 Icon Small",
+            "type": "instance",
+          },
+          "interactiveState": {
+            "key": "Interactive State",
+            "type": "enum",
+            "value": {
+              "(Def) Enabled": false,
+              "Disabled": "true",
+              "Focused": false,
+              "Hovered": false,
+              "Pressed": false,
+            },
+          },
+          "label": {
+            "key": "✏️ Label",
+            "type": "string",
+          },
+          "size": {
+            "key": "Size",
+            "type": "enum",
+            "value": {
+              "(Def) Medium": false,
+              "Small": "small",
+            },
+          },
+          "width": {
+            "key": "Width",
+            "type": "enum",
+            "value": {
+              "(Def) Auto Width": false,
+              "Full Width": "full",
+            },
+          },
+        },
+        "url": "https://www.figma.com/xxx",
+      },
+    },
+  },
+  "name": "FigmaButton",
+  "refs": {},
+  "state": {},
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Javascript > getterState 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
@@ -19785,6 +19958,53 @@ exports[`Parse JSX > Typescript > classState 1`] = `
 }
 `;
 
+exports[`Parse JSX > Typescript > complexMeta 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {},
+      "children": [],
+      "meta": {},
+      "name": "div",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {
+    "useMetadata": {
+      "asdf": {
+        "booleanValue": true,
+        "innerObject": {
+          "booleanValue": false,
+          "numberValue": 2,
+          "stringValue": "inner",
+        },
+        "numberValue": 1,
+        "stringValue": "d",
+      },
+      "x": "y",
+    },
+  },
+  "name": "ComplexMetaRaw",
+  "refs": {},
+  "state": {},
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Typescript > componentWithContext 1`] = `
 {
   "@type": "@builder.io/mitosis/component",
@@ -20678,6 +20898,133 @@ exports[`Parse JSX > Typescript > expressionState 1`] = `
 }
 `;
 
+exports[`Parse JSX > Typescript > figmaMeta 1`] = `
+{
+  "@type": "@builder.io/mitosis/component",
+  "children": [
+    {
+      "@type": "@builder.io/mitosis/node",
+      "bindings": {
+        "data-disabled": {
+          "bindingType": "expression",
+          "code": "props.interactiveState",
+          "type": "single",
+        },
+        "data-icon": {
+          "bindingType": "expression",
+          "code": "props.icon",
+          "type": "single",
+        },
+        "data-size": {
+          "bindingType": "expression",
+          "code": "props.size",
+          "type": "single",
+        },
+        "data-width": {
+          "bindingType": "expression",
+          "code": "props.width",
+          "type": "single",
+        },
+      },
+      "children": [
+        {
+          "@type": "@builder.io/mitosis/node",
+          "bindings": {
+            "_text": {
+              "bindingType": "expression",
+              "code": "props.label",
+              "type": "single",
+            },
+          },
+          "children": [],
+          "meta": {},
+          "name": "div",
+          "properties": {},
+          "scope": {},
+        },
+      ],
+      "meta": {},
+      "name": "button",
+      "properties": {},
+      "scope": {},
+    },
+  ],
+  "context": {
+    "get": {},
+    "set": {},
+  },
+  "exports": {},
+  "hooks": {
+    "onEvent": [],
+    "onMount": [],
+  },
+  "imports": [],
+  "inputs": [],
+  "meta": {
+    "useMetadata": {
+      "figma": {
+        "name": "def-button-beta-outlined",
+        "props": {
+          "icon": {
+            "key": "👁️ Icon",
+            "type": "boolean",
+            "value": {
+              "false": false,
+              "true": "placeholder",
+            },
+          },
+          "iconMedium": {
+            "key": "📍 Icon Medium",
+            "type": "instance",
+          },
+          "iconSmall": {
+            "key": "📍 Icon Small",
+            "type": "instance",
+          },
+          "interactiveState": {
+            "key": "Interactive State",
+            "type": "enum",
+            "value": {
+              "(Def) Enabled": false,
+              "Disabled": "true",
+              "Focused": false,
+              "Hovered": false,
+              "Pressed": false,
+            },
+          },
+          "label": {
+            "key": "✏️ Label",
+            "type": "string",
+          },
+          "size": {
+            "key": "Size",
+            "type": "enum",
+            "value": {
+              "(Def) Medium": false,
+              "Small": "small",
+            },
+          },
+          "width": {
+            "key": "Width",
+            "type": "enum",
+            "value": {
+              "(Def) Auto Width": false,
+              "Full Width": "full",
+            },
+          },
+        },
+        "url": "https://www.figma.com/xxx",
+      },
+    },
+  },
+  "name": "FigmaButton",
+  "propsTypeRef": "any",
+  "refs": {},
+  "state": {},
+  "subComponents": [],
+}
+`;
+
 exports[`Parse JSX > Typescript > getterState 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 9832dcf199..a7d109814f 100644
--- a/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/preact.test.ts.snap
@@ -194,7 +194,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`Preact > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"/** @jsx h */
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+/** @jsx h */
 import { h, Fragment } from \\"preact\\";
 import { useState, useEffect } from \\"preact/hooks\\";
 
@@ -1774,7 +1779,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`Preact > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"/** @jsx h */
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+/** @jsx h */
 import { h, Fragment } from \\"preact\\";
 import { useState } from \\"preact/hooks\\";
 
@@ -1961,6 +1971,23 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Preact > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+
+function ComplexMetaRaw(props) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`Preact > jsx > Javascript Test > componentWithContext 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -2204,6 +2231,32 @@ export default MyComponent;
 "
 `;
 
+exports[`Preact > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+
+function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`Preact > jsx > Javascript Test > getterState 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -3900,7 +3953,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`Preact > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"/** @jsx h */
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+/** @jsx h */
 import { h, Fragment } from \\"preact\\";
 import { useState, useEffect } from \\"preact/hooks\\";
 
@@ -5733,7 +5791,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`Preact > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"/** @jsx h */
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+/** @jsx h */
 import { h, Fragment } from \\"preact\\";
 import { useState } from \\"preact/hooks\\";
 
@@ -5931,6 +5994,23 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Preact > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+
+function ComplexMetaRaw(props: any) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`Preact > jsx > Typescript Test > componentWithContext 1`] = `
 "/** @jsx h */
 import { h, Fragment } from \\"preact\\";
@@ -6206,6 +6286,32 @@ export default MyComponent;
 "
 `;
 
+exports[`Preact > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+/** @jsx h */
+import { h, Fragment } from \\"preact\\";
+
+function FigmaButton(props: any) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`Preact > jsx > Typescript Test > getterState 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 36c49fc99f..2eb23feaab 100644
--- a/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/qwik.test.ts.snap
@@ -1984,7 +1984,13 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`qwik > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import {
+"
+          /**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+          
+          import {
   Fragment,
   component$,
   h,
@@ -3682,7 +3688,13 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"import {
+"
+          /**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+          
+          import {
   $,
   Fragment,
   component$,
@@ -3851,6 +3863,23 @@ export const STYLES = \`
 "
 `;
 
+exports[`qwik > jsx > Javascript Test > complexMeta 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+          
+          import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+
+export const ComplexMetaRaw = component$((props) => {
+  return <div></div>;
+});
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`qwik > jsx > Javascript Test > contentState 1`] = `
 "import {
   Fragment,
@@ -4011,6 +4040,32 @@ export default MyComponent;
 "
 `;
 
+exports[`qwik > jsx > Javascript Test > figmaMeta 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+          
+          import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+
+export const FigmaButton = component$((props) => {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+});
+
+export default FigmaButton;
+"
+`;
+
 exports[`qwik > jsx > Javascript Test > getterState 1`] = `
 "import { Fragment, component$, h, useComputed$ } from \\"@builder.io/qwik\\";
 
@@ -5646,7 +5701,13 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`qwik > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import {
+"
+          /**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+          
+          import {
   Fragment,
   component$,
   h,
@@ -7577,7 +7638,13 @@ export const STYLES = \`
 `;
 
 exports[`qwik > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"import {
+"
+          /**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+          
+          import {
   $,
   Fragment,
   component$,
@@ -7756,6 +7823,23 @@ export const STYLES = \`
 "
 `;
 
+exports[`qwik > jsx > Typescript Test > complexMeta 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+          
+          import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+
+export const ComplexMetaRaw = component$((props: any) => {
+  return <div></div>;
+});
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`qwik > jsx > Typescript Test > contentState 1`] = `
 "import {
   Fragment,
@@ -7935,6 +8019,32 @@ export default MyComponent;
 "
 `;
 
+exports[`qwik > jsx > Typescript Test > figmaMeta 1`] = `
+"
+          /**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+          
+          import { Fragment, component$, h } from \\"@builder.io/qwik\\";
+
+export const FigmaButton = component$((props: any) => {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+});
+
+export default FigmaButton;
+"
+`;
+
 exports[`qwik > jsx > Typescript Test > getterState 1`] = `
 "import { Fragment, component$, h, useComputed$ } from \\"@builder.io/qwik\\";
 
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 e0fe28c783..dde5661493 100644
--- a/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-native.test.ts.snap
@@ -324,7 +324,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React Native > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import * as React from \\"react\\";
 import {
   FlatList,
   ScrollView,
@@ -2373,7 +2378,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React Native > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import * as React from \\"react\\";
 import {
   FlatList,
   ScrollView,
@@ -2630,6 +2640,35 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React Native > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+
+function ComplexMetaRaw(props) {
+  return <View />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React Native > jsx > Javascript Test > componentWithContext 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -2979,6 +3018,44 @@ export default MyComponent;
 "
 `;
 
+exports[`React Native > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+
+function FigmaButton(props) {
+  return (
+    <Button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      <Text>{props.label}</Text>
+    </Button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React Native > jsx > Javascript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -5537,7 +5614,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React Native > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import * as React from \\"react\\";
 import {
   FlatList,
   ScrollView,
@@ -7839,7 +7921,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React Native > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import * as React from \\"react\\";
 import {
   FlatList,
   ScrollView,
@@ -8107,6 +8194,35 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React Native > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+
+function ComplexMetaRaw(props: any) {
+  return <View />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React Native > jsx > Typescript Test > componentWithContext 1`] = `
 "import * as React from \\"react\\";
 import {
@@ -8488,6 +8604,44 @@ export default MyComponent;
 "
 `;
 
+exports[`React Native > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+import {
+  FlatList,
+  ScrollView,
+  View,
+  StyleSheet,
+  Image,
+  Text,
+  Pressable,
+  TextInput,
+  TouchableOpacity,
+  Button,
+  Linking,
+} from \\"react-native\\";
+
+function FigmaButton(props: any) {
+  return (
+    <Button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      <Text>{props.label}</Text>
+    </Button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React Native > jsx > Typescript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 import {
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
index ed4693e877..b7a0874302 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-builder.test.ts.snap
@@ -194,7 +194,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: builder > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 
@@ -1784,7 +1789,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: builder > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { forwardRef } from \\"react\\";
 
@@ -1975,6 +1985,24 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: builder > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props) {
+  const state = useBuilderState({});
+
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: builder > jsx > Javascript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -2229,6 +2257,33 @@ export default MyComponent;
 "
 `;
 
+exports[`React - stateType: builder > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props) {
+  const state = useBuilderState({});
+
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React - stateType: builder > jsx > Javascript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 
@@ -3885,7 +3940,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: builder > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 
@@ -5726,7 +5786,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: builder > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { forwardRef } from \\"react\\";
 
@@ -5928,6 +5993,24 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: builder > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props: any) {
+  const state = useBuilderState({});
+
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: builder > jsx > Typescript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -6214,6 +6297,33 @@ export default MyComponent;
 "
 `;
 
+exports[`React - stateType: builder > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props: any) {
+  const state = useBuilderState({});
+
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React - stateType: builder > jsx > Typescript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
index 214348e508..e96585d77d 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-mobx.test.ts.snap
@@ -206,7 +206,12 @@ export default observedMyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: mobx > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 import { useLocalObservable, observer } from \\"mobx-react-lite\\";
@@ -1831,7 +1836,12 @@ export default observedMyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: mobx > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { forwardRef } from \\"react\\";
 import { useLocalObservable, observer } from \\"mobx-react-lite\\";
@@ -2029,6 +2039,23 @@ export default observedMyBasicComponent;
 "
 `;
 
+exports[`React - stateType: mobx > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props) {
+  return <div />;
+}
+
+const observedComplexMetaRaw = observer(ComplexMetaRaw);
+export default observedComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: mobx > jsx > Javascript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -2281,6 +2308,32 @@ export default observedMyComponent;
 "
 `;
 
+exports[`React - stateType: mobx > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+const observedFigmaButton = observer(FigmaButton);
+export default observedFigmaButton;
+"
+`;
+
 exports[`React - stateType: mobx > jsx > Javascript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 import { useLocalObservable, observer } from \\"mobx-react-lite\\";
@@ -3946,7 +3999,12 @@ export default observedMyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: mobx > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 import { useLocalObservable, observer } from \\"mobx-react-lite\\";
@@ -5808,7 +5866,12 @@ export default observedMyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: mobx > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { forwardRef } from \\"react\\";
 import { useLocalObservable, observer } from \\"mobx-react-lite\\";
@@ -6015,6 +6078,23 @@ export default observedMyBasicComponent;
 "
 `;
 
+exports[`React - stateType: mobx > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props: any) {
+  return <div />;
+}
+
+const observedComplexMetaRaw = observer(ComplexMetaRaw);
+export default observedComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: mobx > jsx > Typescript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -6299,6 +6379,32 @@ export default observedMyComponent;
 "
 `;
 
+exports[`React - stateType: mobx > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props: any) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+const observedFigmaButton = observer(FigmaButton);
+export default observedFigmaButton;
+"
+`;
+
 exports[`React - stateType: mobx > jsx > Typescript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 import { useLocalObservable, observer } from \\"mobx-react-lite\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
index 08033a9eac..f875aff024 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-solid.test.ts.snap
@@ -199,7 +199,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: solid > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 import { useMutable } from \\"react-solid-state\\";
@@ -1776,7 +1781,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: solid > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { forwardRef } from \\"react\\";
 import { useMutable } from \\"react-solid-state\\";
@@ -1965,6 +1975,22 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: solid > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: solid > jsx > Javascript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -2209,6 +2235,31 @@ export default MyComponent;
 "
 `;
 
+exports[`React - stateType: solid > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React - stateType: solid > jsx > Javascript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 import { useMutable } from \\"react-solid-state\\";
@@ -3816,7 +3867,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: solid > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 import { useMutable } from \\"react-solid-state\\";
@@ -5630,7 +5686,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: solid > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { forwardRef } from \\"react\\";
 import { useMutable } from \\"react-solid-state\\";
@@ -5828,6 +5889,22 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: solid > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props: any) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: solid > jsx > Typescript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -6104,6 +6181,31 @@ export default MyComponent;
 "
 `;
 
+exports[`React - stateType: solid > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props: any) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React - stateType: solid > jsx > Typescript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 import { useMutable } from \\"react-solid-state\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
index 8dd5d5d2f6..574bce88dd 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-valtio.test.ts.snap
@@ -199,7 +199,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: valtio > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 import { useLocalProxy } from \\"valtio/utils\\";
@@ -1779,7 +1784,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: valtio > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { forwardRef } from \\"react\\";
 import { useLocalProxy } from \\"valtio/utils\\";
@@ -1968,6 +1978,22 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: valtio > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: valtio > jsx > Javascript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -2212,6 +2238,31 @@ export default MyComponent;
 "
 `;
 
+exports[`React - stateType: valtio > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React - stateType: valtio > jsx > Javascript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 import { useLocalProxy } from \\"valtio/utils\\";
@@ -3819,7 +3870,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: valtio > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 import { useLocalProxy } from \\"valtio/utils\\";
@@ -5636,7 +5692,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: valtio > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { forwardRef } from \\"react\\";
 import { useLocalProxy } from \\"valtio/utils\\";
@@ -5834,6 +5895,22 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: valtio > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props: any) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: valtio > jsx > Typescript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -6110,6 +6187,31 @@ export default MyComponent;
 "
 `;
 
+exports[`React - stateType: valtio > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props: any) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React - stateType: valtio > jsx > Typescript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 import { useLocalProxy } from \\"valtio/utils\\";
diff --git a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
index 95bdf7a555..5d74d8a057 100644
--- a/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react-state-variables.test.ts.snap
@@ -107,7 +107,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 
@@ -1211,7 +1216,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { forwardRef } from \\"react\\";
 
@@ -1394,6 +1404,22 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: variables > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: variables > jsx > Javascript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -1634,6 +1660,31 @@ export default MyComponent;
 "
 `;
 
+exports[`React - stateType: variables > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React - stateType: variables > jsx > Javascript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 
@@ -2864,7 +2915,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useEffect } from \\"react\\";
 
@@ -4161,7 +4217,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: variables > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { forwardRef } from \\"react\\";
 
@@ -4355,6 +4416,22 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: variables > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props: any) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: variables > jsx > Typescript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -4627,6 +4704,31 @@ export default MyComponent;
 "
 `;
 
+exports[`React - stateType: variables > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props: any) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React - stateType: variables > jsx > Typescript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
index 9a9113265f..62d6743294 100644
--- a/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/react.test.ts.snap
@@ -194,7 +194,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: useState > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, useEffect } from \\"react\\";
 
@@ -1758,7 +1763,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: useState > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, forwardRef } from \\"react\\";
 
@@ -1944,6 +1954,22 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: useState > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: useState > jsx > Javascript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -2186,6 +2212,31 @@ export default MyComponent;
 "
 `;
 
+exports[`React - stateType: useState > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React - stateType: useState > jsx > Javascript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 
@@ -3796,7 +3847,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`React - stateType: useState > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, useEffect } from \\"react\\";
 
@@ -5613,7 +5669,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`React - stateType: useState > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, forwardRef } from \\"react\\";
 
@@ -5810,6 +5871,22 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`React - stateType: useState > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props: any) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`React - stateType: useState > jsx > Typescript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -6084,6 +6161,31 @@ export default MyComponent;
 "
 `;
 
+exports[`React - stateType: useState > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props: any) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`React - stateType: useState > jsx > Typescript Test > getterState 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 096da473ee..e95bc93056 100644
--- a/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/rsc.test.ts.snap
@@ -194,7 +194,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, useEffect } from \\"react\\";
 
@@ -214,7 +219,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > BasicAttribute 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props) {
   return <input autoCapitalize=\\"on\\" autoComplete=\\"on\\" spellCheck />;
@@ -225,7 +235,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > BasicBooleanAttribute 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import MyBooleanAttributeComponent from \\"./basic-boolean-attribute-component.raw\\";
 
 function MyBooleanAttribute(props) {
@@ -434,7 +449,12 @@ export default MyPreviousComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > Button 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function Button(props) {
   return (
@@ -462,7 +482,12 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Javascript Test > Columns 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function Column(props) {
   const getColumns = function getColumns() {
@@ -522,7 +547,12 @@ export default Column;
 `;
 
 exports[`RSC > jsx > Javascript Test > ContentSlotHtml 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function ContentSlotCode(props) {
   return (
@@ -1128,7 +1158,12 @@ export default ImgStateComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > Img 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import { Builder } from \\"@builder.io/sdk\\";
 
 function ImgComponent(props) {
@@ -1180,7 +1215,12 @@ export default FormInputComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > InputParent 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import FormInputComponent from \\"./input.raw\\";
 
 function Stepper(props) {
@@ -1224,7 +1264,12 @@ export default NestedStore;
 `;
 
 exports[`RSC > jsx > Javascript Test > RawText 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function RawText(props) {
   return (
@@ -1240,7 +1285,12 @@ export default RawText;
 `;
 
 exports[`RSC > jsx > Javascript Test > Section 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function SectionComponent(props) {
   return (
@@ -1264,7 +1314,12 @@ export default SectionComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > Select 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import { Builder } from \\"@builder.io/sdk\\";
 
 function SelectComponent(props) {
@@ -1294,7 +1349,12 @@ export default SelectComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > SlotDefault 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function SlotCode(props) {
   return (
@@ -1311,7 +1371,12 @@ export default SlotCode;
 `;
 
 exports[`RSC > jsx > Javascript Test > SlotHtml 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 function SlotCode(props) {
@@ -1327,7 +1392,12 @@ export default SlotCode;
 `;
 
 exports[`RSC > jsx > Javascript Test > SlotJsx 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import ContentSlotCode from \\"./content-slot-jsx.raw\\";
 
 function SlotCode(props) {
@@ -1343,7 +1413,12 @@ export default SlotCode;
 `;
 
 exports[`RSC > jsx > Javascript Test > SlotNamed 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function SlotCode(props) {
   return (
@@ -1518,7 +1593,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > Submit 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function SubmitButton(props) {
   return (
@@ -1563,7 +1643,12 @@ export default Text;
 `;
 
 exports[`RSC > jsx > Javascript Test > Textarea 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function Textarea(props) {
   return (
@@ -1613,7 +1698,12 @@ export default UseValueAndFnFromStore;
 `;
 
 exports[`RSC > jsx > Javascript Test > Video 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function Video(props) {
   return (
@@ -1668,7 +1758,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > basicForFragment 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function BasicForFragment(props) {
   return (
@@ -1755,7 +1850,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, forwardRef } from \\"react\\";
 
@@ -1820,7 +1920,12 @@ export default MyBasicOnUpdateReturnComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > class + ClassName + css 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import MyComp from \\"./my-component\\";
 
 function MyBasicComponent(props) {
@@ -1848,7 +1953,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > class + css 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props) {
   return (
@@ -1870,7 +1980,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > className + css 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props) {
   return (
@@ -1941,6 +2056,22 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`RSC > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}},\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`RSC > jsx > Javascript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -2120,7 +2251,12 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Javascript Test > defaultValsWithTypes 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 const DEFAULT_VALUES = {
   name: \\"Sami\\",
@@ -2183,8 +2319,38 @@ export default MyComponent;
 "
 `;
 
+exports[`RSC > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}},\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`RSC > jsx > Javascript Test > getterState 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function Button(props) {
   const foo2 = function foo2() {
@@ -2211,7 +2377,12 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Javascript Test > import types 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import RenderBlock from \\"./builder-render-block.raw\\";
 
 function RenderContent(props) {
@@ -2307,7 +2478,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > nestedShow 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function NestedShow(props) {
   return (
@@ -2332,7 +2508,12 @@ export default NestedShow;
 `;
 
 exports[`RSC > jsx > Javascript Test > nestedStyles 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function NestedStyles(props) {
   return (
@@ -2463,7 +2644,12 @@ export default OnInit;
 `;
 
 exports[`RSC > jsx > Javascript Test > onInitPlain 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function OnInitPlain(props) {
   console.log(\\"onInit\\");
@@ -2560,7 +2746,12 @@ export default OnUpdateWithDeps;
 `;
 
 exports[`RSC > jsx > Javascript Test > preserveExportOrLocalStatement 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 const b = 3;
 const foo = () => {};
@@ -2577,7 +2768,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > preserveTyping 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props) {
   return (
@@ -2611,7 +2807,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > propsInterface 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props) {
   return (
@@ -2624,7 +2825,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > propsType 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props) {
   return (
@@ -2666,14 +2872,14 @@ export default OnUpdate;
 `;
 
 exports[`RSC > jsx > Javascript Test > renderBlock 1`] = `
-"Identifier expected. (213:8)
-  211 |    {shouldWrap() ? (
-  212 |    <>{isEmptyHtmlElement(tag()) ? (
-> 213 |    <tag()  {...(attributes())}  {...(actions())}  />
+"Identifier expected. (219:8)
+  217 |    {shouldWrap() ? (
+  218 |    <>{isEmptyHtmlElement(tag()) ? (
+> 219 |    <tag()  {...(attributes())}  {...(actions())}  />
       |        ^
-  214 |  ) : null}
-  215 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
-  216 |    <>{repeatItemData()?.map((data, index) => ("
+  220 |  ) : null}
+  221 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
+  222 |    <>{repeatItemData()?.map((data, index) => ("
 `;
 
 exports[`RSC > jsx > Javascript Test > renderContentExample 1`] = `
@@ -2729,7 +2935,12 @@ export default RenderContent;
 `;
 
 exports[`RSC > jsx > Javascript Test > rootFragmentMultiNode 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function Button(props) {
   return (
@@ -2757,7 +2968,12 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Javascript Test > rootShow 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function RenderStyles(props) {
   return (
@@ -2778,7 +2994,12 @@ export default RenderStyles;
 `;
 
 exports[`RSC > jsx > Javascript Test > self-referencing component 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props) {
   return (
@@ -2794,7 +3015,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > self-referencing component with children 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props) {
   return (
@@ -2838,7 +3064,12 @@ export default SetState;
 `;
 
 exports[`RSC > jsx > Javascript Test > showExpressions 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function ShowWithOtherValues(props) {
   return (
@@ -2884,7 +3115,12 @@ export default ShowWithOtherValues;
 `;
 
 exports[`RSC > jsx > Javascript Test > showWithFor 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function NestedShow(props) {
   return (
@@ -2907,7 +3143,12 @@ export default NestedShow;
 `;
 
 exports[`RSC > jsx > Javascript Test > showWithOtherValues 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function ShowWithOtherValues(props) {
   return (
@@ -2927,7 +3168,12 @@ export default ShowWithOtherValues;
 `;
 
 exports[`RSC > jsx > Javascript Test > showWithRootText 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function ShowRootText(props) {
   return <>{props.conditionA ? <>ContentA</> : <div>else-condition-A</div>}</>;
@@ -2968,7 +3214,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > spreadAttrs 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props) {
   return <input {...attrs} />;
@@ -2979,7 +3230,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > spreadNestedProps 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props) {
   return <input {...props.nested} />;
@@ -2990,7 +3246,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > spreadProps 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props) {
   return <input {...props} />;
@@ -3001,7 +3262,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > store-async-function 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function StringLiteralStore(props) {
   const arrowFunction = async function arrowFunction() {
@@ -3037,7 +3303,12 @@ export default StringLiteralStore;
 `;
 
 exports[`RSC > jsx > Javascript Test > styleClassAndCss 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props) {
   return (
@@ -3064,7 +3335,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > stylePropClassAndCss 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function StylePropClassAndCss(props) {
   return (
@@ -3089,7 +3365,12 @@ export default StylePropClassAndCss;
 `;
 
 exports[`RSC > jsx > Javascript Test > subComponent 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import Foo from \\"./foo-sub-component\\";
 
 function SubComponent(props) {
@@ -3101,7 +3382,12 @@ export default SubComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > svgComponent 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function SvgComponent(props) {
   return (
@@ -3128,7 +3414,12 @@ export default SvgComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > typeDependency 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function TypeDependency(props) {
   return <div>{props.foo}</div>;
@@ -3181,7 +3472,12 @@ export default TypeGetterStore;
 `;
 
 exports[`RSC > jsx > Javascript Test > use-style 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props) {
   return (
@@ -3204,7 +3500,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > use-style-and-css 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props) {
   return (
@@ -3232,7 +3533,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > use-style-outside-component 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props) {
   return (
@@ -3282,7 +3588,12 @@ export default UseTargetComponent;
 `;
 
 exports[`RSC > jsx > Javascript Test > webComponent 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import { register } from \\"swiper/element/bundle\\";
 
 function MyBasicWebComponent(props) {
@@ -3525,7 +3836,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, useEffect } from \\"react\\";
 
@@ -3545,7 +3861,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > BasicAttribute 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props: any) {
   return <input autoCapitalize=\\"on\\" autoComplete=\\"on\\" spellCheck />;
@@ -3556,7 +3877,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > BasicBooleanAttribute 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type Props = {
   children: any;
@@ -3782,7 +4108,12 @@ export default MyPreviousComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > Button 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface ButtonProps {
   attributes?: any;
@@ -3817,7 +4148,12 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Typescript Test > Columns 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type Column = {
   content: any; // TODO: Implement this when support for dynamic CSS lands
@@ -3892,7 +4228,12 @@ export default Column;
 `;
 
 exports[`RSC > jsx > Typescript Test > ContentSlotHtml 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type Props = {
   [key: string]: string | JSX.Element;
@@ -4569,7 +4910,12 @@ export default ImgStateComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > Img 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface ImgProps {
   attributes?: any;
@@ -4651,7 +4997,12 @@ export default FormInputComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > InputParent 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import FormInputComponent from \\"./input.raw\\";
 
 function Stepper(props: any) {
@@ -4702,7 +5053,12 @@ export default NestedStore;
 `;
 
 exports[`RSC > jsx > Typescript Test > RawText 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface RawTextProps {
   attributes?: any;
@@ -4723,7 +5079,12 @@ export default RawText;
 `;
 
 exports[`RSC > jsx > Typescript Test > Section 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface SectionProps {
   maxWidth?: number;
@@ -4753,7 +5114,12 @@ export default SectionComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > Select 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface FormSelectProps {
   options?: {
@@ -4795,7 +5161,12 @@ export default SelectComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > SlotDefault 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type Props = {
   [key: string]: string;
@@ -4816,7 +5187,12 @@ export default SlotCode;
 `;
 
 exports[`RSC > jsx > Typescript Test > SlotHtml 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type Props = {
   [key: string]: string;
@@ -4836,7 +5212,12 @@ export default SlotCode;
 `;
 
 exports[`RSC > jsx > Typescript Test > SlotJsx 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type Props = {
   [key: string]: string;
@@ -4856,7 +5237,12 @@ export default SlotCode;
 `;
 
 exports[`RSC > jsx > Typescript Test > SlotNamed 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type Props = {
   [key: string]: string;
@@ -5040,7 +5426,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > Submit 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface ButtonProps {
   attributes?: any;
@@ -5099,7 +5490,12 @@ export default Text;
 `;
 
 exports[`RSC > jsx > Typescript Test > Textarea 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface TextareaProps {
   attributes?: any;
@@ -5166,7 +5562,12 @@ export default UseValueAndFnFromStore;
 `;
 
 exports[`RSC > jsx > Typescript Test > Video 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface VideoProps {
   attributes?: any;
@@ -5247,7 +5648,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > basicForFragment 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function BasicForFragment(props: any) {
   return (
@@ -5339,7 +5745,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, forwardRef } from \\"react\\";
 
@@ -5409,7 +5820,12 @@ export default MyBasicOnUpdateReturnComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > class + ClassName + css 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import MyComp from \\"./my-component\\";
 
 function MyBasicComponent(props: any) {
@@ -5437,7 +5853,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > class + css 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props: any) {
   return (
@@ -5459,7 +5880,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > className + css 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props: any) {
   return (
@@ -5536,6 +5962,22 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`RSC > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}},\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function ComplexMetaRaw(props: any) {
+  return <div />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`RSC > jsx > Typescript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -5743,7 +6185,12 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Typescript Test > defaultValsWithTypes 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type Props = {
   name: string;
@@ -5810,8 +6257,38 @@ export default MyComponent;
 "
 `;
 
+exports[`RSC > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}},\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
+
+function FigmaButton(props: any) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`RSC > jsx > Typescript Test > getterState 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface ButtonProps {
   foo: string;
@@ -5842,7 +6319,12 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Typescript Test > import types 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type RenderContentProps = {
   options?: GetContentOptions;
@@ -5945,7 +6427,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > nestedShow 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 interface Props {
   conditionA: boolean;
@@ -5975,7 +6462,12 @@ export default NestedShow;
 `;
 
 exports[`RSC > jsx > Typescript Test > nestedStyles 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function NestedStyles(props: any) {
   return (
@@ -6110,7 +6602,12 @@ export default OnInit;
 `;
 
 exports[`RSC > jsx > Typescript Test > onInitPlain 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function OnInitPlain(props: any) {
   console.log(\\"onInit\\");
@@ -6211,7 +6708,12 @@ export default OnUpdateWithDeps;
 `;
 
 exports[`RSC > jsx > Typescript Test > preserveExportOrLocalStatement 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type Types = {
   s: any[];
@@ -6238,7 +6740,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > preserveTyping 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export type A = \\"test\\";
 export interface C {
@@ -6290,7 +6797,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > propsInterface 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 interface Person {
   name: string;
@@ -6308,7 +6820,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > propsType 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 type Person = {
   name: string;
@@ -6355,14 +6872,14 @@ export default OnUpdate;
 `;
 
 exports[`RSC > jsx > Typescript Test > renderBlock 1`] = `
-"Identifier expected. (221:8)
-  219 |    {shouldWrap() ? (
-  220 |    <>{isEmptyHtmlElement(tag()) ? (
-> 221 |    <tag()  {...(attributes())}  {...(actions())}  />
+"Identifier expected. (227:8)
+  225 |    {shouldWrap() ? (
+  226 |    <>{isEmptyHtmlElement(tag()) ? (
+> 227 |    <tag()  {...(attributes())}  {...(actions())}  />
       |        ^
-  222 |  ) : null}
-  223 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
-  224 |    <>{repeatItemData()?.map((data, index) => ("
+  228 |  ) : null}
+  229 | {!isEmptyHtmlElement(tag()) && repeatItemData() ? (
+  230 |    <>{repeatItemData()?.map((data, index) => ("
 `;
 
 exports[`RSC > jsx > Typescript Test > renderContentExample 1`] = `
@@ -6426,7 +6943,12 @@ export default RenderContent;
 `;
 
 exports[`RSC > jsx > Typescript Test > rootFragmentMultiNode 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface ButtonProps {
   attributes?: any;
@@ -6461,7 +6983,12 @@ export default Button;
 `;
 
 exports[`RSC > jsx > Typescript Test > rootShow 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export interface RenderStylesProps {
   foo: string;
@@ -6486,7 +7013,12 @@ export default RenderStyles;
 `;
 
 exports[`RSC > jsx > Typescript Test > self-referencing component 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props: any) {
   return (
@@ -6502,7 +7034,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > self-referencing component with children 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props: any) {
   return (
@@ -6546,7 +7083,12 @@ export default SetState;
 `;
 
 exports[`RSC > jsx > Typescript Test > showExpressions 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 interface Props {
   conditionA: boolean;
@@ -6597,7 +7139,12 @@ export default ShowWithOtherValues;
 `;
 
 exports[`RSC > jsx > Typescript Test > showWithFor 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 interface Props {
   conditionA: boolean;
@@ -6625,7 +7172,12 @@ export default NestedShow;
 `;
 
 exports[`RSC > jsx > Typescript Test > showWithOtherValues 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 interface Props {
   conditionA: boolean;
@@ -6649,7 +7201,12 @@ export default ShowWithOtherValues;
 `;
 
 exports[`RSC > jsx > Typescript Test > showWithRootText 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 interface Props {
   conditionA: boolean;
@@ -6703,7 +7260,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > spreadAttrs 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props: any) {
   return <input {...attrs} />;
@@ -6714,7 +7276,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > spreadNestedProps 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props: any) {
   return <input {...props.nested} />;
@@ -6725,7 +7292,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > spreadProps 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyBasicComponent(props: any) {
   return <input {...props} />;
@@ -6736,7 +7308,12 @@ export default MyBasicComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > store-async-function 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function StringLiteralStore(props: any) {
   const arrowFunction = async function arrowFunction() {
@@ -6772,7 +7349,12 @@ export default StringLiteralStore;
 `;
 
 exports[`RSC > jsx > Typescript Test > styleClassAndCss 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props: any) {
   return (
@@ -6799,7 +7381,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > stylePropClassAndCss 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function StylePropClassAndCss(props: any) {
   return (
@@ -6824,7 +7411,12 @@ export default StylePropClassAndCss;
 `;
 
 exports[`RSC > jsx > Typescript Test > subComponent 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import Foo from \\"./foo-sub-component\\";
 
 function SubComponent(props: any) {
@@ -6836,7 +7428,12 @@ export default SubComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > svgComponent 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function SvgComponent(props: any) {
   return (
@@ -6863,7 +7460,12 @@ export default SvgComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > typeDependency 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 export type TypeDependencyProps = {
   foo: Foo;
@@ -6930,7 +7532,12 @@ export default TypeGetterStore;
 `;
 
 exports[`RSC > jsx > Typescript Test > use-style 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props: any) {
   return (
@@ -6953,7 +7560,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > use-style-and-css 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props: any) {
   return (
@@ -6981,7 +7593,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > use-style-outside-component 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props: any) {
   return (
@@ -7031,7 +7648,12 @@ export default UseTargetComponent;
 `;
 
 exports[`RSC > jsx > Typescript Test > webComponent 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 import { register } from \\"swiper/element/bundle\\";
 
 function MyBasicWebComponent(props: any) {
@@ -7387,7 +8009,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > svelte > Javascript Test > slots 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props) {
   return (
@@ -7403,7 +8030,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > svelte > Javascript Test > style 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props) {
   return (
@@ -7789,7 +8421,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > svelte > Typescript Test > slots 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props: any) {
   return (
@@ -7805,7 +8442,12 @@ export default MyComponent;
 `;
 
 exports[`RSC > svelte > Typescript Test > style 1`] = `
-"import * as React from \\"react\\";
+"/**
+          useMetadata:
+          {\\"rsc\\":{\\"componentType\\":\\"server\\"}}
+          */
+
+import * as React from \\"react\\";
 
 function MyComponent(props: any) {
   return (
diff --git a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
index 152cfa6bed..8898460be9 100644
--- a/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/solid.test.ts.snap
@@ -693,7 +693,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`Solid > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import { onMount, createSignal, createMemo } from \\"solid-js\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { onMount, createSignal, createMemo } from \\"solid-js\\";
 
 function MyBasicOutputsComponent(props) {
   const [name, setName] = createSignal(\\"PatrickJS\\");
@@ -715,7 +720,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`Solid > jsx > Javascript Test > Basic Outputs Meta 2`] = `
-"import { onMount, createSignal, createMemo } from \\"solid-js\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { onMount, createSignal, createMemo } from \\"solid-js\\";
 
 function MyBasicOutputsComponent(props) {
   const [name, setName] = createSignal(\\"PatrickJS\\");
@@ -4013,7 +4023,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`Solid > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"import { createSignal, createMemo } from \\"solid-js\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { createSignal, createMemo } from \\"solid-js\\";
 
 function MyBasicForwardRefComponent(props) {
   const [name, setName] = createSignal(\\"PatrickJS\\");
@@ -4040,7 +4055,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`Solid > jsx > Javascript Test > basicForwardRefMetadata 2`] = `
-"import { createSignal, createMemo } from \\"solid-js\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { createSignal, createMemo } from \\"solid-js\\";
 
 function MyBasicForwardRefComponent(props) {
   const [name, setName] = createSignal(\\"PatrickJS\\");
@@ -4358,6 +4378,42 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Solid > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+function ComplexMetaRaw(props) {
+  return (
+    <>
+      <div></div>
+    </>
+  );
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
+exports[`Solid > jsx > Javascript Test > complexMeta 2`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+function ComplexMetaRaw(props) {
+  return (
+    <>
+      <div></div>
+    </>
+  );
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`Solid > jsx > Javascript Test > componentWithContext 1`] = `
 "import { useContext } from \\"solid-js\\";
 
@@ -4828,6 +4884,56 @@ export default MyComponent;
 "
 `;
 
+exports[`Solid > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+function FigmaButton(props) {
+  return (
+    <>
+      <button
+        data-icon={props.icon}
+        data-disabled={props.interactiveState}
+        data-width={props.width}
+        data-size={props.size}
+      >
+        {props.label}
+      </button>
+    </>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
+exports[`Solid > jsx > Javascript Test > figmaMeta 2`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+function FigmaButton(props) {
+  return (
+    <>
+      <button
+        data-icon={props.icon}
+        data-disabled={props.interactiveState}
+        data-width={props.width}
+        data-size={props.size}
+      >
+        {props.label}
+      </button>
+    </>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`Solid > jsx > Javascript Test > getterState 1`] = `
 "import { createSignal, createMemo } from \\"solid-js\\";
 
@@ -8521,7 +8627,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`Solid > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import { onMount, createSignal, createMemo } from \\"solid-js\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { onMount, createSignal, createMemo } from \\"solid-js\\";
 
 function MyBasicOutputsComponent(props: any) {
   const [name, setName] = createSignal(\\"PatrickJS\\");
@@ -8543,7 +8654,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`Solid > jsx > Typescript Test > Basic Outputs Meta 2`] = `
-"import { onMount, createSignal, createMemo } from \\"solid-js\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { onMount, createSignal, createMemo } from \\"solid-js\\";
 
 function MyBasicOutputsComponent(props: any) {
   const [name, setName] = createSignal(\\"PatrickJS\\");
@@ -12351,7 +12467,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`Solid > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"import { createSignal, createMemo } from \\"solid-js\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { createSignal, createMemo } from \\"solid-js\\";
 
 export interface Props {
   showInput: boolean;
@@ -12383,7 +12504,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`Solid > jsx > Typescript Test > basicForwardRefMetadata 2`] = `
-"import { createSignal, createMemo } from \\"solid-js\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { createSignal, createMemo } from \\"solid-js\\";
 
 export interface Props {
   showInput: boolean;
@@ -12720,6 +12846,42 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Solid > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+function ComplexMetaRaw(props: any) {
+  return (
+    <>
+      <div></div>
+    </>
+  );
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
+exports[`Solid > jsx > Typescript Test > complexMeta 2`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+function ComplexMetaRaw(props: any) {
+  return (
+    <>
+      <div></div>
+    </>
+  );
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`Solid > jsx > Typescript Test > componentWithContext 1`] = `
 "import { useContext } from \\"solid-js\\";
 
@@ -13250,6 +13412,56 @@ export default MyComponent;
 "
 `;
 
+exports[`Solid > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+function FigmaButton(props: any) {
+  return (
+    <>
+      <button
+        data-icon={props.icon}
+        data-disabled={props.interactiveState}
+        data-width={props.width}
+        data-size={props.size}
+      >
+        {props.label}
+      </button>
+    </>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
+exports[`Solid > jsx > Typescript Test > figmaMeta 2`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+function FigmaButton(props: any) {
+  return (
+    <>
+      <button
+        data-icon={props.icon}
+        data-disabled={props.interactiveState}
+        data-width={props.width}
+        data-size={props.size}
+      >
+        {props.label}
+      </button>
+    </>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`Solid > jsx > Typescript Test > getterState 1`] = `
 "import { createSignal, createMemo } from \\"solid-js\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
index c6a91fa340..e334ac61f5 100644
--- a/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/stencil.test.ts.snap
@@ -292,7 +292,12 @@ export class MyBasicOutputsComponent {
 `;
 
 exports[`Stencil > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"import { Component, h, Fragment, Event, Prop, State } from \\"@stencil/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { Component, h, Fragment, Event, Prop, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-outputs-component\\",
@@ -2097,7 +2102,12 @@ export class MyBasicForwardRefComponent {
 `;
 
 exports[`Stencil > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-forward-ref-component\\",
@@ -2295,6 +2305,25 @@ export class MyBasicComponent {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import { Component, h, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"complex-meta-raw\\",
+})
+export class ComplexMetaRaw {
+  render() {
+    return <div></div>;
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Javascript Test > componentWithContext 1`] = `
 "import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
@@ -2523,6 +2552,40 @@ export class MyComponent {
 "
 `;
 
+exports[`Stencil > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"figma-button\\",
+})
+export class FigmaButton {
+  @Prop() icon: any;
+  @Prop() interactiveState: any;
+  @Prop() width: any;
+  @Prop() size: any;
+  @Prop() label: any;
+
+  render() {
+    return (
+      <button
+        data-icon={this.icon}
+        data-disabled={this.interactiveState}
+        data-width={this.width}
+        data-size={this.size}
+      >
+        {this.label}
+      </button>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Javascript Test > getterState 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
@@ -4157,7 +4220,12 @@ export class MyBasicOutputsComponent {
 `;
 
 exports[`Stencil > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"import { Component, h, Fragment, Event, Prop, State } from \\"@stencil/core\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+import { Component, h, Fragment, Event, Prop, State } from \\"@stencil/core\\";
 
 @Component({
   tag: \\"my-basic-outputs-component\\",
@@ -6217,7 +6285,12 @@ export class MyBasicForwardRefComponent {
 `;
 
 exports[`Stencil > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+import { Component, h, Fragment, Prop, State } from \\"@stencil/core\\";
 
 export interface Props {
   showInput: boolean;
@@ -6427,6 +6500,25 @@ export class MyBasicComponent {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import { Component, h, Fragment } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"complex-meta-raw\\",
+})
+export class ComplexMetaRaw {
+  render() {
+    return <div></div>;
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Typescript Test > componentWithContext 1`] = `
 "import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
@@ -6685,6 +6777,40 @@ export class MyComponent {
 "
 `;
 
+exports[`Stencil > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
+
+@Component({
+  tag: \\"figma-button\\",
+})
+export class FigmaButton {
+  @Prop() icon: any;
+  @Prop() interactiveState: any;
+  @Prop() width: any;
+  @Prop() size: any;
+  @Prop() label: any;
+
+  render() {
+    return (
+      <button
+        data-icon={this.icon}
+        data-disabled={this.interactiveState}
+        data-width={this.width}
+        data-size={this.size}
+      >
+        {this.label}
+      </button>
+    );
+  }
+}
+"
+`;
+
 exports[`Stencil > jsx > Typescript Test > getterState 1`] = `
 "import { Component, h, Fragment, Prop } from \\"@stencil/core\\";
 
diff --git a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
index 59c19c2c1a..99760aaf07 100644
--- a/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/svelte.test.ts.snap
@@ -224,22 +224,47 @@ exports[`Svelte > jsx > Javascript Test > Basic Outputs 1`] = `
 `;
 
 exports[`Svelte > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"<script>
-  import { onMount } from \\"svelte\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+          
+          <script >
+  import { onMount } from 'svelte'
+
+
+
+
+
+
+
+
 
   export let onMessage;
-  export let onEvent;
-  export let message;
+export let onEvent;
+export let message;
+
+
+
+
+
+
+
+
+  let name = 'PatrickJS';
+
+
+  onMount(() => { onMessage(name);
+onEvent(message); });
+
+
+
+
 
-  let name = \\"PatrickJS\\";
 
-  onMount(() => {
-    onMessage(name);
-    onEvent(message);
-  });
 </script>
 
-<div />"
+<div ></div>"
 `;
 
 exports[`Svelte > jsx > Javascript Test > BasicAttribute 1`] = `"<input autocapitalize=\\"on\\" autocomplete=\\"on\\" spellcheck={true} />"`;
@@ -1616,19 +1641,50 @@ exports[`Svelte > jsx > Javascript Test > basicForwardRef 1`] = `
 `;
 
 exports[`Svelte > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"<script>
-  export let inputRef;
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+          
+          <script >
 
-  let name = \\"PatrickJS\\";
-</script>
 
-<div><input class=\\"input\\" bind:this={inputRef} bind:value={name} /></div>
 
-<style>
-  .input {
-    color: red;
-  }
-</style>"
+
+
+
+
+
+
+
+    export let inputRef;
+
+
+
+
+
+
+
+
+    let name = 'PatrickJS';
+
+
+
+
+
+
+
+
+
+  </script>
+
+  <div ><input  class=\\"input\\"  bind:this={inputRef}  bind:value={name}  /></div>
+
+  <style>
+    .input {
+color: red;
+}
+  </style>"
 `;
 
 exports[`Svelte > jsx > Javascript Test > basicOnUpdateReturn 1`] = `
@@ -1740,6 +1796,47 @@ exports[`Svelte > jsx > Javascript Test > classState 1`] = `
 </style>"
 `;
 
+exports[`Svelte > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+          
+          <script >
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</script>
+
+<div ></div>"
+`;
+
 exports[`Svelte > jsx > Javascript Test > componentWithContext 1`] = `
 "<script>
   import { getContext, setContext } from \\"svelte\\";
@@ -1917,6 +2014,51 @@ exports[`Svelte > jsx > Javascript Test > expressionState 1`] = `
 <div>{refToUse}</div>"
 `;
 
+exports[`Svelte > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+          
+          <script >
+
+
+
+
+
+
+
+
+
+
+  export let icon;
+export let interactiveState;
+export let width;
+export let size;
+export let label;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</script>
+
+<button  data-icon={icon}  data-disabled={interactiveState}  data-width={width}  data-size={size} >{label}</button>"
+`;
+
 exports[`Svelte > jsx > Javascript Test > getterState 1`] = `
 "<script>
   export let foo;
@@ -3306,22 +3448,47 @@ exports[`Svelte > jsx > Typescript Test > Basic Outputs 1`] = `
 `;
 
 exports[`Svelte > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"<script lang=\\"ts\\">
-  import { onMount } from \\"svelte\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+          
+          <script lang='ts'>
+  import { onMount } from 'svelte'
+
+
+
+
+
+
+
+
 
   export let onMessage;
-  export let onEvent;
-  export let message;
+export let onEvent;
+export let message;
+
+
+
+
+
+
+
+
+  let name = 'PatrickJS';
+
+
+  onMount(() => { onMessage(name);
+onEvent(message); });
+
+
+
+
 
-  let name = \\"PatrickJS\\";
 
-  onMount(() => {
-    onMessage(name);
-    onEvent(message);
-  });
 </script>
 
-<div />"
+<div ></div>"
 `;
 
 exports[`Svelte > jsx > Typescript Test > BasicAttribute 1`] = `
@@ -5038,26 +5205,60 @@ exports[`Svelte > jsx > Typescript Test > basicForwardRef 1`] = `
 `;
 
 exports[`Svelte > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"<script context=\\"module\\" lang=\\"ts\\">
-  export interface Props {
-    showInput: boolean;
-    inputRef: HTMLInputElement;
-  }
-</script>
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+          
+          <script context='module' lang='ts'>
+      export interface Props {
+showInput: boolean;
+inputRef: HTMLInputElement;
+}
 
-<script lang=\\"ts\\">
-  export let inputRef: Props[\\"inputRef\\"];
+    </script>
+    
 
-  let name = \\"PatrickJS\\";
-</script>
+    
+<script lang='ts'>
 
-<div><input class=\\"input\\" bind:this={inputRef} bind:value={name} /></div>
 
-<style>
-  .input {
-    color: red;
-  }
-</style>"
+
+
+
+
+
+
+
+
+    export let inputRef: Props['inputRef'];
+
+
+
+
+
+
+
+
+    let name = 'PatrickJS';
+
+
+
+
+
+
+
+
+
+  </script>
+
+  <div ><input  class=\\"input\\"  bind:this={inputRef}  bind:value={name}  /></div>
+
+  <style>
+    .input {
+color: red;
+}
+  </style>"
 `;
 
 exports[`Svelte > jsx > Typescript Test > basicOnUpdateReturn 1`] = `
@@ -5184,6 +5385,47 @@ exports[`Svelte > jsx > Typescript Test > classState 1`] = `
 </style>"
 `;
 
+exports[`Svelte > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+          
+          <script lang='ts'>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</script>
+
+<div ></div>"
+`;
+
 exports[`Svelte > jsx > Typescript Test > componentWithContext 1`] = `
 "<script context=\\"module\\" lang=\\"ts\\">
   export interface ComponentWithContextProps {
@@ -5403,6 +5645,51 @@ exports[`Svelte > jsx > Typescript Test > expressionState 1`] = `
 <div>{refToUse}</div>"
 `;
 
+exports[`Svelte > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+          
+          <script lang='ts'>
+
+
+
+
+
+
+
+
+
+
+  export let icon;
+export let interactiveState;
+export let width;
+export let size;
+export let label;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</script>
+
+<button  data-icon={icon}  data-disabled={interactiveState}  data-width={width}  data-size={size} >{label}</button>"
+`;
+
 exports[`Svelte > jsx > Typescript Test > getterState 1`] = `
 "<script context=\\"module\\" lang=\\"ts\\">
   export interface ButtonProps {
diff --git a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
index f3464bbee9..8819e1ca53 100644
--- a/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/taro.test.ts.snap
@@ -198,7 +198,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`Taro > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, useEffect } from \\"react\\";
 import { View } from \\"@tarojs/components\\";
@@ -1771,7 +1776,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`Taro > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, forwardRef } from \\"react\\";
 import { View, Input } from \\"@tarojs/components\\";
@@ -1962,6 +1972,23 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Taro > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import * as React from \\"react\\";
+import { View } from \\"@tarojs/components\\";
+
+function ComplexMetaRaw(props) {
+  return <View />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`Taro > jsx > Javascript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -2209,6 +2236,32 @@ export default MyComponent;
 "
 `;
 
+exports[`Taro > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+import { Button, View, Text } from \\"@tarojs/components\\";
+
+function FigmaButton(props) {
+  return (
+    <Button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </Button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`Taro > jsx > Javascript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 import { View, Text } from \\"@tarojs/components\\";
@@ -3874,7 +3927,12 @@ export default MyBasicOutputsComponent;
 `;
 
 exports[`Taro > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, useEffect } from \\"react\\";
 import { View } from \\"@tarojs/components\\";
@@ -5714,7 +5772,12 @@ export default MyBasicForwardRefComponent;
 `;
 
 exports[`Taro > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"\\"use client\\";
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+\\"use client\\";
 import * as React from \\"react\\";
 import { useState, forwardRef } from \\"react\\";
 
@@ -5917,6 +5980,23 @@ export default MyBasicComponent;
 "
 `;
 
+exports[`Taro > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+import * as React from \\"react\\";
+import { View } from \\"@tarojs/components\\";
+
+function ComplexMetaRaw(props: any) {
+  return <View />;
+}
+
+export default ComplexMetaRaw;
+"
+`;
+
 exports[`Taro > jsx > Typescript Test > componentWithContext 1`] = `
 "\\"use client\\";
 import * as React from \\"react\\";
@@ -6198,6 +6278,32 @@ export default MyComponent;
 "
 `;
 
+exports[`Taro > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+import * as React from \\"react\\";
+import { Button, View, Text } from \\"@tarojs/components\\";
+
+function FigmaButton(props: any) {
+  return (
+    <Button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </Button>
+  );
+}
+
+export default FigmaButton;
+"
+`;
+
 exports[`Taro > jsx > Typescript Test > getterState 1`] = `
 "import * as React from \\"react\\";
 
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 dc06581a78..747e527ebb 100644
--- a/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue-composition.test.ts.snap
@@ -245,7 +245,10 @@ onMounted(() => {
 `;
 
 exports[`Vue > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"<template>
+"/** useMetadata: {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside
+component\\"} */
+
+<template>
   <div></div>
 </template>
 
@@ -1733,7 +1736,9 @@ const name = ref(\\"PatrickJS\\");
 `;
 
 exports[`Vue > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"<template>
+"/** useMetadata: {\\"forwardRef\\":\\"inputRef\\"} */
+
+<template>
   <div>
     <input
       class=\\"input\\"
@@ -1880,6 +1885,16 @@ const styleState = ref({
 </style>"
 `;
 
+exports[`Vue > jsx > Javascript Test > complexMeta 1`] = `
+"/** useMetadata:
+{\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+*/
+
+<template>
+  <div></div>
+</template>"
+`;
+
 exports[`Vue > jsx > Javascript Test > componentWithContext 1`] = `
 "<template>
   {{ foo.value }}
@@ -2078,6 +2093,40 @@ const refToUse = ref(
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > figmaMeta 1`] = `
+"/** useMetadata:
+{\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍
+Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon
+Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️
+Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️
+Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive
+State\\",\\"value\\":{\\"(Def)
+Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def)
+Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def)
+Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
+
+<template>
+  <button
+    :data-icon=\\"icon\\"
+    :data-disabled=\\"interactiveState\\"
+    :data-width=\\"width\\"
+    :data-size=\\"size\\"
+  >
+    {{ label }}
+  </button>
+</template>
+
+<script setup>
+const props = defineProps([
+  \\"icon\\",
+  \\"interactiveState\\",
+  \\"width\\",
+  \\"size\\",
+  \\"label\\",
+]);
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > getterState 1`] = `
 "<template>
   <div>
@@ -3600,7 +3649,10 @@ onMounted(() => {
 `;
 
 exports[`Vue > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"<template>
+"/** useMetadata: {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside
+component\\"} */
+
+<template>
   <div></div>
 </template>
 
@@ -5283,7 +5335,9 @@ const name = ref(\\"PatrickJS\\");
 `;
 
 exports[`Vue > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"<template>
+"/** useMetadata: {\\"forwardRef\\":\\"inputRef\\"} */
+
+<template>
   <div>
     <input
       class=\\"input\\"
@@ -5442,6 +5496,16 @@ const styleState = ref({
 </style>"
 `;
 
+exports[`Vue > jsx > Typescript Test > complexMeta 1`] = `
+"/** useMetadata:
+{\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+*/
+
+<template>
+  <div></div>
+</template>"
+`;
+
 exports[`Vue > jsx > Typescript Test > componentWithContext 1`] = `
 "<template>
   {{ foo.value }}
@@ -5670,6 +5734,40 @@ const refToUse = ref(
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > figmaMeta 1`] = `
+"/** useMetadata:
+{\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍
+Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon
+Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️
+Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️
+Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive
+State\\",\\"value\\":{\\"(Def)
+Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def)
+Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def)
+Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
+
+<template>
+  <button
+    :data-icon=\\"icon\\"
+    :data-disabled=\\"interactiveState\\"
+    :data-width=\\"width\\"
+    :data-size=\\"size\\"
+  >
+    {{ label }}
+  </button>
+</template>
+
+<script setup lang=\\"ts\\">
+const props = defineProps([
+  \\"icon\\",
+  \\"interactiveState\\",
+  \\"width\\",
+  \\"size\\",
+  \\"label\\",
+]);
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > getterState 1`] = `
 "<template>
   <div>
diff --git a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
index f7f020af64..b18a221f6a 100644
--- a/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/vue.test.ts.snap
@@ -308,7 +308,10 @@ export default defineComponent({
 `;
 
 exports[`Vue > jsx > Javascript Test > Basic Outputs Meta 1`] = `
-"<template>
+"/** useMetadata: {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside
+component\\"} */
+
+<template>
   <div></div>
 </template>
 
@@ -2048,7 +2051,9 @@ export default defineComponent({
 `;
 
 exports[`Vue > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
-"<template>
+"/** useMetadata: {\\"forwardRef\\":\\"inputRef\\"} */
+
+<template>
   <div>
     <input
       class=\\"input\\"
@@ -2250,6 +2255,24 @@ export default defineComponent({
 </style>"
 `;
 
+exports[`Vue > jsx > Javascript Test > complexMeta 1`] = `
+"/** useMetadata:
+{\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+*/
+
+<template>
+  <div></div>
+</template>
+
+<script>
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"complex-meta-raw\\",
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > componentWithContext 1`] = `
 "<template>
   {{ foo.value }}
@@ -2516,6 +2539,40 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Javascript Test > figmaMeta 1`] = `
+"/** useMetadata:
+{\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍
+Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon
+Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️
+Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️
+Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive
+State\\",\\"value\\":{\\"(Def)
+Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def)
+Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def)
+Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
+
+<template>
+  <button
+    :data-icon=\\"icon\\"
+    :data-disabled=\\"interactiveState\\"
+    :data-width=\\"width\\"
+    :data-size=\\"size\\"
+  >
+    {{ label }}
+  </button>
+</template>
+
+<script>
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"figma-button\\",
+
+  props: [\\"icon\\", \\"interactiveState\\", \\"width\\", \\"size\\", \\"label\\"],
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Javascript Test > getterState 1`] = `
 "<template>
   <div>
@@ -4514,7 +4571,10 @@ export default defineComponent({
 `;
 
 exports[`Vue > jsx > Typescript Test > Basic Outputs Meta 1`] = `
-"<template>
+"/** useMetadata: {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside
+component\\"} */
+
+<template>
   <div></div>
 </template>
 
@@ -6509,7 +6569,9 @@ export default defineComponent({
 `;
 
 exports[`Vue > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"<template>
+"/** useMetadata: {\\"forwardRef\\":\\"inputRef\\"} */
+
+<template>
   <div>
     <input
       class=\\"input\\"
@@ -6723,6 +6785,24 @@ export default defineComponent({
 </style>"
 `;
 
+exports[`Vue > jsx > Typescript Test > complexMeta 1`] = `
+"/** useMetadata:
+{\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+*/
+
+<template>
+  <div></div>
+</template>
+
+<script lang=\\"ts\\">
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"complex-meta-raw\\",
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > componentWithContext 1`] = `
 "<template>
   {{ foo.value }}
@@ -7019,6 +7099,40 @@ export default defineComponent({
 </script>"
 `;
 
+exports[`Vue > jsx > Typescript Test > figmaMeta 1`] = `
+"/** useMetadata:
+{\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍
+Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon
+Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️
+Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️
+Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive
+State\\",\\"value\\":{\\"(Def)
+Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def)
+Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def)
+Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}} */
+
+<template>
+  <button
+    :data-icon=\\"icon\\"
+    :data-disabled=\\"interactiveState\\"
+    :data-width=\\"width\\"
+    :data-size=\\"size\\"
+  >
+    {{ label }}
+  </button>
+</template>
+
+<script lang=\\"ts\\">
+import { defineComponent } from \\"vue\\";
+
+export default defineComponent({
+  name: \\"figma-button\\",
+
+  props: [\\"icon\\", \\"interactiveState\\", \\"width\\", \\"size\\", \\"label\\"],
+});
+</script>"
+`;
+
 exports[`Vue > jsx > Typescript Test > getterState 1`] = `
 "<template>
   <div>
diff --git a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
index df5c975635..35b3b89e4a 100644
--- a/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
+++ b/packages/core/src/__tests__/__snapshots__/webcomponent.test.ts.snap
@@ -1892,6 +1892,11 @@ customElements.define(\\"my-basic-outputs-component\\", MyBasicOutputsComponent)
 
 exports[`webcomponent > jsx > Javascript Test > Basic Outputs Meta 1`] = `
 "/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+/**
  * Usage:
  *
  *  <my-basic-outputs-component></my-basic-outputs-component>
@@ -8210,6 +8215,11 @@ customElements.define(
 
 exports[`webcomponent > jsx > Javascript Test > basicForwardRefMetadata 1`] = `
 "/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+/**
  * Usage:
  *
  *  <my-basic-forward-ref-component></my-basic-forward-ref-component>
@@ -8990,6 +9000,99 @@ customElements.define(\\"my-basic-component\\", MyBasicComponent);
 "
 `;
 
+exports[`webcomponent > jsx > Javascript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+/**
+ * Usage:
+ *
+ *  <complex-meta-raw></complex-meta-raw>
+ *
+ */
+class ComplexMetaRaw extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {};
+    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></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(\\"complex-meta-raw\\", ComplexMetaRaw);
+"
+`;
+
 exports[`webcomponent > jsx > Javascript Test > componentWithContext 1`] = `
 "import Context1 from \\"@dummy/1\\";
 import Context2 from \\"@dummy/2\\";
@@ -10115,6 +10218,137 @@ customElements.define(\\"my-component\\", MyComponent);
 "
 `;
 
+exports[`webcomponent > jsx > Javascript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+/**
+ * Usage:
+ *
+ *  <figma-button></figma-button>
+ *
+ */
+class FigmaButton extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {};
+    if (!this.props) {
+      this.props = {};
+    }
+
+    this.componentProps = [
+      \\"icon\\",
+      \\"interactiveState\\",
+      \\"width\\",
+      \\"size\\",
+      \\"label\\",
+    ];
+
+    // 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.getAttributeNames().forEach((attr) => {
+      const jsVar = attr.replace(/-/g, \\"\\");
+      const regexp = new RegExp(jsVar, \\"i\\");
+      this.componentProps.forEach((prop) => {
+        if (regexp.test(prop)) {
+          const attrValue = this.getAttribute(attr);
+          if (this.props[prop] !== attrValue) {
+            this.props[prop] = attrValue;
+          }
+        }
+      });
+    });
+
+    this._root.innerHTML = \`
+      <button data-el=\\"button-figma-button-1\\">
+        <template data-el=\\"div-figma-button-1\\"><!-- props.label --></template>
+      </button>\`;
+    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() {
+    this._root
+      .querySelectorAll(\\"[data-el='button-figma-button-1']\\")
+      .forEach((el) => {
+        el.setAttribute(\\"data-icon\\", this.props.icon);
+        el.setAttribute(\\"data-disabled\\", this.props.interactiveState);
+        el.setAttribute(\\"data-width\\", this.props.width);
+        el.setAttribute(\\"data-size\\", this.props.size);
+      });
+
+    this._root
+      .querySelectorAll(\\"[data-el='div-figma-button-1']\\")
+      .forEach((el) => {
+        this.renderTextNode(el, this.props.label);
+      });
+  }
+
+  // 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(\\"figma-button\\", FigmaButton);
+"
+`;
+
 exports[`webcomponent > jsx > Javascript Test > getterState 1`] = `
 "/**
  * Usage:
@@ -18347,6 +18581,11 @@ customElements.define(\\"my-basic-outputs-component\\", MyBasicOutputsComponent)
 
 exports[`webcomponent > jsx > Typescript Test > Basic Outputs Meta 1`] = `
 "/**
+          useMetadata:
+          {\\"outputs\\":[\\"onMessage\\",\\"onEvent\\"],\\"baz\\":\\"metadata inside component\\"}
+          */
+
+/**
  * Usage:
  *
  *  <my-basic-outputs-component></my-basic-outputs-component>
@@ -24888,7 +25127,12 @@ customElements.define(
 `;
 
 exports[`webcomponent > jsx > Typescript Test > basicForwardRefMetadata 1`] = `
-"export interface Props {
+"/**
+          useMetadata:
+          {\\"forwardRef\\":\\"inputRef\\"}
+          */
+
+export interface Props {
   showInput: boolean;
   inputRef: HTMLInputElement;
 }
@@ -25681,6 +25925,99 @@ customElements.define(\\"my-basic-component\\", MyBasicComponent);
 "
 `;
 
+exports[`webcomponent > jsx > Typescript Test > complexMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"x\\":\\"y\\",\\"asdf\\":{\\"stringValue\\":\\"d\\",\\"booleanValue\\":true,\\"numberValue\\":1,\\"innerObject\\":{\\"stringValue\\":\\"inner\\",\\"numberValue\\":2,\\"booleanValue\\":false}}}
+          */
+
+/**
+ * Usage:
+ *
+ *  <complex-meta-raw></complex-meta-raw>
+ *
+ */
+class ComplexMetaRaw extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {};
+    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></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(\\"complex-meta-raw\\", ComplexMetaRaw);
+"
+`;
+
 exports[`webcomponent > jsx > Typescript Test > componentWithContext 1`] = `
 "export interface ComponentWithContextProps {
   content: string;
@@ -26836,6 +27173,137 @@ customElements.define(\\"my-component\\", MyComponent);
 "
 `;
 
+exports[`webcomponent > jsx > Typescript Test > figmaMeta 1`] = `
+"/**
+          useMetadata:
+          {\\"figma\\":{\\"name\\":\\"def-button-beta-outlined\\",\\"url\\":\\"https://www.figma.com/xxx\\",\\"props\\":{\\"iconSmall\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Small\\"},\\"iconMedium\\":{\\"type\\":\\"instance\\",\\"key\\":\\"📍 Icon Medium\\"},\\"label\\":{\\"type\\":\\"string\\",\\"key\\":\\"✏️ Label\\"},\\"icon\\":{\\"type\\":\\"boolean\\",\\"key\\":\\"👁️ Icon\\",\\"value\\":{\\"false\\":false,\\"true\\":\\"placeholder\\"}},\\"interactiveState\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Interactive State\\",\\"value\\":{\\"(Def) Enabled\\":false,\\"Hovered\\":false,\\"Pressed\\":false,\\"Focused\\":false,\\"Disabled\\":\\"true\\"}},\\"size\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Size\\",\\"value\\":{\\"(Def) Medium\\":false,\\"Small\\":\\"small\\"}},\\"width\\":{\\"type\\":\\"enum\\",\\"key\\":\\"Width\\",\\"value\\":{\\"(Def) Auto Width\\":false,\\"Full Width\\":\\"full\\"}}}}}
+          */
+
+/**
+ * Usage:
+ *
+ *  <figma-button></figma-button>
+ *
+ */
+class FigmaButton extends HTMLElement {
+  get _root() {
+    return this.shadowRoot || this;
+  }
+
+  constructor() {
+    super();
+    const self = this;
+
+    this.state = {};
+    if (!this.props) {
+      this.props = {};
+    }
+
+    this.componentProps = [
+      \\"icon\\",
+      \\"interactiveState\\",
+      \\"width\\",
+      \\"size\\",
+      \\"label\\",
+    ];
+
+    // 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.getAttributeNames().forEach((attr) => {
+      const jsVar = attr.replace(/-/g, \\"\\");
+      const regexp = new RegExp(jsVar, \\"i\\");
+      this.componentProps.forEach((prop) => {
+        if (regexp.test(prop)) {
+          const attrValue = this.getAttribute(attr);
+          if (this.props[prop] !== attrValue) {
+            this.props[prop] = attrValue;
+          }
+        }
+      });
+    });
+
+    this._root.innerHTML = \`
+      <button data-el=\\"button-figma-button-1\\">
+        <template data-el=\\"div-figma-button-1\\"><!-- props.label --></template>
+      </button>\`;
+    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() {
+    this._root
+      .querySelectorAll(\\"[data-el='button-figma-button-1']\\")
+      .forEach((el) => {
+        el.setAttribute(\\"data-icon\\", this.props.icon);
+        el.setAttribute(\\"data-disabled\\", this.props.interactiveState);
+        el.setAttribute(\\"data-width\\", this.props.width);
+        el.setAttribute(\\"data-size\\", this.props.size);
+      });
+
+    this._root
+      .querySelectorAll(\\"[data-el='div-figma-button-1']\\")
+      .forEach((el) => {
+        this.renderTextNode(el, this.props.label);
+      });
+  }
+
+  // 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(\\"figma-button\\", FigmaButton);
+"
+`;
+
 exports[`webcomponent > jsx > Typescript Test > getterState 1`] = `
 "export interface ButtonProps {
   foo: string;
diff --git a/packages/core/src/__tests__/data/meta/figma.ts b/packages/core/src/__tests__/data/meta/figma.ts
new file mode 100644
index 0000000000..5ade4321e9
--- /dev/null
+++ b/packages/core/src/__tests__/data/meta/figma.ts
@@ -0,0 +1,12 @@
+export type FigmaProp = {
+  type: 'instance' | 'string' | 'boolean' | 'enum' | 'children' | 'textContent';
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  value?: Record<string, any>;
+  key: string;
+};
+
+export type FigmaCodeConnect = {
+  name: string;
+  url: string;
+  props: Record<string, FigmaProp>;
+};
diff --git a/packages/core/src/__tests__/data/meta/figma/data.ts b/packages/core/src/__tests__/data/meta/figma/data.ts
new file mode 100644
index 0000000000..8a3446f086
--- /dev/null
+++ b/packages/core/src/__tests__/data/meta/figma/data.ts
@@ -0,0 +1,48 @@
+import { FigmaCodeConnect, FigmaProp } from '../figma';
+
+const buttonProps: Record<string, FigmaProp> = {
+  iconSmall: { type: 'instance', key: '📍 Icon Small' },
+  iconMedium: { type: 'instance', key: '📍 Icon Medium' },
+  label: { type: 'string', key: '✏️ Label' },
+  icon: {
+    type: 'boolean',
+    key: '👁️ Icon',
+    value: {
+      false: false,
+      true: 'placeholder',
+    },
+  },
+  interactiveState: {
+    type: 'enum',
+    key: 'Interactive State',
+    value: {
+      '(Def) Enabled': false,
+      Hovered: false,
+      Pressed: false,
+      Focused: false,
+      Disabled: 'true',
+    },
+  },
+  size: {
+    type: 'enum',
+    key: 'Size',
+    value: {
+      '(Def) Medium': false,
+      Small: 'small',
+    },
+  },
+  width: {
+    type: 'enum',
+    key: 'Width',
+    value: {
+      '(Def) Auto Width': false,
+      'Full Width': 'full',
+    },
+  },
+};
+
+export const outline: FigmaCodeConnect = {
+  name: 'def-button-beta-outlined',
+  url: 'https://www.figma.com/xxx',
+  props: buttonProps,
+};
diff --git a/packages/core/src/__tests__/data/meta/figma/figma.raw.tsx b/packages/core/src/__tests__/data/meta/figma/figma.raw.tsx
new file mode 100644
index 0000000000..48e32f61ce
--- /dev/null
+++ b/packages/core/src/__tests__/data/meta/figma/figma.raw.tsx
@@ -0,0 +1,19 @@
+import { useMetadata } from '@builder.io/mitosis';
+import { outline } from './data';
+
+useMetadata({
+  figma: outline,
+});
+
+export default function FigmaButton(props: any) {
+  return (
+    <button
+      data-icon={props.icon}
+      data-disabled={props.interactiveState}
+      data-width={props.width}
+      data-size={props.size}
+    >
+      {props.label}
+    </button>
+  );
+}
diff --git a/packages/core/src/__tests__/data/meta/meta.ts b/packages/core/src/__tests__/data/meta/meta.ts
new file mode 100644
index 0000000000..c6200ee413
--- /dev/null
+++ b/packages/core/src/__tests__/data/meta/meta.ts
@@ -0,0 +1 @@
+export const xyz = { spreadStringValue: 'f' };
diff --git a/packages/core/src/__tests__/data/meta/sub/complex-meta.raw.tsx b/packages/core/src/__tests__/data/meta/sub/complex-meta.raw.tsx
new file mode 100644
index 0000000000..1b3a4bfd3d
--- /dev/null
+++ b/packages/core/src/__tests__/data/meta/sub/complex-meta.raw.tsx
@@ -0,0 +1,11 @@
+import { useMetadata } from '@builder.io/mitosis';
+import { abc } from './meta-sub';
+
+useMetadata({
+  x: 'y',
+  asdf: abc,
+});
+
+export default function ComplexMetaRaw() {
+  return <div></div>;
+}
diff --git a/packages/core/src/__tests__/data/meta/sub/meta-model.ts b/packages/core/src/__tests__/data/meta/sub/meta-model.ts
new file mode 100644
index 0000000000..8e7a177966
--- /dev/null
+++ b/packages/core/src/__tests__/data/meta/sub/meta-model.ts
@@ -0,0 +1,7 @@
+export type MetaModel = {
+  stringValue?: string;
+  spreadStringValue?: string;
+  booleanValue?: boolean;
+  numberValue?: number;
+  innerObject?: MetaModel;
+};
diff --git a/packages/core/src/__tests__/data/meta/sub/meta-sub.ts b/packages/core/src/__tests__/data/meta/sub/meta-sub.ts
new file mode 100644
index 0000000000..5b0593d712
--- /dev/null
+++ b/packages/core/src/__tests__/data/meta/sub/meta-sub.ts
@@ -0,0 +1,14 @@
+import { xyz } from '../meta';
+import { MetaModel } from './meta-model';
+
+export const abc: MetaModel = {
+  stringValue: 'd',
+  booleanValue: true,
+  numberValue: 1,
+  innerObject: { stringValue: 'inner', numberValue: 2, booleanValue: false },
+  ...xyz,
+};
+
+const aaa: MetaModel = { stringValue: 'i', ...xyz };
+
+export default aaa;
diff --git a/packages/core/src/__tests__/test-generator.ts b/packages/core/src/__tests__/test-generator.ts
index c939c914df..d3b759a6fe 100644
--- a/packages/core/src/__tests__/test-generator.ts
+++ b/packages/core/src/__tests__/test-generator.ts
@@ -2,7 +2,7 @@ import { parseJsx } from '@/parsers/jsx';
 import { Target } from '@/types/config';
 import { BaseTranspilerOptions, TranspilerGenerator } from '@/types/transpiler';
 import { describe, expect, test } from 'vitest';
-import { MitosisComponent, createTypescriptProject, parseSvelte } from '..';
+import { MitosisComponent, Plugin, createTypescriptProject, parseSvelte } from '..';
 
 const getRawFile = async (filePath: string) => {
   const code = await import(`${filePath}?raw`).then((x) => x.default as string);
@@ -19,6 +19,8 @@ const basicForShow = getRawFile('./data/for/basic-for-show.raw.tsx');
 const basicBooleanAttribute = getRawFile('./data/basic-boolean-attribute.raw.tsx');
 const basicOnMountUpdate = getRawFile('./data/basic-onMount-update.raw.tsx');
 const basicContext = getRawFile('./data/basic-context.raw.tsx');
+const complexMeta = getRawFile('./data/meta/sub/complex-meta.raw.tsx');
+const figmaMeta = getRawFile('./data/meta/figma/figma.raw.tsx');
 const basicOutputsMeta = getRawFile('./data/basic-outputs-meta.raw.tsx');
 const basicOutputs = getRawFile('./data/basic-outputs.raw.tsx');
 const subComponent = getRawFile('./data/sub-component.raw.tsx');
@@ -227,6 +229,8 @@ const BASIC_TESTS: Tests = {
   'onInit & onMount': onInitonMount,
   'Basic Context': basicContext,
   'Basic Outputs Meta': basicOutputsMeta,
+  complexMeta,
+  figmaMeta,
   'Basic Outputs': basicOutputs,
   className: classNameJsx,
   'Image State': imageState,
@@ -578,6 +582,24 @@ const JSX_TESTS_FOR_TARGET: Partial<Record<Target, Tests[]>> = {
   ],
 };
 
+const metaDataPlugin: Plugin = () => ({
+  code: {
+    pre: (code: string, json: MitosisComponent) => {
+      if (json.meta.useMetadata) {
+        return `
+          /**
+          useMetadata:
+          ${JSON.stringify(json.meta.useMetadata)}
+          */
+          
+          ${code}`;
+      }
+
+      return code;
+    },
+  },
+});
+
 export const runTestsForJsx = () => {
   test('Remove Internal mitosis package', async () => {
     const component = parseJsx((await basicMitosis).code, {
@@ -597,8 +619,9 @@ export const runTestsForJsx = () => {
         Object.keys(tests).forEach((key) => {
           test(key, async () => {
             const singleTest = tests[key];
-            const t = isTestWithFailFor(singleTest) ? singleTest.file : singleTest;
-            const component = parseJsx((await t).code, config);
+            const testPromise = isTestWithFailFor(singleTest) ? singleTest.file : singleTest;
+            const t = await testPromise;
+            const component = parseJsx(t.code, { ...config, filePath: t.filePath });
             expect(component).toMatchSnapshot();
           });
         });
@@ -650,8 +673,14 @@ export const runTestsForTarget = <X extends BaseTranspilerOptions>({
   only?: string[]; // Test only some tests based on key
 }) => {
   const configurations: { options: X; testName: string }[] = [
-    { options: { ...options, typescript: false }, testName: 'Javascript Test' },
-    { options: { ...options, typescript: true }, testName: 'Typescript Test' },
+    {
+      options: { ...options, typescript: false, plugins: [metaDataPlugin] },
+      testName: 'Javascript Test',
+    },
+    {
+      options: { ...options, typescript: true, plugins: [metaDataPlugin] },
+      testName: 'Typescript Test',
+    },
   ];
 
   type ParserConfig = {
@@ -675,6 +704,7 @@ export const runTestsForTarget = <X extends BaseTranspilerOptions>({
                 }
               : {
                   typescript: false,
+                  filePath,
                 },
           ),
         testsArray: filterTests(JSX_TESTS_FOR_TARGET[target], only),
@@ -694,6 +724,7 @@ export const runTestsForTarget = <X extends BaseTranspilerOptions>({
                 const t = await basicMitosis;
                 const component = parseJsx(t.code, {
                   compileAwayPackages: ['@dummy/custom-mitosis'],
+                  filePath: t.filePath,
                 });
                 const output = generator(options)({ component, path: t.filePath });
                 expect(output).toMatchSnapshot();
diff --git a/packages/core/src/parsers/jsx/helpers.ts b/packages/core/src/parsers/jsx/helpers.ts
index b7dc1fbf11..5086770e13 100644
--- a/packages/core/src/parsers/jsx/helpers.ts
+++ b/packages/core/src/parsers/jsx/helpers.ts
@@ -1,7 +1,14 @@
+import { tryParseJson } from '@/helpers/json';
+import { objectHasKey } from '@/helpers/typescript';
+import { Context } from '@/parsers/jsx/types';
 import * as babel from '@babel/core';
+import { BabelFileResult } from '@babel/core';
 import generate from '@babel/generator';
-import { tryParseJson } from '../../helpers/json';
-import { objectHasKey } from '../../helpers/typescript';
+import tsPlugin from '@babel/plugin-syntax-typescript';
+import tsPreset from '@babel/preset-typescript';
+import { Visitor } from '@babel/traverse';
+
+const typescriptBabelPreset = [tsPreset, { isTSX: true, allExtensions: true }];
 
 const { types } = babel;
 
@@ -14,7 +21,8 @@ export const uncapitalize = (str: string) => {
 };
 
 export const parseCode = (node: babel.types.Node) => {
-  return generate(node).code;
+  const generatorResult = generate(node);
+  return generatorResult.code;
 };
 
 export const parseCodeJson = (node: babel.types.Node) => {
@@ -33,3 +41,23 @@ export const transformAttributeName = (name: string) => {
   if (objectHasKey(HTML_ATTR_FROM_JSX, name)) return HTML_ATTR_FROM_JSX[name];
   return name;
 };
+
+export const babelStripTypes = (code: string, typescript?: boolean): string =>
+  typescript
+    ? (babel.transform(code, {
+        configFile: false,
+        babelrc: false,
+        presets: [typescriptBabelPreset],
+      })?.code as string)
+    : code;
+
+export const babelDefaultTransform = (
+  code: string,
+  visitor: Visitor<Context>,
+): BabelFileResult | null =>
+  babel.transform(code, {
+    configFile: false,
+    babelrc: false,
+    comments: false,
+    plugins: [[tsPlugin, { isTSX: true }], (): babel.PluginObj<Context> => ({ visitor })],
+  });
diff --git a/packages/core/src/parsers/jsx/hooks/index.ts b/packages/core/src/parsers/jsx/hooks/index.ts
index f1c177f956..99d57d5223 100644
--- a/packages/core/src/parsers/jsx/hooks/index.ts
+++ b/packages/core/src/parsers/jsx/hooks/index.ts
@@ -1,10 +1,12 @@
+import { HOOKS } from '@/constants/hooks';
+import { resolveMetadata } from '@/parsers/jsx/hooks/use-metadata';
+import { MitosisComponent } from '@/types/mitosis-component';
 import * as babel from '@babel/core';
+import { NodePath } from '@babel/core';
 import generate from '@babel/generator';
-import { HOOKS } from '../../../constants/hooks';
-import { MitosisComponent } from '../../../types/mitosis-component';
 import { parseCodeJson } from '../helpers';
 import { parseStateObjectToMitosisState } from '../state';
-import { ParseMitosisOptions } from '../types';
+import { Context, ParseMitosisOptions } from '../types';
 import { getHook } from './helpers';
 
 const { types } = babel;
@@ -31,32 +33,43 @@ export function generateUseStyleCode(expression: babel.types.CallExpression) {
  * the returned nodes array
  */
 export const collectModuleScopeHooks =
-  (component: MitosisComponent, options: ParseMitosisOptions) => (nodes: babel.types.Statement[]) =>
-    nodes.filter((node) => {
+  (context: Context, options: ParseMitosisOptions) => (path: NodePath<babel.types.Program>) => {
+    const programNodes = path.node.body;
+    return programNodes.filter((node) => {
       const hook = getHook(node);
       if (!hook) {
         return true;
       }
       if (types.isIdentifier(hook.callee)) {
         const metadataHooks = new Set((options.jsonHookNames || []).concat(HOOKS.METADATA));
-        if (metadataHooks.has(hook.callee.name)) {
+        const name = hook.callee.name;
+        if (metadataHooks.has(name)) {
+          const metaDataObjectNode = hook.arguments[0];
+
+          let json: any;
           try {
-            component.meta[hook.callee.name] = {
-              ...((component.meta[hook.callee.name] as Object) || {}),
-              ...parseCodeJson(hook.arguments[0]),
-            };
-            return false;
+            json = options.filePath
+              ? resolveMetadata({ context, node: metaDataObjectNode, nodePath: path, options })
+              : parseCodeJson(metaDataObjectNode);
           } catch (e) {
-            console.error(`Error parsing metadata hook ${hook.callee.name}`);
+            // Meta data isn't simple json convert it to ast
+            console.error(`Error parsing metadata hook ${name}`);
             throw e;
           }
-        } else if (hook.callee.name === HOOKS.STYLE) {
-          component.style = generateUseStyleCode(hook);
+
+          context.builder.component.meta[name] = {
+            ...((context.builder.component.meta[name] as Object) || {}),
+            ...json,
+          };
+          return false;
+        } else if (name === HOOKS.STYLE) {
+          context.builder.component.style = generateUseStyleCode(hook);
           return false;
-        } else if (hook.callee.name === HOOKS.DEFAULT_PROPS) {
-          parseDefaultPropsHook(component, hook);
+        } else if (name === HOOKS.DEFAULT_PROPS) {
+          parseDefaultPropsHook(context.builder.component, hook);
         }
       }
 
       return true;
     });
+  };
diff --git a/packages/core/src/parsers/jsx/hooks/use-metadata.ts b/packages/core/src/parsers/jsx/hooks/use-metadata.ts
new file mode 100644
index 0000000000..24d547ab9d
--- /dev/null
+++ b/packages/core/src/parsers/jsx/hooks/use-metadata.ts
@@ -0,0 +1,212 @@
+import { mapImportDeclarationToMitosisImport } from '@/helpers/mitosis-imports';
+import { babelDefaultTransform, babelStripTypes, parseCodeJson } from '@/parsers/jsx/helpers';
+import { Context, ParseMitosisOptions, ResolvedImport } from '@/parsers/jsx/types';
+import { MitosisImport } from '@/types/mitosis-component';
+import * as babel from '@babel/core';
+import { NodePath } from '@babel/core';
+import { existsSync, readFileSync } from 'fs-extra-promise';
+import * as path from 'path';
+
+type ResolveData = {
+  nodePath: NodePath<babel.types.Program>;
+  currentFilePath?: string;
+  resolvedImports?: ResolvedImport[];
+};
+
+const getCodeFromImport = (
+  importObject: MitosisImport,
+  currentFile?: string,
+): { code?: string; typescript?: boolean; importFile?: string } => {
+  if (currentFile) {
+    // resolve path of import
+    const absolutePathArray = currentFile.replaceAll('\\', '/').replaceAll('/./', '/').split('/');
+    const originFile = absolutePathArray.pop();
+    const typescript = !!originFile?.includes('.ts');
+    const importFile =
+      importObject.path.endsWith('.ts') || importObject.path.endsWith('.js')
+        ? importObject.path
+        : `${importObject.path}.${typescript ? 'ts' : 'js'}`;
+    const importFilePath = path.resolve(absolutePathArray.join('/'), importFile);
+    if (existsSync(importFilePath)) {
+      return { code: readFileSync(importFilePath).toString(), typescript, importFile };
+    }
+    return { typescript };
+  }
+
+  return {};
+};
+
+const fillDeclarations = ({
+  declaration,
+  valueToResolve,
+  currentFilePath,
+  nodePath,
+}: {
+  declaration: babel.types.VariableDeclaration;
+  valueToResolve: string;
+} & ResolveData): Record<string, any> => {
+  let result = {};
+  for (const variable of declaration.declarations) {
+    if (babel.types.isIdentifier(variable.id)) {
+      if (variable.id.name === valueToResolve && variable.init) {
+        const filled = resolveObjectsRecursive({
+          node: variable.init,
+          nodePath,
+          currentFilePath,
+        });
+
+        result = {
+          ...result,
+          ...filled,
+        };
+      }
+    }
+  }
+  return result;
+};
+
+const resolve = ({
+  nodePath,
+  currentFilePath,
+  valueToResolve,
+  resolvedImports,
+}: ResolveData & { valueToResolve: string }): Record<string, any> => {
+  let result = {};
+  const programNodes = nodePath.node.body;
+  for (const statement of programNodes) {
+    if (babel.types.isImportDeclaration(statement)) {
+      const importObject = mapImportDeclarationToMitosisImport(statement);
+
+      if (Object.keys(importObject.imports).includes(valueToResolve)) {
+        if (resolvedImports) {
+          // We add this statement, to remove it from imports of generated file
+          resolvedImports.push({ path: importObject.path, value: valueToResolve });
+        }
+
+        // In this case the variable was imported
+        const { code, typescript, importFile } = getCodeFromImport(importObject, currentFilePath);
+        if (code) {
+          const jsxToUse = babelStripTypes(code, typescript);
+
+          babelDefaultTransform(jsxToUse, {
+            Program(path) {
+              const statements: babel.types.Statement[] = path.node.body;
+              for (const pStatement of statements) {
+                if (babel.types.isExportNamedDeclaration(pStatement)) {
+                  const declaration = pStatement.declaration;
+                  if (babel.types.isVariableDeclaration(declaration)) {
+                    const filledDeclaration = fillDeclarations({
+                      declaration,
+                      valueToResolve,
+                      currentFilePath: importFile,
+                      nodePath: path,
+                    });
+                    result = {
+                      ...result,
+                      ...filledDeclaration,
+                    };
+                  }
+                }
+              }
+            },
+          });
+        }
+      }
+    } else if (babel.types.isVariableDeclaration(statement)) {
+      // In this case the variable is inside the same file
+      const filledDeclaration = fillDeclarations({
+        declaration: statement,
+        valueToResolve,
+        currentFilePath,
+        nodePath,
+      });
+      result = {
+        ...result,
+        ...filledDeclaration,
+      };
+    }
+  }
+
+  return result;
+};
+
+const resolveObjectsRecursive = ({
+  node,
+  nodePath,
+  currentFilePath,
+  resolvedImports,
+}: {
+  node: babel.types.Node;
+} & ResolveData): Record<string, any> => {
+  let result = {};
+
+  if (babel.types.isObjectExpression(node)) {
+    for (const prop of node.properties) {
+      if (babel.types.isObjectProperty(prop)) {
+        if (babel.types.isIdentifier(prop.key)) {
+          const objectKey = prop.key.name;
+          if (babel.types.isIdentifier(prop.value)) {
+            const valueToResolve = prop.value.name;
+            // In this case we have some variable defined in the same or another file
+            const resolved = resolve({
+              nodePath,
+              currentFilePath,
+              valueToResolve,
+              resolvedImports,
+            });
+            result = {
+              ...result,
+              [objectKey]: { ...resolved },
+            };
+          } else {
+            // In this case we have a primitive value
+            const json = parseCodeJson(prop.value);
+            result = {
+              ...result,
+              [objectKey]: json,
+            };
+          }
+        }
+      } else if (babel.types.isSpreadElement(prop)) {
+        if (babel.types.isIdentifier(prop.argument)) {
+          const valueToResolve = prop.argument.name;
+
+          result = {
+            ...result,
+            ...resolve({ nodePath, currentFilePath, valueToResolve }),
+          };
+        }
+      } else {
+        // In this case we have a primitive value
+        result = {
+          ...result,
+          ...parseCodeJson(prop),
+        };
+      }
+    }
+  }
+
+  return result;
+};
+
+export const resolveMetadata = ({
+  context,
+  node,
+  nodePath,
+  options,
+}: {
+  context: Context;
+  node: babel.types.Node;
+  nodePath: NodePath<babel.types.Program>;
+  options: ParseMitosisOptions;
+}): Record<string, any> => {
+  if (context.cwd && options?.filePath) {
+    const resolvedImports: ResolvedImport[] = [];
+    const currentFilePath = `${context.cwd}/${options.filePath}`;
+    const metadata = resolveObjectsRecursive({ node, nodePath, currentFilePath, resolvedImports });
+    context.builder.resolvedImports = resolvedImports;
+    return metadata;
+  }
+
+  return {};
+};
diff --git a/packages/core/src/parsers/jsx/imports.ts b/packages/core/src/parsers/jsx/imports.ts
index 05d1ca9f0c..32ab915e40 100644
--- a/packages/core/src/parsers/jsx/imports.ts
+++ b/packages/core/src/parsers/jsx/imports.ts
@@ -1,9 +1,7 @@
+import { mapImportDeclarationToMitosisImport } from '@/helpers/mitosis-imports';
 import * as babel from '@babel/core';
-import { mapImportDeclarationToMitosisImport } from '../../helpers/mitosis-imports';
 import { Context, ParseMitosisOptions } from './types';
 
-const { types } = babel;
-
 export const handleImportDeclaration = ({
   options,
   path,
@@ -24,7 +22,16 @@ export const handleImportDeclaration = ({
     return;
   }
   const importObject = mapImportDeclarationToMitosisImport(path.node);
-  context.builder.component.imports.push(importObject);
+  const resolvedImport = context.builder.resolvedImports?.find(
+    (rImport) => rImport.path === importObject.path,
+  );
+  if (resolvedImport) {
+    delete importObject.imports[resolvedImport.value];
+  }
+
+  if (Object.keys(importObject.imports).length > 0) {
+    context.builder.component.imports.push(importObject);
+  }
 
   path.remove();
 };
diff --git a/packages/core/src/parsers/jsx/jsx.ts b/packages/core/src/parsers/jsx/jsx.ts
index df6a1669ef..970130f9f3 100644
--- a/packages/core/src/parsers/jsx/jsx.ts
+++ b/packages/core/src/parsers/jsx/jsx.ts
@@ -1,23 +1,22 @@
+import { HOOKS } from '@/constants/hooks';
+import { createMitosisComponent } from '@/helpers/create-mitosis-component';
 import { filterEmptyTextNodes } from '@/helpers/filter-empty-text-nodes';
+import { tryParseJson } from '@/helpers/json';
+import { stripNewlinesInStrings } from '@/helpers/replace-new-lines-in-strings';
+import { getSignalImportName } from '@/helpers/signals';
 import { traverseNodes } from '@/helpers/traverse-nodes';
+import { MitosisComponent } from '@/types/mitosis-component';
 import * as babel from '@babel/core';
 import generate from '@babel/generator';
-import tsPlugin from '@babel/plugin-syntax-typescript';
 import tsPreset from '@babel/preset-typescript';
 import { pipe } from 'fp-ts/lib/function';
-import { HOOKS } from '../../constants/hooks';
-import { createMitosisComponent } from '../../helpers/create-mitosis-component';
-import { tryParseJson } from '../../helpers/json';
-import { stripNewlinesInStrings } from '../../helpers/replace-new-lines-in-strings';
-import { getSignalImportName } from '../../helpers/signals';
-import { MitosisComponent } from '../../types/mitosis-component';
 import { jsonToAst } from './ast';
 import { collectTypes, isTypeOrInterface } from './component-types';
 import { extractContextComponents } from './context';
 import { jsxElementToJson } from './element-parser';
 import { generateExports } from './exports';
 import { componentFunctionToJson } from './function-parser';
-import { isImportOrDefaultExport } from './helpers';
+import { babelDefaultTransform, babelStripTypes, isImportOrDefaultExport } from './helpers';
 import { collectModuleScopeHooks } from './hooks';
 import { getMagicString, getTargetId, getUseTargetStatements } from './hooks/use-target';
 import { handleImportDeclaration } from './imports';
@@ -25,7 +24,7 @@ import { undoPropsDestructure } from './props';
 import { findOptionalProps } from './props-types';
 import { findSignals } from './signals';
 import { mapStateIdentifiers } from './state';
-import { Context, ParseMitosisOptions } from './types';
+import { ParseMitosisOptions } from './types';
 
 const { types } = babel;
 
@@ -57,130 +56,112 @@ export function parseJsx(
     ..._options,
   };
 
-  const jsxToUse = options.typescript
-    ? jsx
-    : // strip typescript types by running through babel's TS preset.
-      (babel.transform(jsx, {
-        configFile: false,
-        babelrc: false,
-        presets: [typescriptBabelPreset],
-      })?.code as string);
-
   const stateToScope: string[] = [];
 
-  const output = babel.transform(jsxToUse, {
-    configFile: false,
-    babelrc: false,
-    comments: false,
-    plugins: [
-      [tsPlugin, { isTSX: true }],
-      (): babel.PluginObj<Context> => ({
-        visitor: {
-          JSXExpressionContainer(path, context) {
-            if (types.isJSXEmptyExpression(path.node.expression)) {
-              path.remove();
-            }
-          },
-          Program(path, context) {
-            if (context.builder) {
-              return;
-            }
-
-            beforeParse(path);
-
-            context.builder = {
-              component: createMitosisComponent(),
-            };
-
-            const keepStatements = path.node.body.filter(
-              (statement) => isImportOrDefaultExport(statement) || isTypeOrInterface(statement),
-            );
-
-            context.builder.component.exports = generateExports(path);
-
-            subComponentFunctions = path.node.body
-              .filter(
-                (node) =>
-                  !types.isExportDefaultDeclaration(node) && types.isFunctionDeclaration(node),
-              )
-              .map((node) => `export default ${generate(node).code!}`);
-
-            const preComponentCode = pipe(
-              path.node.body.filter((statement) => !isImportOrDefaultExport(statement)),
-              collectModuleScopeHooks(context.builder.component, options),
-              types.program,
-              generate,
-              (generatorResult) => generatorResult.code,
-            );
-
-            // TODO: support multiple? e.g. for others to add imports?
-            context.builder.component.hooks.preComponent = { code: preComponentCode };
-
-            path.replaceWith(types.program(keepStatements));
-          },
-          FunctionDeclaration(path, context) {
-            const { node } = path;
-            if (types.isIdentifier(node.id)) {
-              const name = node.id.name;
-              if (name[0].toUpperCase() === name[0]) {
-                path.traverse({
-                  /**
-                   * Plugin to find all `useTarget()` assignment calls inside of the component function body
-                   * and replace them with a magic string.
-                   */
-                  CallExpression(path) {
-                    if (!types.isCallExpression(path.node)) return;
-                    if (!types.isIdentifier(path.node.callee)) return;
-                    if (path.node.callee.name !== HOOKS.TARGET) return;
-
-                    const targetBlock = getUseTargetStatements(path);
-
-                    if (!targetBlock) return;
-
-                    const blockId = getTargetId(context.builder.component);
-
-                    // replace the useTarget() call with a magic string
-                    path.replaceWith(types.stringLiteral(getMagicString(blockId)));
-
-                    // store the target block in the component
-                    context.builder.component.targetBlocks = {
-                      ...context.builder.component.targetBlocks,
-                      [blockId]: targetBlock,
-                    };
-                  },
-                });
-                path.replaceWith(jsonToAst(componentFunctionToJson(node, context, stateToScope)));
-              }
-            }
-          },
-          ImportDeclaration(path, context) {
-            handleImportDeclaration({ options, path, context });
-          },
-          ExportDefaultDeclaration(path) {
-            path.replaceWith(path.node.declaration);
-          },
-          JSXElement(path) {
-            const { node } = path;
-            path.replaceWith(jsonToAst(jsxElementToJson(node)));
-          },
-          ExportNamedDeclaration(path, context) {
-            const { node } = path;
-            if (
-              babel.types.isTSInterfaceDeclaration(node.declaration) ||
-              babel.types.isTSTypeAliasDeclaration(node.declaration)
-            ) {
-              collectTypes(path, context);
-            }
-          },
-          TSTypeAliasDeclaration(path, context) {
-            collectTypes(path, context);
-          },
-          TSInterfaceDeclaration(path, context) {
-            collectTypes(path, context);
-          },
-        },
-      }),
-    ],
+  const jsxToUse = babelStripTypes(jsx, !options.typescript);
+
+  const output = babelDefaultTransform(jsxToUse, {
+    JSXExpressionContainer(path, context) {
+      if (types.isJSXEmptyExpression(path.node.expression)) {
+        path.remove();
+      }
+    },
+    Program(path, context) {
+      if (context.builder) {
+        return;
+      }
+
+      beforeParse(path);
+
+      context.builder = {
+        component: createMitosisComponent(),
+      };
+
+      const keepStatements = path.node.body.filter(
+        (statement) => isImportOrDefaultExport(statement) || isTypeOrInterface(statement),
+      );
+
+      context.builder.component.exports = generateExports(path);
+
+      subComponentFunctions = path.node.body
+        .filter(
+          (node) => !types.isExportDefaultDeclaration(node) && types.isFunctionDeclaration(node),
+        )
+        .map((node) => `export default ${generate(node).code!}`);
+
+      const preComponentCode = pipe(
+        path,
+        collectModuleScopeHooks(context, options),
+        types.program,
+        generate,
+        (generatorResult) => generatorResult.code,
+      );
+
+      // TODO: support multiple? e.g. for others to add imports?
+      context.builder.component.hooks.preComponent = { code: preComponentCode };
+
+      path.replaceWith(types.program(keepStatements));
+    },
+    FunctionDeclaration(path, context) {
+      const { node } = path;
+      if (types.isIdentifier(node.id)) {
+        const name = node.id.name;
+        if (name[0].toUpperCase() === name[0]) {
+          path.traverse({
+            /**
+             * Plugin to find all `useTarget()` assignment calls inside of the component function body
+             * and replace them with a magic string.
+             */
+            CallExpression(path) {
+              if (!types.isCallExpression(path.node)) return;
+              if (!types.isIdentifier(path.node.callee)) return;
+              if (path.node.callee.name !== HOOKS.TARGET) return;
+
+              const targetBlock = getUseTargetStatements(path);
+
+              if (!targetBlock) return;
+
+              const blockId = getTargetId(context.builder.component);
+
+              // replace the useTarget() call with a magic string
+              path.replaceWith(types.stringLiteral(getMagicString(blockId)));
+
+              // store the target block in the component
+              context.builder.component.targetBlocks = {
+                ...context.builder.component.targetBlocks,
+                [blockId]: targetBlock,
+              };
+            },
+          });
+          path.replaceWith(jsonToAst(componentFunctionToJson(node, context, stateToScope)));
+        }
+      }
+    },
+    ImportDeclaration(path, context) {
+      handleImportDeclaration({ options, path, context });
+    },
+    ExportDefaultDeclaration(path) {
+      path.replaceWith(path.node.declaration);
+    },
+    JSXElement(path) {
+      const { node } = path;
+      path.replaceWith(jsonToAst(jsxElementToJson(node)));
+    },
+    ExportNamedDeclaration(path, context) {
+      const { node } = path;
+      if (
+        babel.types.isTSInterfaceDeclaration(node.declaration) ||
+        babel.types.isTSTypeAliasDeclaration(node.declaration)
+      ) {
+        collectTypes(path, context);
+      }
+    },
+    TSTypeAliasDeclaration(path, context) {
+      collectTypes(path, context);
+    },
+    TSInterfaceDeclaration(path, context) {
+      collectTypes(path, context);
+    },
   });
 
   if (!output || !output.code) {
diff --git a/packages/core/src/parsers/jsx/types.ts b/packages/core/src/parsers/jsx/types.ts
index ce923be699..c9522f4959 100644
--- a/packages/core/src/parsers/jsx/types.ts
+++ b/packages/core/src/parsers/jsx/types.ts
@@ -1,5 +1,5 @@
+import { MitosisComponent } from '@/types/mitosis-component';
 import { Project } from 'ts-morph';
-import { MitosisComponent } from '../../types/mitosis-component';
 
 export type ParseMitosisOptions = {
   jsonHookNames?: string[];
@@ -11,9 +11,16 @@ export type ParseMitosisOptions = {
   filePath?: string;
 };
 
+export type ResolvedImport = {
+  path: string;
+  value: string;
+};
+
 export type Context = {
   // Babel has other context
+  cwd?: string;
   builder: {
     component: MitosisComponent;
+    resolvedImports?: ResolvedImport[];
   };
 };
diff --git a/packages/docs/src/routes/docs/customizability/index.mdx b/packages/docs/src/routes/docs/customizability/index.mdx
index 3ede2fe54e..7f6ef31c58 100644
--- a/packages/docs/src/routes/docs/customizability/index.mdx
+++ b/packages/docs/src/routes/docs/customizability/index.mdx
@@ -48,9 +48,13 @@ You will see that we traverse the JSON nodes, and for each MitosisNode, we remov
 
 ## useMetadata
 
-What happens if you want a plugin to only apply to a specific set of components? Or if you'd like to provide some metadata for your plugin, and that metadata will depend on which component is being compiled?
+What happens if you want a plugin to only apply to a specific set of components?
+Or if you'd like to provide some metadata for your plugin,
+and that metadata will depend on which component is being compiled?
 
-This is where our `useMetadata` hook comes in handy. All you need to do is import and use the hook (you can use it anywhere in your mitosis component file, even at the top root level!):
+This is where our `useMetadata` hook comes in handy.
+All you need to do is import and use the hook
+(you can use it anywhere in your mitosis component file, even at the top root level!):
 
 ```tsx
 import { useMetadata } from '@builder.io/mitosis';
@@ -62,7 +66,9 @@ export default function SmileReviews(props: SmileReviewsProps) {
 }
 ```
 
-The metadata will be stored in your mitosis component's JSON, under `json.meta.useMetadata.mySpecialComponentType`. You can then use it in your JSON pre/post plugins:
+The metadata will be stored in your mitosis component's JSON
+, under `json.meta.useMetadata.mySpecialComponentType`.
+You can then use it in your JSON pre/post plugins:
 
 ```tsx
 const plugin = {
@@ -77,6 +83,8 @@ const plugin = {
 };
 ```
 
+Check the [example](https://github.com/BuilderIO/mitosis/tree/main/examples/metadata/src/components/metadata.lite.tsx) to see a complex `useMetadata` usage.
+
 ## Component JSON
 
 The way Mitosis' engine works is:
diff --git a/yarn.lock b/yarn.lock
index baa9b9bb5f..f87de890cc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3172,6 +3172,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@builder.io/metadata-example@workspace:examples/metdata":
+  version: 0.0.0-use.local
+  resolution: "@builder.io/metadata-example@workspace:examples/metdata"
+  dependencies:
+    "@builder.io/mitosis": "workspace:*"
+    "@builder.io/mitosis-cli": "workspace:*"
+    eslint: "npm:^7.21.0"
+  languageName: unknown
+  linkType: soft
+
 "@builder.io/mitosis-cli@workspace:*, @builder.io/mitosis-cli@workspace:packages/cli":
   version: 0.0.0-use.local
   resolution: "@builder.io/mitosis-cli@workspace:packages/cli"