diff --git a/.changeset/orange-days-chew.md b/.changeset/orange-days-chew.md
new file mode 100644
index 0000000000..2db991cc5c
--- /dev/null
+++ b/.changeset/orange-days-chew.md
@@ -0,0 +1,17 @@
+---
+"@lynx-js/react": patch
+---
+
+Support using `"jsx": "react-jsx"` along with `"jsxImportSource": "@lynx-js/react"` in `tsconfig.json`.
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@lynx-js/react"
+  }
+}
+```
+
+This configuration enhances TypeScript definitions for standard JSX elements,
+providing type errors for unsupported elements like `<div>` or `<button>`.
diff --git a/.changeset/stupid-hounds-reflect.md b/.changeset/stupid-hounds-reflect.md
new file mode 100644
index 0000000000..9008b57d4e
--- /dev/null
+++ b/.changeset/stupid-hounds-reflect.md
@@ -0,0 +1,5 @@
+---
+"create-rspeedy": patch
+---
+
+Use `"jsx": "react-jsx"` with `"jsxImportSource": "@lynx-js/react"`.
diff --git a/packages/react/runtime/__test__/tsconfig.json b/packages/react/runtime/__test__/tsconfig.json
new file mode 100644
index 0000000000..665574cb8c
--- /dev/null
+++ b/packages/react/runtime/__test__/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@lynx-js/react",
+    "noEmit": true,
+  },
+  "include": ["**/*.ts", "**/*.tsx", "../../types/react.d.ts"],
+}
diff --git a/packages/react/runtime/__test__/typecheck/jsx-runtime.test-d.tsx b/packages/react/runtime/__test__/typecheck/jsx-runtime.test-d.tsx
new file mode 100644
index 0000000000..5ea4d19673
--- /dev/null
+++ b/packages/react/runtime/__test__/typecheck/jsx-runtime.test-d.tsx
@@ -0,0 +1,104 @@
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import type { JSX } from '../../jsx-runtime/index.js';
+import type { MainThread, NodesRef, Target, TouchEvent } from '@lynx-js/types';
+import { assertType, describe, test } from 'vitest';
+import { useMainThreadRef } from '../../src/lynx-api.js';
+import { useRef } from '../../src/hooks/react.js';
+
+describe('JSX Runtime Types', () => {
+  test('should support basic JSX element', () => {
+    const viewEle = (
+      <view>
+        <text>child node</text>
+      </view>
+    );
+    assertType<JSX.Element>(viewEle);
+  });
+
+  test('should validate the required props for raw-text', () => {
+    // @ts-expect-error: Missing required prop 'text'
+    const shouldError = <raw-text></raw-text>;
+
+    const rawTextELe = <raw-text text={'text'}></raw-text>;
+    assertType<JSX.Element>(rawTextELe);
+  });
+
+  test('should support JSX.Elements', () => {
+    function App() {
+      function renderFoo(): JSX.Element {
+        return <text></text>;
+      }
+      return renderFoo();
+    }
+    assertType<JSX.Element>(App());
+  });
+
+  test('should error on unsupported tags', () => {
+    // @ts-expect-error: Unsupported tag
+    const divElement = <div></div>;
+  });
+
+  test('should support event handlers', () => {
+    const viewWithBind = (
+      <view
+        bindtap={(e) => {
+          assertType<number>(e.detail.x);
+          assertType<TouchEvent>(e);
+        }}
+      >
+      </view>
+    );
+    const viewWithCatch = (
+      <view
+        catchtap={(e) => {
+          assertType<Target>(e.currentTarget);
+          assertType<TouchEvent>(e);
+        }}
+      >
+      </view>
+    );
+    assertType<JSX.Element>(viewWithBind);
+    assertType<JSX.Element>(viewWithCatch);
+  });
+
+  test('should support main-thread event handlers', () => {
+    const viewWithMainThreadEvent = (
+      <view
+        main-thread:bindtap={(e) => {
+          assertType<number>(e.detail.x);
+          assertType<MainThread.Element>(e.currentTarget);
+        }}
+      >
+      </view>
+    );
+    assertType<JSX.Element>(viewWithMainThreadEvent);
+  });
+
+  test('should support ref prop with ref object', () => {
+    const ref = useRef<NodesRef>(null);
+    const viewWithRefObject = <view ref={ref}></view>;
+    assertType<JSX.Element>(viewWithRefObject);
+  });
+
+  test('should support ref prop with function', () => {
+    const ref = useRef<NodesRef>(null);
+    const viewWithRefCallback = (
+      <view
+        ref={(n) => {
+          assertType<NodesRef | null>(n);
+          ref.current = n;
+        }}
+      >
+      </view>
+    );
+    assertType<JSX.Element>(viewWithRefCallback);
+  });
+
+  test('should support main-thread ref', () => {
+    const mtRef = useMainThreadRef<MainThread.Element>(null);
+    const viewWithMainThreadRef = <view main-thread:ref={mtRef}></view>;
+    assertType<JSX.Element>(viewWithMainThreadRef);
+  });
+});
diff --git a/packages/react/runtime/jsx-dev-runtime/index.d.ts b/packages/react/runtime/jsx-dev-runtime/index.d.ts
index fc78a67e03..c4b23855ae 100644
--- a/packages/react/runtime/jsx-dev-runtime/index.d.ts
+++ b/packages/react/runtime/jsx-dev-runtime/index.d.ts
@@ -1,5 +1,17 @@
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
+import { JSX as _JSX } from 'react';
+
+import { IntrinsicElements as _IntrinsicElements } from '@lynx-js/types';
+
 export { jsxDEV, Fragment } from 'react/jsx-dev-runtime';
 export { jsx, jsxs } from 'react/jsx-runtime';
+
+export namespace JSX {
+  interface IntrinsicElements extends _IntrinsicElements {}
+
+  interface IntrinsicAttributes {}
+
+  type Element = _JSX.Element;
+}
diff --git a/packages/react/runtime/jsx-runtime/index.d.ts b/packages/react/runtime/jsx-runtime/index.d.ts
index 756bbc4128..0388f7658a 100644
--- a/packages/react/runtime/jsx-runtime/index.d.ts
+++ b/packages/react/runtime/jsx-runtime/index.d.ts
@@ -1,4 +1,16 @@
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
+import { JSX as _JSX } from 'react';
+
+import { IntrinsicElements as _IntrinsicElements } from '@lynx-js/types';
+
 export { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+export namespace JSX {
+  interface IntrinsicElements extends _IntrinsicElements {}
+
+  interface IntrinsicAttributes {}
+
+  type Element = _JSX.Element;
+}
diff --git a/packages/react/runtime/package.json b/packages/react/runtime/package.json
index 356bd814b9..d39210c4da 100644
--- a/packages/react/runtime/package.json
+++ b/packages/react/runtime/package.json
@@ -15,7 +15,8 @@
     "src"
   ],
   "scripts": {
-    "test": "vitest run --coverage"
+    "test": "vitest run --coverage",
+    "test:type": "vitest --typecheck.only"
   },
   "devDependencies": {
     "@lynx-js/react": "workspace:*",
diff --git a/packages/react/runtime/tsconfig.json b/packages/react/runtime/tsconfig.json
index 8be65ccae3..6370ce3dd1 100644
--- a/packages/react/runtime/tsconfig.json
+++ b/packages/react/runtime/tsconfig.json
@@ -5,7 +5,8 @@
     "outDir": "./lib",
     "baseUrl": "./",
     "rootDir": "./src",
-    "jsx": "preserve",
+    "jsx": "react-jsx",
+    "jsxImportSource": "./",
   },
   "references": [{
     "path": "../worklet-runtime/tsconfig.json",
diff --git a/packages/react/runtime/vitest.config.ts b/packages/react/runtime/vitest.config.ts
index 336204fd4a..8e101659ea 100644
--- a/packages/react/runtime/vitest.config.ts
+++ b/packages/react/runtime/vitest.config.ts
@@ -91,6 +91,7 @@ export default defineConfig({
 
         '__test__/page.test.jsx',
         '**/*.d.ts',
+        '**/*.test-d.*',
       ],
       thresholds: {
         lines: 100,
diff --git a/packages/react/types/react.d.ts b/packages/react/types/react.d.ts
index e4b6cdc075..9068c0a707 100644
--- a/packages/react/types/react.d.ts
+++ b/packages/react/types/react.d.ts
@@ -145,3 +145,5 @@ declare module '@lynx-js/types' {
     'reuse-identifier'?: Key;
   }
 }
+
+export type { JSX } from '../runtime/jsx-runtime/index.d.ts';
diff --git a/packages/rspeedy/create-rspeedy/template-react-ts/tsconfig.json b/packages/rspeedy/create-rspeedy/template-react-ts/tsconfig.json
index 802b9e24d8..156bf57426 100644
--- a/packages/rspeedy/create-rspeedy/template-react-ts/tsconfig.json
+++ b/packages/rspeedy/create-rspeedy/template-react-ts/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
-    "jsx": "preserve",
-
+    "jsx": "react-jsx",
+    "jsxImportSource": "@lynx-js/react",
     "module": "node16",
     "moduleResolution": "node16",
 
diff --git a/packages/rspeedy/create-rspeedy/template-react-vitest-rltl-ts/tsconfig.json b/packages/rspeedy/create-rspeedy/template-react-vitest-rltl-ts/tsconfig.json
index 802b9e24d8..d9460d5509 100644
--- a/packages/rspeedy/create-rspeedy/template-react-vitest-rltl-ts/tsconfig.json
+++ b/packages/rspeedy/create-rspeedy/template-react-vitest-rltl-ts/tsconfig.json
@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
-    "jsx": "preserve",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@lynx-js/react",
 
-    "module": "node16",
+    "module": "node18",
     "moduleResolution": "node16",
 
     "strict": true,
diff --git a/vitest.config.ts b/vitest.config.ts
index f0aacc4949..8bf37c3961 100644
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -9,6 +9,7 @@ export default defineConfig({
     coverage: {
       exclude: [
         '**/*.d.ts',
+        '**/*.test-d.*',
         '**/vitest.config.ts',
         '**/rslib.config.ts',
         '**/*.bench.js',